Zoya Design System

Get DESIGN.md Download View template Works with

Zoya is a bright, playful studio site. White pages carry very large handwritten headlines (Build. Create. Launch.) in Story Script, a slanted brush-script face, set against plain Satoshi body text. Every few sections the page splits into a full-height photo on one side and a solid black panel on the other. Colour arrives in small doses as vivid two-stop gradients on labels, icons and menu hovers, while the buttons stay a quiet mauve.

Four signatures make it recognisable:

Script headlines. Section titles and the hero are Story Script 400 (170px hero, 62px sections, 80px CTA), never bold Satoshi. Each hero word ends with a full stop and gets its own line.
The hairline header. A fixed header whose four 1px black rules (each 45% wide) frame the top and bottom of the bar and stop short of the centred crossed logo, a black X with the letters Z, O, A and Y in its four corners. A creative digital studio. sits left in grey; Cart⁰ | Menu + sits right.
Photo + black half-bands. Two-column bands with no gap: a full-height editorial photo and a #000000 panel padded 80px (120px on the outer side) holding a gradient eyebrow, a 23px lead at 80% white and a white button.
Gradient accents. Four 50-degree gradients (wine #DA4453→#89216B, indigo #3F2B96→#A8C0FF, sunset #FF8C00→#FF0080, mint #11998E→#38EF7D) fill 100px service circles, clip the text of band eyebrows (About ZOYA, Our Skills, Contact Us) and colour menu links on hover.

Colors

Surfaces

canvas#FFFFFF

Page background, hero, overlay menu, cart

surface-1#ECECEC

The only light step: the primary button's hover fill

field#222222

Contact-form inputs on the black band

inverse-canvas#000000

Half-bands, CTA band, footer, go-top button

Ink

on-primary#FFFFFF

Text on primary

on-primary-hover#000000

Text on primary-hover

on-secondary#000000

Text on secondary

ink#000000

Headlines, nav labels, the statement paragraph, blog titles

ink-muted#757575

Paragraphs, categories, job titles, the nav tagline, the cart count

inverse-ink#FFFFFF

Text on black bands

inverse-ink-muted#FFFFFF · 80%

Band leads and skill labels

inverse-ink-subtle#FFFFFF · 57%

Footer links (60% for contact lines)

on-media#FFFFFF

Action

primary#826F8D

Filled buttons (Make A Call, Send Message), the newsletter submit, text-link colour and underline

primary-hover#ECECEC

Filled button hover

secondary#FFFFFF

White button on black bands (1px white border)

Lines & effects

line#000000

1px header rules, menu dividers, the menu's left column border

line-subtle#E1E1E1

Divider under blog titles

inverse-line#FFFFFF · 15%

Bottom border of the CTA band

tag-blue#4253FF

Blog category tags

tag-violet#7122FA

Blog category tags

gradient-wine-from#DA4453

gradient-wine-to#89216B

gradient-indigo-from#3F2B96

gradient-indigo-to#A8C0FF

gradient-sunset-from#FF8C00

gradient-sunset-to#FF0080

gradient-mint-from#11998E

gradient-mint-to#38EF7D

Typography

Story Script · display-hero

The quick brown fox jumps

Build. 170px · 400 · 0.9

Satoshi · headline-lg

The quick brown fox jumps

Centred statement Creative studio [logo] based in New York…. 62px · 700 · 1.2

Satoshi · title-lg

The quick brown fox jumps

Blog card titles. 32px · 700 · 1.2

Satoshi · body-lg

The quick brown fox jumps

Hero lead and band leads. 23px · 500 · 1.3

Satoshi · eyebrow

The quick brown fox jumps

About ZOYA, Our Skills, Contact Us. 21px · 500 · 1.2

Satoshi · label-button

The quick brown fox jumps

Buttons and text links. 16px · 700 · 1.2

Spacing & shape

Purpose	Value
Container	max 1200px, centred; sections add 5% side padding
Section rhythm	120px top and bottom (80px at ≤991px); half-band sections use 100px at ≤767px and 60px at ≤479px
Breakpoints	991px, 767px, 479px

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	20px
`md`	30px
`lg`	40px
`xl`	50px
`2xl`	80px
`3xl`	150px

Layout spacing

Token	Value	Preview
`grid-gap`	16px
`band-padding`	80px
`cta-padding`	90px
`section`	120px
`band-inset`	120px

Border radius

button3px

field4px

full9999px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-1

Level 3field

Motion

Fade-up on scroll	Opacity 0 → 1 and y 20px → 0, 300ms ease
Hero lines	Opacity 0 → 1 over 1000ms outQuart
Horizontal work gallery	The 400vh track scrolls the sticky row sideways while the section is in view
Skill bars	Width grows to the percentage, 500ms ease
Menu link hover	The black word slides out and the gradient copy slides in inside the 61px mask, 300ms ease
Work cursor	The mint circle follows the mouse over work items
Buttons	transition: all .3s
Links and social icons	transition: all .2s; social icons fade to 60%
Newsletter arrow	Background position 50% → 90%

Do’s and don’ts

Set the hero and section titles in Story Script 400; keep body and UI in Satoshi 500/700.
Frame the header with four 1px black rules and centre the crossed logo between them.
Alternate white sections with photo + #000000 half-bands padded 80px (120px outer side).
Use the four 50° gradients only on circles, clipped eyebrow text, menu hovers and the work cursor.
Use primary #826F8D for filled buttons and text-link underlines; use the white button on black.
Keep paragraphs at #757575 on white and white at 80% on black.
Use Story Script for paragraphs, buttons or labels.
Fill a band, card or button with a gradient.
Add shadows, rounded cards or radii beyond 3px buttons and 4px fields.
Introduce extra greys: text is #000000 or #757575 on white.
Make white-on-mauve button text smaller than 16px bold; the pair is close to the 4.5:1 limit.
Stack more than one display line style in a section; one script title per section.
Put ink-muted #757575 on surface-1 #ECECEC: it is only 3.9:1. #ECECEC is a hover fill; text on it is black.

Example prompt

Any page in the Zoya style

Prompt

Build your page in the Zoya style. White #FFFFFF page, Satoshi 500 body at 19px, line height 1.37, colour #757575; headings in black. Section titles use Story Script 400 (a slanted handwritten script) at 62px, line height 1.0; the hero uses Story Script at 170px, line height 0.9, one word per line ending in a full stop. Fixed header: four 1px black rules framing the bar, a centred crossed logo, a grey tagline left and "Cart | Menu +" right in 15px/700. Alternate white sections (120px vertical padding, 1200px container) with two-column bands: a full-height photo beside a #000000 panel padded 80px 80px 80px 120px, holding a 21px eyebrow with gradient-clipped text (#FF8C00 → #FF0080 at 37°), a 23px lead at white 80%, and a white button. Buttons: #826F8D, white 16px/700, 3px radius, 13px 22px padding, hover #ECECEC with black text in 300ms. Use 100px gradient circles for service icons. No shadows. Fade sections up 20px over 300ms ease.

# Zoya Design System

> Measured from the Zoya template. Drop it into Claude,
> ChatGPT, Gemini, Cursor or v0.

## Overview

Zoya is a bright, playful studio site. White pages carry
very large handwritten headlines (Build. Create.
Launch.) in Story Script, a slanted brush-script face,
set against plain Satoshi body text. Every few sections
the page splits into a full-height photo on one side and

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background, hero, … |
| surface-1    | #ECECEC     | The only light step: th… |
| field        | #222222     | Contact-form inputs on … |
| inverse-can… | #000000     | Half-bands, CTA band, f… |
| on-primary   | #FFFFFF     | Text on primary          |
| on-primary-… | #000000     | Text on primary-hover    |
| on-secondary | #000000     | Text on secondary        |
| ink          | #000000     | Headlines, nav labels, … |
| ink-muted    | #757575     | Paragraphs, categories,… |
| inverse-ink  | #FFFFFF     | Text on black bands      |
| inverse-ink… | #FFFFFF 80% | Band leads and skill la… |
| inverse-ink… | #FFFFFF 57% | Footer links (60% for c… |
| on-media     | #FFFFFF     |                          |
| primary      | #826F8D     | Filled buttons (Make A … |

## Typography

- display-hero: Story Script 170px / 400
- display-cta: Story Script 80px / 400
- display-section: Story Script 62px / 400
- headline-lg: Satoshi 62px / 700

{
  "$description": "Zoya design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#826F8D",
      "$description": "Filled buttons (Make A Call, Send Message), the newsletter submit, text-link colour and underline"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#ECECEC",
      "$description": "Filled button hover"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "on-primary-hover": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary-hover"
    },
    "secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "White button on black bands (1px white border)"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background, hero, overlay menu, cart"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#ECECEC",
      "$description": "The only light step: the primary button's hover fill"
    },
    "field": {
      "$type": "color",
      "$value": "#222222",

/* Zoya theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-headline-lg, rounded-button, p-lg */

@theme {
  /* Colors */
  --color-primary: #826F8D;
  --color-primary-hover: #ECECEC;
  --color-on-primary: #FFFFFF;
  --color-on-primary-hover: #000000;
  --color-secondary: #FFFFFF;
  --color-on-secondary: #000000;
  --color-canvas: #FFFFFF;
  --color-surface-1: #ECECEC;
  --color-field: #222222;
  --color-ink: #000000;
  --color-ink-muted: #757575;
  --color-line: #000000;
  --color-line-subtle: #E1E1E1;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-muted: #FFFFFFCC;
  --color-inverse-ink-subtle: #FFFFFF91;
  --color-inverse-line: #FFFFFF26;
  --color-on-media: #FFFFFF;
  --color-tag-blue: #4253FF;
  --color-tag-violet: #7122FA;
  --color-gradient-wine-from: #DA4453;
  --color-gradient-wine-to: #89216B;
  --color-gradient-indigo-from: #3F2B96;
  --color-gradient-indigo-to: #A8C0FF;
  --color-gradient-sunset-from: #FF8C00;
  --color-gradient-sunset-to: #FF0080;
  --color-gradient-mint-from: #11998E;
  --color-gradient-mint-to: #38EF7D;

  /* Fonts */
  --font-sans: "Satoshi", "Inter", sans-serif;
  --font-satoshi: "Satoshi", "Inter", sans-serif;
  --font-story-script: "Story Script", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 170px;
  --text-display-hero--line-height: 0.9;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 400;

/* Zoya design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #826F8D; /* Filled buttons (Make A Call, Send Message), the newsletter submit, text-link colour and underline */
  --color-primary-hover: #ECECEC; /* Filled button hover */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-on-primary-hover: #000000; /* Text on primary-hover */
  --color-secondary: #FFFFFF; /* White button on black bands (1px white border) */
  --color-on-secondary: #000000; /* Text on secondary */
  --color-canvas: #FFFFFF; /* Page background, hero, overlay menu, cart */
  --color-surface-1: #ECECEC; /* The only light step: the primary button's hover fill */
  --color-field: #222222; /* Contact-form inputs on the black band */
  --color-ink: #000000; /* Headlines, nav labels, the statement paragraph, blog titles */
  --color-ink-muted: #757575; /* Paragraphs, categories, job titles, the nav tagline, the cart count */
  --color-line: #000000; /* 1px header rules, menu dividers, the menu's left column border */
  --color-line-subtle: #E1E1E1; /* Divider under blog titles */
  --color-inverse-canvas: #000000; /* Half-bands, CTA band, footer, go-top button */
  --color-inverse-ink: #FFFFFF; /* Text on black bands */
  --color-inverse-ink-muted: #FFFFFFCC; /* Band leads and skill labels */
  --color-inverse-ink-subtle: #FFFFFF91; /* Footer links (60% for contact lines) */
  --color-inverse-line: #FFFFFF26; /* Bottom border of the CTA band */
  --color-on-media: #FFFFFF;
  --color-tag-blue: #4253FF; /* Blog category tags */
  --color-tag-violet: #7122FA; /* Blog category tags */
  --color-gradient-wine-from: #DA4453;
  --color-gradient-wine-to: #89216B;
  --color-gradient-indigo-from: #3F2B96;
  --color-gradient-indigo-to: #A8C0FF;
  --color-gradient-sunset-from: #FF8C00;
  --color-gradient-sunset-to: #FF0080;
  --color-gradient-mint-from: #11998E;
  --color-gradient-mint-to: #38EF7D;

  /* Fonts */
  --font-satoshi: "Satoshi", "Inter", sans-serif;
  --font-story-script: "Story Script", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 170px;
  --text-display-hero-font: var(--font-story-script);
  --text-display-hero-weight: 400;
  --text-display-hero-line-height: 0.9;
  --text-display-hero-tracking: 0px;
  --text-display-cta: 80px;

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

Agency design systems, the same colors first.

Browse all 398

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 Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Story Script · display-hero

Satoshi · headline-lg

Satoshi · title-lg

Satoshi · body-lg

Satoshi · eyebrow

Satoshi · label-button

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Zoya style

More design systems like this

Found

Agencē X

Agencix

Agencō

Bring any of them to your AI tool