flowmanceSivoh Design System
Sivoh is a confident digital-studio template built on scale and contrast. It opens on a full-screen team photo under a dark scrim with Building Digital Brands set at 185px in light Switzer, then flips the page to black as you scroll into the work: giant one-line titles, staggered square-cornered images, bright round icons. The type never gets heavy; the drama comes from size alone. Content blocks (blog, call to action, form, footer links) are styled black-on-white, and an interaction swaps the colours as sections come into view.
Four signatures make it recognisable:
- Giant light headlines. Display sizes run 100–185px at weight 400 (not bold), line height 1.0–1.1, no tracking: Building / Digital / Brands, Digital Innovation.
- The colour flip. Text and backgrounds switch between black-on-white and white-on-black over 300ms as sections scroll into view, so the same page reads light in one place and dark in another.
- Three bright dots. Services sit under 110px circles in tomato #FF5454, mint #69FF78 and indigo #545DFF, each with a thin white line icon (brain, atom, light bulb). They are the only UI colour.
- Rolling text everywhere. Menu, the full-screen menu links and the 70px footer links sit in overflow-hidden boxes and roll up to a duplicate on hover; a circular Play Showreel text badge sits over the hero.
Colors
Surfaces
#FFFFFFPage background in the CSS, and the light state of every section
#F5F5F5The filled grey button (More Templates, Send Message)
#DADADA1px input border
#000000Hero, menu overlay, and the dark state of the work, services and testimonials sections
Ink
#757575#FFFFFF#000000Headlines and links in the light state
#222222Hover fill of buttons and dark links (--black-2)
#757575Paragraphs, list items, category text, input text (--grey-2)
#ADADADUppercase eyebrow labels, 13px
#FFFFFFText on inverse-canvas
#FFFFFF · 70%Testimonial quotes and secondary text on black (60% also measured)
#9C9C9CCompany names under testimonials
#FFFFFFAction
#F5F5F5#222222#FAFAF7The 200px circle CTA
#B1B1B1Underlined inline links, turning #222222 on hover
#FF5454The three service icon circles only
#69FF78The three service icon circles only
#545DFFThe three service icon circles only
Lines & effects
#000000 · 12%1px outline of the outline button
#121212Testimonial cards on black
#FFFFFF · 20%The hairline under the nav and above the footer bottom row
#FFFFFF · 40%The round showreel button on the hero photo
Typography
Switzer · display-hero
The quick brown fox jumpsHero h1 Building Digital Brands, one word per line (.title-1). 185px · 400 · 1
Switzer · headline-lg
The quick brown fox jumpsFooter links in 60px-tall boxes (.footer-link). 70px · 500 · 0.86
Switzer · title-lg
The quick brown fox jumpsLabels such as Featured Clients (.title-3). 26px · 500 · 1.2
Switzer · body-xl
The quick brown fox jumpsHero lead We create digital products: websites, services, mobile applications. 24px · 400 · 1.2
Switzer · label-menu
The quick brown fox jumpsThe Menu trigger. 21px · 400 · 1.24
Switzer · eyebrow
The quick brown fox jumpsSmall section labels (.uppercase-title). 13px · 600 · 2.31 · 1px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred, with 5% side padding (content starts about 120px from the edge at 1440px) |
| Section rhythm | .section is 100px top and bottom, 80px at ≤991 and 60px at ≤479; the logo section 60px top and 150px bottom, then 80px / 80px at ≤991 and 60px / 60px at ≤479; the footer 80px top and 30px bottom |
| Breakpoints | 991px, 767px and 479px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 4px | |
sm | 16px | |
md | 30px | |
lg | 50px | |
xl | 100px | |
2xl | 150px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
footer-bottom | 30px | |
nav-y | 40px | |
footer-top | 80px | |
section | 100px | |
column-gap | 100px | |
section-logo-bottom | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Colour flip | Text colour (and section background) switch between the light and dark states, 300ms ease, on scroll into view |
| Text roll | Label moves y 0 → −100% while the copy moves 100% → 0%, 300ms ease (menu, footer); headline lines rise from y 110% → 0%, 400–500ms outCubic |
| Scroll reveal | opacity 0 → 1, 1000ms outQuart |
| Image parallax | Work images move y ±80px, x ±80px and y −100px across the viewport (scroll-linked) |
| Logo strip | The 150vw row moves sideways while in view |
| Image hover | Filter change, 300ms ease; size changes of 300–500ms (ease, outExpo) |
| Menu open | Overlay display none → flex, links fade in and roll up, 300–500ms |
| Cursor-linked moves | Mouse-move triggers move elements with the pointer (the showreel badge and images, about) |
| Buttons | Fill and colour change, 300ms; transforms 500ms |
Do’s and don’ts
- Set display titles at 100–185px in Switzer 400, line height 1.0–1.1, two or three title-case words.
- Alternate light (#FFFFFF / #000000 text) and dark (#000000 / #FFFFFF text) section states, switching over 300ms.
- Use square-cornered images at mixed sizes in a loose left-right zig-zag with large gaps.
- Keep buttons small and rectangular: 4px radius, 53px tall, 16px weight-600 labels.
- Use the three accent circles (#FF5454, #69FF78, #545DFF) only together, as service icons.
- Put links in overflow-hidden boxes and roll them on hover.
- Bold the big headlines (no 600–700 above 70px).
- Use the accent colours for text, buttons or section backgrounds.
- Round buttons into pills; pills and 30px radii are for inputs only.
- Add shadows, gradients on UI or borders on images.
- Put #757575 paragraphs on black below 18px; it is about 4.1:1 there.
- Shrink the grey button label: #757575 on #F5F5F5 is about 4.2:1, so keep it at 16px weight 600 or larger.
- Use ink-subtle #ADADAD (about 2.2:1 on white) for anything but short 13px uppercase eyebrows; never for sentences or links.
Example prompt
Any page in the Sivoh style
More design systems like this
Agency design systems, the same colors first.
Bring any of them to your AI tool
All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.
Get All AccessUpgrade to All AccessHow to use the Sivoh design system
Pick a file to see what it’s for and where it goes.
What it is
The whole design system in one markdown file, written for AI: every color, type style, spacing value, component and motion rule, plus do's, don'ts and a ready prompt.
Best for
Claude, ChatGPT, Gemini, Cursor and v0, or any other AI tool that builds pages or code.
How to use it
- Put
DESIGN.mdin your project and mention it in your request, or save it as.cursor/rules/sivoh.mdc - For the rule file, start it with a front-matter block that sets
alwaysApply: true, so every chat uses it - Ask: “Build a pricing page using DESIGN.md.” Cursor follows the colors, fonts, spacing and rules
- Put
DESIGN.mdin the project root - Add one line to
CLAUDE.md: “Follow DESIGN.md for all UI.” - Ask for any page or component; Claude reads the file first
- Attach
DESIGN.mdto the chat (or paste it in) - Ask: “Build a landing page in this design system.”
- Keep the file in the chat or project knowledge, so follow-up pages stay on style
What it is
Every token as data, in the W3C Design Tokens format: colors with their roles, type styles, radius, spacing, and component tokens that point at them.
Best for
Figma (Tokens Studio), Style Dictionary and other design-token tools, and build scripts.
How to use it
- In Figma, open Tokens Studio, choose Import, and pick
tokens.json - Or point Style Dictionary’s
sourceat it to generate tokens for any platform - In code, import it like any JSON file
What it is
A Tailwind CSS v4 theme: every color, font, type style, radius and spacing value becomes a Tailwind utility, like bg-canvas, text-headline-lg or rounded-md.
Best for
Tailwind v4 projects, and AI builders that write Tailwind (v0, Lovable, Bolt).
How to use it
- Save
theme.cssnext to your main CSS file - Import it after Tailwind:
@import "tailwindcss"; @import "./theme.css"; - Use the classes:
bg-canvas text-ink rounded-md p-lg
What it is
The same tokens as plain CSS variables on :root. Component values point at the color variables, so changing one color updates everything that uses it.
Best for
Any website: plain CSS, Webflow custom code, Framer, WordPress.
How to use it
- Add it to your stylesheet, or in Webflow paste it into Site settings → Custom code inside a
<style>tag - Use the variables anywhere:
color: var(--color-ink) - Change a token once and every place that uses it follows