From e8887aab13871b0d772923594e8b10c85be17c5d Mon Sep 17 00:00:00 2001 From: chaoxiaoche Date: Mon, 18 May 2026 15:42:48 +0800 Subject: [PATCH] feat(design-systems): add remaining style token fixtures (#2043) Co-authored-by: chaoxiaoche --- design-systems/artistic/components.html | 136 ++++++++++++++++++ design-systems/artistic/tokens.css | 63 ++++++++ design-systems/atelier-zero/components.html | 136 ++++++++++++++++++ design-systems/atelier-zero/tokens.css | 63 ++++++++ design-systems/bento/components.html | 136 ++++++++++++++++++ design-systems/bento/tokens.css | 63 ++++++++ design-systems/bold/components.html | 136 ++++++++++++++++++ design-systems/bold/tokens.css | 63 ++++++++ design-systems/cafe/components.html | 136 ++++++++++++++++++ design-systems/cafe/tokens.css | 63 ++++++++ design-systems/clay/components.html | 136 ++++++++++++++++++ design-systems/clay/tokens.css | 63 ++++++++ design-systems/claymorphism/components.html | 136 ++++++++++++++++++ design-systems/claymorphism/tokens.css | 63 ++++++++ design-systems/clean/components.html | 136 ++++++++++++++++++ design-systems/clean/tokens.css | 63 ++++++++ design-systems/colorful/components.html | 136 ++++++++++++++++++ design-systems/colorful/tokens.css | 63 ++++++++ design-systems/contemporary/components.html | 136 ++++++++++++++++++ design-systems/contemporary/tokens.css | 63 ++++++++ design-systems/corporate/components.html | 136 ++++++++++++++++++ design-systems/corporate/tokens.css | 63 ++++++++ design-systems/cosmic/components.html | 136 ++++++++++++++++++ design-systems/cosmic/tokens.css | 63 ++++++++ design-systems/creative/components.html | 136 ++++++++++++++++++ design-systems/creative/tokens.css | 63 ++++++++ design-systems/dithered/components.html | 136 ++++++++++++++++++ design-systems/dithered/tokens.css | 63 ++++++++ design-systems/doodle/components.html | 136 ++++++++++++++++++ design-systems/doodle/tokens.css | 63 ++++++++ design-systems/dramatic/components.html | 136 ++++++++++++++++++ design-systems/dramatic/tokens.css | 63 ++++++++ design-systems/elegant/components.html | 136 ++++++++++++++++++ design-systems/elegant/tokens.css | 63 ++++++++ design-systems/energetic/components.html | 136 ++++++++++++++++++ design-systems/energetic/tokens.css | 63 ++++++++ design-systems/expressive/components.html | 136 ++++++++++++++++++ design-systems/expressive/tokens.css | 63 ++++++++ design-systems/fantasy/components.html | 136 ++++++++++++++++++ design-systems/fantasy/tokens.css | 63 ++++++++ design-systems/flat/components.html | 136 ++++++++++++++++++ design-systems/flat/tokens.css | 63 ++++++++ design-systems/friendly/components.html | 136 ++++++++++++++++++ design-systems/friendly/tokens.css | 63 ++++++++ design-systems/futuristic/components.html | 136 ++++++++++++++++++ design-systems/futuristic/tokens.css | 63 ++++++++ design-systems/hud/components.html | 136 ++++++++++++++++++ design-systems/hud/tokens.css | 63 ++++++++ .../mission-control/components.html | 136 ++++++++++++++++++ design-systems/mission-control/tokens.css | 63 ++++++++ design-systems/mono/components.html | 136 ++++++++++++++++++ design-systems/mono/tokens.css | 63 ++++++++ design-systems/neobrutalism/components.html | 136 ++++++++++++++++++ design-systems/neobrutalism/tokens.css | 63 ++++++++ design-systems/neon/components.html | 136 ++++++++++++++++++ design-systems/neon/tokens.css | 63 ++++++++ design-systems/neumorphism/components.html | 136 ++++++++++++++++++ design-systems/neumorphism/tokens.css | 63 ++++++++ design-systems/paper/components.html | 136 ++++++++++++++++++ design-systems/paper/tokens.css | 63 ++++++++ design-systems/perspective/components.html | 136 ++++++++++++++++++ design-systems/perspective/tokens.css | 63 ++++++++ design-systems/professional/components.html | 136 ++++++++++++++++++ design-systems/professional/tokens.css | 63 ++++++++ design-systems/refined/components.html | 136 ++++++++++++++++++ design-systems/refined/tokens.css | 63 ++++++++ design-systems/retro/components.html | 136 ++++++++++++++++++ design-systems/retro/tokens.css | 63 ++++++++ design-systems/simple/components.html | 136 ++++++++++++++++++ design-systems/simple/tokens.css | 63 ++++++++ design-systems/skeumorphism/components.html | 136 ++++++++++++++++++ design-systems/skeumorphism/tokens.css | 63 ++++++++ design-systems/sleek/components.html | 136 ++++++++++++++++++ design-systems/sleek/tokens.css | 63 ++++++++ design-systems/spacious/components.html | 136 ++++++++++++++++++ design-systems/spacious/tokens.css | 63 ++++++++ design-systems/storytelling/components.html | 136 ++++++++++++++++++ design-systems/storytelling/tokens.css | 63 ++++++++ .../totality-festival/components.html | 136 ++++++++++++++++++ design-systems/totality-festival/tokens.css | 63 ++++++++ design-systems/urdu/components.html | 136 ++++++++++++++++++ design-systems/urdu/tokens.css | 63 ++++++++ design-systems/vibrant/components.html | 136 ++++++++++++++++++ design-systems/vibrant/tokens.css | 63 ++++++++ design-systems/vintage/components.html | 136 ++++++++++++++++++ design-systems/vintage/tokens.css | 63 ++++++++ design-systems/warm-editorial/components.html | 136 ++++++++++++++++++ design-systems/warm-editorial/tokens.css | 63 ++++++++ 88 files changed, 8756 insertions(+) create mode 100644 design-systems/artistic/components.html create mode 100644 design-systems/artistic/tokens.css create mode 100644 design-systems/atelier-zero/components.html create mode 100644 design-systems/atelier-zero/tokens.css create mode 100644 design-systems/bento/components.html create mode 100644 design-systems/bento/tokens.css create mode 100644 design-systems/bold/components.html create mode 100644 design-systems/bold/tokens.css create mode 100644 design-systems/cafe/components.html create mode 100644 design-systems/cafe/tokens.css create mode 100644 design-systems/clay/components.html create mode 100644 design-systems/clay/tokens.css create mode 100644 design-systems/claymorphism/components.html create mode 100644 design-systems/claymorphism/tokens.css create mode 100644 design-systems/clean/components.html create mode 100644 design-systems/clean/tokens.css create mode 100644 design-systems/colorful/components.html create mode 100644 design-systems/colorful/tokens.css create mode 100644 design-systems/contemporary/components.html create mode 100644 design-systems/contemporary/tokens.css create mode 100644 design-systems/corporate/components.html create mode 100644 design-systems/corporate/tokens.css create mode 100644 design-systems/cosmic/components.html create mode 100644 design-systems/cosmic/tokens.css create mode 100644 design-systems/creative/components.html create mode 100644 design-systems/creative/tokens.css create mode 100644 design-systems/dithered/components.html create mode 100644 design-systems/dithered/tokens.css create mode 100644 design-systems/doodle/components.html create mode 100644 design-systems/doodle/tokens.css create mode 100644 design-systems/dramatic/components.html create mode 100644 design-systems/dramatic/tokens.css create mode 100644 design-systems/elegant/components.html create mode 100644 design-systems/elegant/tokens.css create mode 100644 design-systems/energetic/components.html create mode 100644 design-systems/energetic/tokens.css create mode 100644 design-systems/expressive/components.html create mode 100644 design-systems/expressive/tokens.css create mode 100644 design-systems/fantasy/components.html create mode 100644 design-systems/fantasy/tokens.css create mode 100644 design-systems/flat/components.html create mode 100644 design-systems/flat/tokens.css create mode 100644 design-systems/friendly/components.html create mode 100644 design-systems/friendly/tokens.css create mode 100644 design-systems/futuristic/components.html create mode 100644 design-systems/futuristic/tokens.css create mode 100644 design-systems/hud/components.html create mode 100644 design-systems/hud/tokens.css create mode 100644 design-systems/mission-control/components.html create mode 100644 design-systems/mission-control/tokens.css create mode 100644 design-systems/mono/components.html create mode 100644 design-systems/mono/tokens.css create mode 100644 design-systems/neobrutalism/components.html create mode 100644 design-systems/neobrutalism/tokens.css create mode 100644 design-systems/neon/components.html create mode 100644 design-systems/neon/tokens.css create mode 100644 design-systems/neumorphism/components.html create mode 100644 design-systems/neumorphism/tokens.css create mode 100644 design-systems/paper/components.html create mode 100644 design-systems/paper/tokens.css create mode 100644 design-systems/perspective/components.html create mode 100644 design-systems/perspective/tokens.css create mode 100644 design-systems/professional/components.html create mode 100644 design-systems/professional/tokens.css create mode 100644 design-systems/refined/components.html create mode 100644 design-systems/refined/tokens.css create mode 100644 design-systems/retro/components.html create mode 100644 design-systems/retro/tokens.css create mode 100644 design-systems/simple/components.html create mode 100644 design-systems/simple/tokens.css create mode 100644 design-systems/skeumorphism/components.html create mode 100644 design-systems/skeumorphism/tokens.css create mode 100644 design-systems/sleek/components.html create mode 100644 design-systems/sleek/tokens.css create mode 100644 design-systems/spacious/components.html create mode 100644 design-systems/spacious/tokens.css create mode 100644 design-systems/storytelling/components.html create mode 100644 design-systems/storytelling/tokens.css create mode 100644 design-systems/totality-festival/components.html create mode 100644 design-systems/totality-festival/tokens.css create mode 100644 design-systems/urdu/components.html create mode 100644 design-systems/urdu/tokens.css create mode 100644 design-systems/vibrant/components.html create mode 100644 design-systems/vibrant/tokens.css create mode 100644 design-systems/vintage/components.html create mode 100644 design-systems/vintage/tokens.css create mode 100644 design-systems/warm-editorial/components.html create mode 100644 design-systems/warm-editorial/tokens.css diff --git a/design-systems/artistic/components.html b/design-systems/artistic/components.html new file mode 100644 index 000000000..94b89c8b9 --- /dev/null +++ b/design-systems/artistic/components.html @@ -0,0 +1,136 @@ + + + + + + Artistic - reference components + + + + +
+
+
+
+

Artistic design system

+

Studio composition system

+

Expressive portfolio surfaces, painterly rhythm, and gallery-forward component cards.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

artistic gallery language with warm paper, rich accent, and expressive composition.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/artistic/tokens.css b/design-systems/artistic/tokens.css new file mode 100644 index 000000000..70e52c59a --- /dev/null +++ b/design-systems/artistic/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/artistic/tokens.css + * Structured token bindings for Artistic. + * artistic gallery language with warm paper, rich accent, and expressive composition. + */ + +:root { + --bg: #fbf6ee; + --surface: #fffdf8; + --surface-warm: #f1e3cf; + --fg: #201914; + --fg-2: #4c4037; + --muted: #7a6d63; + --meta: #9b5b32; + --border: #ded2c3; + --border-soft: #eee4d7; + --accent: #9b5b32; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #4f8a4f; + --warn: #c9822f; + --danger: #b33a3a; + --font-display: Georgia, "Times New Roman", serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 17px; + --text-lg: 20px; + --text-xl: 28px; + --text-2xl: 42px; + --text-3xl: 64px; + --text-4xl: 88px; + --leading-body: 1.62; + --leading-tight: 1; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 112px; + --section-y-tablet: 80px; + --section-y-phone: 56px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 20px 52px rgba(32, 25, 20, 0.12); + --focus-ring: 0 0 0 4px rgba(155, 91, 50, 0.24); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/atelier-zero/components.html b/design-systems/atelier-zero/components.html new file mode 100644 index 000000000..7ce5298f6 --- /dev/null +++ b/design-systems/atelier-zero/components.html @@ -0,0 +1,136 @@ + + + + + + Atelier Zero - reference components + + + + +
+
+
+
+

Atelier Zero design system

+

Independent studio atelier

+

Minimal creative studio pages with quiet type, object cards, and restrained editorial space.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

independent studio identity with off-white canvas, sharp black type, and gallery restraint.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/atelier-zero/tokens.css b/design-systems/atelier-zero/tokens.css new file mode 100644 index 000000000..3ddf9b30a --- /dev/null +++ b/design-systems/atelier-zero/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/atelier-zero/tokens.css + * Structured token bindings for Atelier Zero. + * independent studio identity with off-white canvas, sharp black type, and gallery restraint. + */ + +:root { + --bg: #ffffff; + --surface: #f7f7f7; + --surface-warm: #eeeeee; + --fg: #111111; + --fg-2: #3a3a3a; + --muted: #707070; + --meta: #111111; + --border: #d9d9d9; + --border-soft: #eeeeee; + --accent: #111111; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #168a46; + --warn: #b7791f; + --danger: #c53030; + --font-display: "Helvetica Neue", Arial, sans-serif; + --font-body: "Helvetica Neue", Arial, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 16px 40px rgba(0, 0, 0, 0.10); + --focus-ring: 0 0 0 3px rgba(17, 17, 17, 0.18); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/bento/components.html b/design-systems/bento/components.html new file mode 100644 index 000000000..e411a3054 --- /dev/null +++ b/design-systems/bento/components.html @@ -0,0 +1,136 @@ + + + + + + Bento - reference components + + + + +
+
+
+
+

Bento design system

+

Modular bento grid

+

Compact product storytelling built from tidy tiles, nested panels, and friendly hierarchy.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

modular bento interface with friendly tiles, soft borders, and balanced product density.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/bento/tokens.css b/design-systems/bento/tokens.css new file mode 100644 index 000000000..7e1a8297a --- /dev/null +++ b/design-systems/bento/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/bento/tokens.css + * Structured token bindings for Bento. + * modular bento interface with friendly tiles, soft borders, and balanced product density. + */ + +:root { + --bg: #f5f8ff; + --surface: #ffffff; + --surface-warm: #eaf1ff; + --fg: #101828; + --fg-2: #344054; + --muted: #667085; + --meta: #2563eb; + --border: #d7e0ef; + --border-soft: #edf2f8; + --accent: #2563eb; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #16a34a; + --warn: #f59e0b; + --danger: #ef4444; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 20px 52px rgba(16, 24, 40, 0.11); + --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/bold/components.html b/design-systems/bold/components.html new file mode 100644 index 000000000..b1616dbbe --- /dev/null +++ b/design-systems/bold/components.html @@ -0,0 +1,136 @@ + + + + + + Bold - reference components + + + + +
+
+
+
+

Bold design system

+

High-contrast campaign system

+

Large type, confident blocks, and direct action patterns for punchy visual systems.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

bold campaign language with hard contrast, oversized type, and assertive actions.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/bold/tokens.css b/design-systems/bold/tokens.css new file mode 100644 index 000000000..44204c228 --- /dev/null +++ b/design-systems/bold/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/bold/tokens.css + * Structured token bindings for Bold. + * bold campaign language with hard contrast, oversized type, and assertive actions. + */ + +:root { + --bg: #ffffff; + --surface: #f7f7f7; + --surface-warm: #eeeeee; + --fg: #111111; + --fg-2: #3a3a3a; + --muted: #707070; + --meta: #111111; + --border: #d9d9d9; + --border-soft: #eeeeee; + --accent: #111111; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #168a46; + --warn: #b7791f; + --danger: #c53030; + --font-display: Arial Black, Impact, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 16px 40px rgba(0, 0, 0, 0.10); + --focus-ring: 0 0 0 3px rgba(17, 17, 17, 0.18); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/cafe/components.html b/design-systems/cafe/components.html new file mode 100644 index 000000000..0fa5f181b --- /dev/null +++ b/design-systems/cafe/components.html @@ -0,0 +1,136 @@ + + + + + + Cafe - reference components + + + + +
+
+
+
+

Cafe design system

+

Hospitality menu board

+

Warm cafe commerce, menu cards, reservation controls, and cozy editorial atmosphere.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

cafe hospitality system with warm cream, espresso text, and inviting menu surfaces.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/cafe/tokens.css b/design-systems/cafe/tokens.css new file mode 100644 index 000000000..3c3108aab --- /dev/null +++ b/design-systems/cafe/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/cafe/tokens.css + * Structured token bindings for Cafe. + * cafe hospitality system with warm cream, espresso text, and inviting menu surfaces. + */ + +:root { + --bg: #fbf6ee; + --surface: #fffdf8; + --surface-warm: #f1e3cf; + --fg: #201914; + --fg-2: #4c4037; + --muted: #7a6d63; + --meta: #9b5b32; + --border: #ded2c3; + --border-soft: #eee4d7; + --accent: #9b5b32; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #4f8a4f; + --warn: #c9822f; + --danger: #b33a3a; + --font-display: Georgia, "Times New Roman", serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 17px; + --text-lg: 20px; + --text-xl: 28px; + --text-2xl: 42px; + --text-3xl: 64px; + --text-4xl: 88px; + --leading-body: 1.62; + --leading-tight: 1; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 112px; + --section-y-tablet: 80px; + --section-y-phone: 56px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 20px 52px rgba(32, 25, 20, 0.12); + --focus-ring: 0 0 0 4px rgba(155, 91, 50, 0.24); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/clay/components.html b/design-systems/clay/components.html new file mode 100644 index 000000000..2439d15e4 --- /dev/null +++ b/design-systems/clay/components.html @@ -0,0 +1,136 @@ + + + + + + Clay - reference components + + + + +
+
+
+
+

Clay design system

+

Soft molded interface

+

Tactile clay surfaces, raised controls, and warm product cards for playful tools.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

soft clay interface with molded surfaces, warm shadows, and approachable controls.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/clay/tokens.css b/design-systems/clay/tokens.css new file mode 100644 index 000000000..c686d4e52 --- /dev/null +++ b/design-systems/clay/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/clay/tokens.css + * Structured token bindings for Clay. + * soft clay interface with molded surfaces, warm shadows, and approachable controls. + */ + +:root { + --bg: #f7eee6; + --surface: #fff8f1; + --surface-warm: #ead6c7; + --fg: #2b211c; + --fg-2: #5a4b43; + --muted: #8a7a70; + --meta: #b46a46; + --border: #dac8b9; + --border-soft: #eaded4; + --accent: #b46a46; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #4d8f5a; + --warn: #c88735; + --danger: #b84c4c; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 14px; + --radius-md: 22px; + --radius-lg: 34px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 8px 10px 24px rgba(128, 92, 70, 0.18), -8px -8px 20px rgba(255, 255, 255, 0.70); + --focus-ring: 0 0 0 4px rgba(180, 106, 70, 0.24); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/claymorphism/components.html b/design-systems/claymorphism/components.html new file mode 100644 index 000000000..bd9403252 --- /dev/null +++ b/design-systems/claymorphism/components.html @@ -0,0 +1,136 @@ + + + + + + Claymorphism - reference components + + + + +
+
+
+
+

Claymorphism design system

+

Molded depth system

+

Rounded 3D-like cards, soft inset controls, and tactile pastel surfaces.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

claymorphism visual language with rounded molded panels and soft relief.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/claymorphism/tokens.css b/design-systems/claymorphism/tokens.css new file mode 100644 index 000000000..cca29172a --- /dev/null +++ b/design-systems/claymorphism/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/claymorphism/tokens.css + * Structured token bindings for Claymorphism. + * claymorphism visual language with rounded molded panels and soft relief. + */ + +:root { + --bg: #f7eee6; + --surface: #fff8f1; + --surface-warm: #ead6c7; + --fg: #2b211c; + --fg-2: #5a4b43; + --muted: #8a7a70; + --meta: #b46a46; + --border: #dac8b9; + --border-soft: #eaded4; + --accent: #b46a46; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #4d8f5a; + --warn: #c88735; + --danger: #b84c4c; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 14px; + --radius-md: 22px; + --radius-lg: 34px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 8px 10px 24px rgba(128, 92, 70, 0.18), -8px -8px 20px rgba(255, 255, 255, 0.70); + --focus-ring: 0 0 0 4px rgba(180, 106, 70, 0.24); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/clean/components.html b/design-systems/clean/components.html new file mode 100644 index 000000000..ab2c74f3e --- /dev/null +++ b/design-systems/clean/components.html @@ -0,0 +1,136 @@ + + + + + + Clean - reference components + + + + +
+
+
+
+

Clean design system

+

Clarity-first product surface

+

Quiet neutral components, crisp hierarchy, and low-noise application patterns.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

clean product system with white surfaces, subtle borders, and focused hierarchy.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/clean/tokens.css b/design-systems/clean/tokens.css new file mode 100644 index 000000000..7aa8f3b93 --- /dev/null +++ b/design-systems/clean/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/clean/tokens.css + * Structured token bindings for Clean. + * clean product system with white surfaces, subtle borders, and focused hierarchy. + */ + +:root { + --bg: #ffffff; + --surface: #f7f7f7; + --surface-warm: #eeeeee; + --fg: #111111; + --fg-2: #3a3a3a; + --muted: #707070; + --meta: #111111; + --border: #d9d9d9; + --border-soft: #eeeeee; + --accent: #111111; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #168a46; + --warn: #b7791f; + --danger: #c53030; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 16px 40px rgba(0, 0, 0, 0.10); + --focus-ring: 0 0 0 3px rgba(17, 17, 17, 0.18); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/colorful/components.html b/design-systems/colorful/components.html new file mode 100644 index 000000000..ce615776c --- /dev/null +++ b/design-systems/colorful/components.html @@ -0,0 +1,136 @@ + + + + + + Colorful - reference components + + + + +
+
+
+
+

Colorful design system

+

Vibrant launch kit

+

High-energy cards, bright accent states, and playful marketing sections.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

colorful product language with warm bright canvas and saturated action color.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/colorful/tokens.css b/design-systems/colorful/tokens.css new file mode 100644 index 000000000..1c7b20d9e --- /dev/null +++ b/design-systems/colorful/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/colorful/tokens.css + * Structured token bindings for Colorful. + * colorful product language with warm bright canvas and saturated action color. + */ + +:root { + --bg: #fff8d7; + --surface: #ffffff; + --surface-warm: #ffef9f; + --fg: #1d1836; + --fg-2: #4c426c; + --muted: #796f91; + --meta: #ff6b00; + --border: #eadfba; + --border-soft: #f5eccd; + --accent: #ff6b00; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #2e9d57; + --warn: #ffb020; + --danger: #e5484d; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 18px 44px rgba(29, 24, 54, 0.14); + --focus-ring: 0 0 0 4px rgba(255, 107, 0, 0.26); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/contemporary/components.html b/design-systems/contemporary/components.html new file mode 100644 index 000000000..387ca9ac6 --- /dev/null +++ b/design-systems/contemporary/components.html @@ -0,0 +1,136 @@ + + + + + + Contemporary - reference components + + + + +
+
+
+
+

Contemporary design system

+

Contemporary product editorial

+

Current SaaS layout rhythm, polished type, and calm accent-driven components.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

contemporary product system with polished neutrals, soft panels, and measured accent color.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/contemporary/tokens.css b/design-systems/contemporary/tokens.css new file mode 100644 index 000000000..77f0612c3 --- /dev/null +++ b/design-systems/contemporary/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/contemporary/tokens.css + * Structured token bindings for Contemporary. + * contemporary product system with polished neutrals, soft panels, and measured accent color. + */ + +:root { + --bg: #f5f8ff; + --surface: #ffffff; + --surface-warm: #eaf1ff; + --fg: #101828; + --fg-2: #344054; + --muted: #667085; + --meta: #2563eb; + --border: #d7e0ef; + --border-soft: #edf2f8; + --accent: #2563eb; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #16a34a; + --warn: #f59e0b; + --danger: #ef4444; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 20px 52px rgba(16, 24, 40, 0.11); + --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/corporate/components.html b/design-systems/corporate/components.html new file mode 100644 index 000000000..90508f096 --- /dev/null +++ b/design-systems/corporate/components.html @@ -0,0 +1,136 @@ + + + + + + Corporate - reference components + + + + +
+
+
+
+

Corporate design system

+

Corporate communications system

+

Formal pages, trust modules, annual-report rhythm, and restrained executive surfaces.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

corporate communication language with conservative blue, white panels, and trust-first hierarchy.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/corporate/tokens.css b/design-systems/corporate/tokens.css new file mode 100644 index 000000000..d3a7c401a --- /dev/null +++ b/design-systems/corporate/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/corporate/tokens.css + * Structured token bindings for Corporate. + * corporate communication language with conservative blue, white panels, and trust-first hierarchy. + */ + +:root { + --bg: #f5f8ff; + --surface: #ffffff; + --surface-warm: #eaf1ff; + --fg: #101828; + --fg-2: #344054; + --muted: #667085; + --meta: #2563eb; + --border: #d7e0ef; + --border-soft: #edf2f8; + --accent: #2563eb; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #16a34a; + --warn: #f59e0b; + --danger: #ef4444; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 20px 52px rgba(16, 24, 40, 0.11); + --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/cosmic/components.html b/design-systems/cosmic/components.html new file mode 100644 index 000000000..091aae943 --- /dev/null +++ b/design-systems/cosmic/components.html @@ -0,0 +1,136 @@ + + + + + + Cosmic - reference components + + + + +
+
+
+
+

Cosmic design system

+

Cosmic exploration interface

+

Space-like depth, luminous signals, and immersive cards for speculative experiences.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

cosmic dark interface with star-field depth, luminous violet-blue accents, and spacious modules.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/cosmic/tokens.css b/design-systems/cosmic/tokens.css new file mode 100644 index 000000000..86666b4e8 --- /dev/null +++ b/design-systems/cosmic/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/cosmic/tokens.css + * Structured token bindings for Cosmic. + * cosmic dark interface with star-field depth, luminous violet-blue accents, and spacious modules. + */ + +:root { + --bg: #070711; + --surface: #111126; + --surface-warm: #1e1540; + --fg: #f8f7ff; + --fg-2: #d6ccff; + --muted: #9d8ad4; + --meta: #c084fc; + --border: #34265e; + --border-soft: #241c42; + --accent: #c084fc; + --accent-on: #13051f; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #39ff88; + --warn: #fff34d; + --danger: #ff4d8d; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 24px 80px rgba(192, 132, 252, 0.22); + --focus-ring: 0 0 0 4px rgba(192, 132, 252, 0.32); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/creative/components.html b/design-systems/creative/components.html new file mode 100644 index 000000000..2dd5c146a --- /dev/null +++ b/design-systems/creative/components.html @@ -0,0 +1,136 @@ + + + + + + Creative - reference components + + + + +
+
+
+
+

Creative design system

+

Creative campaign workspace

+

Flexible cards, expressive accents, and friendly controls for concept-led work.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

creative workspace language with warm bright panels, rounded controls, and energetic accent states.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/creative/tokens.css b/design-systems/creative/tokens.css new file mode 100644 index 000000000..5abbab476 --- /dev/null +++ b/design-systems/creative/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/creative/tokens.css + * Structured token bindings for Creative. + * creative workspace language with warm bright panels, rounded controls, and energetic accent states. + */ + +:root { + --bg: #fff8d7; + --surface: #ffffff; + --surface-warm: #ffef9f; + --fg: #1d1836; + --fg-2: #4c426c; + --muted: #796f91; + --meta: #ff6b00; + --border: #eadfba; + --border-soft: #f5eccd; + --accent: #ff6b00; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #2e9d57; + --warn: #ffb020; + --danger: #e5484d; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 18px 44px rgba(29, 24, 54, 0.14); + --focus-ring: 0 0 0 4px rgba(255, 107, 0, 0.26); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/dithered/components.html b/design-systems/dithered/components.html new file mode 100644 index 000000000..9f4cabb37 --- /dev/null +++ b/design-systems/dithered/components.html @@ -0,0 +1,136 @@ + + + + + + Dithered - reference components + + + + +
+
+
+
+

Dithered design system

+

Dithered bitmap interface

+

Retro-computing texture, monochrome contrast, and pixel-inspired control surfaces.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

dithered retro interface with hard edges, bitmap texture, and compact monochrome controls.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/dithered/tokens.css b/design-systems/dithered/tokens.css new file mode 100644 index 000000000..05b4bcbaf --- /dev/null +++ b/design-systems/dithered/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/dithered/tokens.css + * Structured token bindings for Dithered. + * dithered retro interface with hard edges, bitmap texture, and compact monochrome controls. + */ + +:root { + --bg: #fff4cf; + --surface: #fffaf0; + --surface-warm: #ffdca8; + --fg: #2a1810; + --fg-2: #593625; + --muted: #8a6652; + --meta: #d24b1f; + --border: #d9aa7a; + --border-soft: #efd0ab; + --accent: #d24b1f; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #3d8f4f; + --warn: #f2a93b; + --danger: #b83a2f; + --font-display: "Courier New", ui-monospace, monospace; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "Courier New", ui-monospace, monospace; + --text-xs: 11px; + --text-sm: 12px; + --text-base: 14px; + --text-lg: 16px; + --text-xl: 20px; + --text-2xl: 28px; + --text-3xl: 40px; + --text-4xl: 56px; + --leading-body: 1.45; + --leading-tight: 1.06; + --tracking-display: 0; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 80px; + --section-y-tablet: 60px; + --section-y-phone: 42px; + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 6px 6px 0 rgba(42, 24, 16, 0.26); + --focus-ring: 0 0 0 4px rgba(210, 75, 31, 0.28); + --motion-fast: 100ms; + --motion-base: 180ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1280px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/doodle/components.html b/design-systems/doodle/components.html new file mode 100644 index 000000000..62d6e94ac --- /dev/null +++ b/design-systems/doodle/components.html @@ -0,0 +1,136 @@ + + + + + + Doodle - reference components + + + + +
+
+
+
+

Doodle design system

+

Sketchbook product system

+

Hand-drawn energy, rounded notes, and playful cards for lightweight ideation.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

doodle visual language with sketchbook warmth, soft cards, and informal orange accents.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/doodle/tokens.css b/design-systems/doodle/tokens.css new file mode 100644 index 000000000..93e1a8758 --- /dev/null +++ b/design-systems/doodle/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/doodle/tokens.css + * Structured token bindings for Doodle. + * doodle visual language with sketchbook warmth, soft cards, and informal orange accents. + */ + +:root { + --bg: #fff8d7; + --surface: #ffffff; + --surface-warm: #ffef9f; + --fg: #1d1836; + --fg-2: #4c426c; + --muted: #796f91; + --meta: #ff6b00; + --border: #eadfba; + --border-soft: #f5eccd; + --accent: #ff6b00; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #2e9d57; + --warn: #ffb020; + --danger: #e5484d; + --font-display: "Comic Sans MS", "Trebuchet MS", sans-serif; + --font-body: "Comic Sans MS", "Trebuchet MS", sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 18px 44px rgba(29, 24, 54, 0.14); + --focus-ring: 0 0 0 4px rgba(255, 107, 0, 0.26); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/dramatic/components.html b/design-systems/dramatic/components.html new file mode 100644 index 000000000..0ca55c70e --- /dev/null +++ b/design-systems/dramatic/components.html @@ -0,0 +1,136 @@ + + + + + + Dramatic - reference components + + + + +
+
+
+
+

Dramatic design system

+

Cinematic landing system

+

Dark immersive panels, high contrast, and theatrical content reveals.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

dramatic cinematic interface with dark surfaces, strong contrast, and spotlight accent states.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/dramatic/tokens.css b/design-systems/dramatic/tokens.css new file mode 100644 index 000000000..2f09288f2 --- /dev/null +++ b/design-systems/dramatic/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/dramatic/tokens.css + * Structured token bindings for Dramatic. + * dramatic cinematic interface with dark surfaces, strong contrast, and spotlight accent states. + */ + +:root { + --bg: #090b12; + --surface: #121722; + --surface-warm: #1b2233; + --fg: #f8fafc; + --fg-2: #cbd5e1; + --muted: #94a3b8; + --meta: #60a5fa; + --border: #2a3447; + --border-soft: #1d2636; + --accent: #60a5fa; + --accent-on: #06101d; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #22c55e; + --warn: #fbbf24; + --danger: #fb7185; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 24px 72px rgba(0, 0, 0, 0.42); + --focus-ring: 0 0 0 4px rgba(96, 165, 250, 0.28); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/elegant/components.html b/design-systems/elegant/components.html new file mode 100644 index 000000000..c9e3cf336 --- /dev/null +++ b/design-systems/elegant/components.html @@ -0,0 +1,136 @@ + + + + + + Elegant - reference components + + + + +
+
+
+
+

Elegant design system

+

Elegant editorial commerce

+

Refined typography, soft luxury neutrals, and graceful product presentation.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

elegant interface language with warm neutrals, serif display type, and quiet premium controls.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/elegant/tokens.css b/design-systems/elegant/tokens.css new file mode 100644 index 000000000..c3e1b64f2 --- /dev/null +++ b/design-systems/elegant/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/elegant/tokens.css + * Structured token bindings for Elegant. + * elegant interface language with warm neutrals, serif display type, and quiet premium controls. + */ + +:root { + --bg: #fbf6ee; + --surface: #fffdf8; + --surface-warm: #f1e3cf; + --fg: #201914; + --fg-2: #4c4037; + --muted: #7a6d63; + --meta: #9b5b32; + --border: #ded2c3; + --border-soft: #eee4d7; + --accent: #9b5b32; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #4f8a4f; + --warn: #c9822f; + --danger: #b33a3a; + --font-display: Georgia, "Times New Roman", serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 17px; + --text-lg: 20px; + --text-xl: 28px; + --text-2xl: 42px; + --text-3xl: 64px; + --text-4xl: 88px; + --leading-body: 1.62; + --leading-tight: 1; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 112px; + --section-y-tablet: 80px; + --section-y-phone: 56px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 20px 52px rgba(32, 25, 20, 0.12); + --focus-ring: 0 0 0 4px rgba(155, 91, 50, 0.24); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/energetic/components.html b/design-systems/energetic/components.html new file mode 100644 index 000000000..52c5b1742 --- /dev/null +++ b/design-systems/energetic/components.html @@ -0,0 +1,136 @@ + + + + + + Energetic - reference components + + + + +
+
+
+
+

Energetic design system

+

Momentum launch system

+

Fast marketing sections, bright actions, and confident product-card rhythm.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

energetic product system with saturated action, tight motion, and lively card structure.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/energetic/tokens.css b/design-systems/energetic/tokens.css new file mode 100644 index 000000000..e903bbb3f --- /dev/null +++ b/design-systems/energetic/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/energetic/tokens.css + * Structured token bindings for Energetic. + * energetic product system with saturated action, tight motion, and lively card structure. + */ + +:root { + --bg: #fff8d7; + --surface: #ffffff; + --surface-warm: #ffef9f; + --fg: #1d1836; + --fg-2: #4c426c; + --muted: #796f91; + --meta: #ff6b00; + --border: #eadfba; + --border-soft: #f5eccd; + --accent: #ff6b00; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #2e9d57; + --warn: #ffb020; + --danger: #e5484d; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 18px 44px rgba(29, 24, 54, 0.14); + --focus-ring: 0 0 0 4px rgba(255, 107, 0, 0.26); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/expressive/components.html b/design-systems/expressive/components.html new file mode 100644 index 000000000..e9156d9a9 --- /dev/null +++ b/design-systems/expressive/components.html @@ -0,0 +1,136 @@ + + + + + + Expressive - reference components + + + + +
+
+
+
+

Expressive design system

+

Expressive storytelling kit

+

Large display type, colorful emphasis, and flexible campaign components.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

expressive design language with vibrant accents, roomy sections, and characterful cards.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/expressive/tokens.css b/design-systems/expressive/tokens.css new file mode 100644 index 000000000..16b4a3865 --- /dev/null +++ b/design-systems/expressive/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/expressive/tokens.css + * Structured token bindings for Expressive. + * expressive design language with vibrant accents, roomy sections, and characterful cards. + */ + +:root { + --bg: #fbf8ff; + --surface: #ffffff; + --surface-warm: #efe8ff; + --fg: #1f1730; + --fg-2: #4d425f; + --muted: #776b88; + --meta: #7c3aed; + --border: #ded4ee; + --border-soft: #efe8f7; + --accent: #7c3aed; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #16a34a; + --warn: #f59e0b; + --danger: #ef4444; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 22px 58px rgba(87, 49, 139, 0.13); + --focus-ring: 0 0 0 4px rgba(124, 58, 237, 0.24); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/fantasy/components.html b/design-systems/fantasy/components.html new file mode 100644 index 000000000..fbe636bd1 --- /dev/null +++ b/design-systems/fantasy/components.html @@ -0,0 +1,136 @@ + + + + + + Fantasy - reference components + + + + +
+
+
+
+

Fantasy design system

+

Fantasy world interface

+

Ornamental surfaces, glowing status, and storybook-inspired product modules.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

fantasy interface with deep mystical surfaces, luminous accents, and ornate card rhythm.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/fantasy/tokens.css b/design-systems/fantasy/tokens.css new file mode 100644 index 000000000..741dc1c69 --- /dev/null +++ b/design-systems/fantasy/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/fantasy/tokens.css + * Structured token bindings for Fantasy. + * fantasy interface with deep mystical surfaces, luminous accents, and ornate card rhythm. + */ + +:root { + --bg: #070711; + --surface: #111126; + --surface-warm: #1e1540; + --fg: #f8f7ff; + --fg-2: #d6ccff; + --muted: #9d8ad4; + --meta: #c084fc; + --border: #34265e; + --border-soft: #241c42; + --accent: #c084fc; + --accent-on: #13051f; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #39ff88; + --warn: #fff34d; + --danger: #ff4d8d; + --font-display: Georgia, "Times New Roman", serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 24px 80px rgba(192, 132, 252, 0.22); + --focus-ring: 0 0 0 4px rgba(192, 132, 252, 0.32); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/flat/components.html b/design-systems/flat/components.html new file mode 100644 index 000000000..7bcbc5c0b --- /dev/null +++ b/design-systems/flat/components.html @@ -0,0 +1,136 @@ + + + + + + Flat - reference components + + + + +
+
+
+
+

Flat design system

+

Flat UI system

+

No-shadow panels, clear color blocks, and simple direct interaction states.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

flat interface system with crisp colors, no depth effects, and direct component hierarchy.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/flat/tokens.css b/design-systems/flat/tokens.css new file mode 100644 index 000000000..bac151519 --- /dev/null +++ b/design-systems/flat/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/flat/tokens.css + * Structured token bindings for Flat. + * flat interface system with crisp colors, no depth effects, and direct component hierarchy. + */ + +:root { + --bg: #f5f8ff; + --surface: #ffffff; + --surface-warm: #eaf1ff; + --fg: #101828; + --fg-2: #344054; + --muted: #667085; + --meta: #2563eb; + --border: #d7e0ef; + --border-soft: #edf2f8; + --accent: #2563eb; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #16a34a; + --warn: #f59e0b; + --danger: #ef4444; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 20px 52px rgba(16, 24, 40, 0.11); + --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/friendly/components.html b/design-systems/friendly/components.html new file mode 100644 index 000000000..a7709c38c --- /dev/null +++ b/design-systems/friendly/components.html @@ -0,0 +1,136 @@ + + + + + + Friendly - reference components + + + + +
+
+
+
+

Friendly design system

+

Friendly onboarding system

+

Soft cards, welcoming language, and rounded controls for approachable products.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

friendly product surface with warm colors, rounded controls, and low-pressure hierarchy.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/friendly/tokens.css b/design-systems/friendly/tokens.css new file mode 100644 index 000000000..d458a7a64 --- /dev/null +++ b/design-systems/friendly/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/friendly/tokens.css + * Structured token bindings for Friendly. + * friendly product surface with warm colors, rounded controls, and low-pressure hierarchy. + */ + +:root { + --bg: #fff8d7; + --surface: #ffffff; + --surface-warm: #ffef9f; + --fg: #1d1836; + --fg-2: #4c426c; + --muted: #796f91; + --meta: #ff6b00; + --border: #eadfba; + --border-soft: #f5eccd; + --accent: #ff6b00; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #2e9d57; + --warn: #ffb020; + --danger: #e5484d; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 18px 44px rgba(29, 24, 54, 0.14); + --focus-ring: 0 0 0 4px rgba(255, 107, 0, 0.26); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/futuristic/components.html b/design-systems/futuristic/components.html new file mode 100644 index 000000000..e1bf5c6eb --- /dev/null +++ b/design-systems/futuristic/components.html @@ -0,0 +1,136 @@ + + + + + + Futuristic - reference components + + + + +
+
+
+
+

Futuristic design system

+

Future systems console

+

Sharp dark panels, cyan signals, and high-tech component structure.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

futuristic interface with dark panels, cyan accent, compact data, and advanced product cues.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/futuristic/tokens.css b/design-systems/futuristic/tokens.css new file mode 100644 index 000000000..0b29ba145 --- /dev/null +++ b/design-systems/futuristic/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/futuristic/tokens.css + * Structured token bindings for Futuristic. + * futuristic interface with dark panels, cyan accent, compact data, and advanced product cues. + */ + +:root { + --bg: #090b12; + --surface: #121722; + --surface-warm: #1b2233; + --fg: #f8fafc; + --fg-2: #cbd5e1; + --muted: #94a3b8; + --meta: #60a5fa; + --border: #2a3447; + --border-soft: #1d2636; + --accent: #60a5fa; + --accent-on: #06101d; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #22c55e; + --warn: #fbbf24; + --danger: #fb7185; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 24px 72px rgba(0, 0, 0, 0.42); + --focus-ring: 0 0 0 4px rgba(96, 165, 250, 0.28); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/hud/components.html b/design-systems/hud/components.html new file mode 100644 index 000000000..6eea5502c --- /dev/null +++ b/design-systems/hud/components.html @@ -0,0 +1,136 @@ + + + + + + HUD - reference components + + + + +
+
+
+
+

HUD design system

+

Heads-up display overlay

+

Transparent tactical panels, scanning metrics, and high-contrast status overlays.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

HUD interface language with dark transparent panels, cyan telemetry, and compact status readouts.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/hud/tokens.css b/design-systems/hud/tokens.css new file mode 100644 index 000000000..e400f2894 --- /dev/null +++ b/design-systems/hud/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/hud/tokens.css + * Structured token bindings for HUD. + * HUD interface language with dark transparent panels, cyan telemetry, and compact status readouts. + */ + +:root { + --bg: #090b12; + --surface: #121722; + --surface-warm: #1b2233; + --fg: #f8fafc; + --fg-2: #cbd5e1; + --muted: #94a3b8; + --meta: #60a5fa; + --border: #2a3447; + --border-soft: #1d2636; + --accent: #60a5fa; + --accent-on: #06101d; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #22c55e; + --warn: #fbbf24; + --danger: #fb7185; + --font-display: "IBM Plex Mono", ui-monospace, monospace; + --font-body: "IBM Plex Mono", ui-monospace, monospace; + --font-mono: "IBM Plex Mono", ui-monospace, monospace; + --text-xs: 11px; + --text-sm: 12px; + --text-base: 14px; + --text-lg: 16px; + --text-xl: 20px; + --text-2xl: 28px; + --text-3xl: 40px; + --text-4xl: 56px; + --leading-body: 1.45; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 80px; + --section-y-tablet: 60px; + --section-y-phone: 42px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 24px 72px rgba(0, 0, 0, 0.42); + --focus-ring: 0 0 0 4px rgba(96, 165, 250, 0.28); + --motion-fast: 100ms; + --motion-base: 180ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1280px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/mission-control/components.html b/design-systems/mission-control/components.html new file mode 100644 index 000000000..0f3bc1afd --- /dev/null +++ b/design-systems/mission-control/components.html @@ -0,0 +1,136 @@ + + + + + + Mission Control - reference components + + + + +
+
+
+
+

Mission Control design system

+

Mission operations room

+

Command surfaces, status boards, and operational telemetry for complex systems.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

mission control interface with dark command panels, status color, and dense operational modules.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/mission-control/tokens.css b/design-systems/mission-control/tokens.css new file mode 100644 index 000000000..faafcb92b --- /dev/null +++ b/design-systems/mission-control/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/mission-control/tokens.css + * Structured token bindings for Mission Control. + * mission control interface with dark command panels, status color, and dense operational modules. + */ + +:root { + --bg: #090b12; + --surface: #121722; + --surface-warm: #1b2233; + --fg: #f8fafc; + --fg-2: #cbd5e1; + --muted: #94a3b8; + --meta: #60a5fa; + --border: #2a3447; + --border-soft: #1d2636; + --accent: #60a5fa; + --accent-on: #06101d; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #22c55e; + --warn: #fbbf24; + --danger: #fb7185; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 11px; + --text-sm: 12px; + --text-base: 14px; + --text-lg: 16px; + --text-xl: 20px; + --text-2xl: 28px; + --text-3xl: 40px; + --text-4xl: 56px; + --leading-body: 1.45; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 80px; + --section-y-tablet: 60px; + --section-y-phone: 42px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 24px 72px rgba(0, 0, 0, 0.42); + --focus-ring: 0 0 0 4px rgba(96, 165, 250, 0.28); + --motion-fast: 100ms; + --motion-base: 180ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1280px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/mono/components.html b/design-systems/mono/components.html new file mode 100644 index 000000000..11058eb4b --- /dev/null +++ b/design-systems/mono/components.html @@ -0,0 +1,136 @@ + + + + + + Mono - reference components + + + + +
+
+
+
+

Mono design system

+

Monochrome product system

+

Pure black-and-white structure, disciplined spacing, and typographic restraint.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

monochrome interface with black ink, white surfaces, and severe component discipline.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/mono/tokens.css b/design-systems/mono/tokens.css new file mode 100644 index 000000000..ab4c31e6a --- /dev/null +++ b/design-systems/mono/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/mono/tokens.css + * Structured token bindings for Mono. + * monochrome interface with black ink, white surfaces, and severe component discipline. + */ + +:root { + --bg: #ffffff; + --surface: #f7f7f7; + --surface-warm: #eeeeee; + --fg: #111111; + --fg-2: #3a3a3a; + --muted: #707070; + --meta: #111111; + --border: #d9d9d9; + --border-soft: #eeeeee; + --accent: #111111; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #168a46; + --warn: #b7791f; + --danger: #c53030; + --font-display: "IBM Plex Mono", ui-monospace, monospace; + --font-body: "IBM Plex Mono", ui-monospace, monospace; + --font-mono: "IBM Plex Mono", ui-monospace, monospace; + --text-xs: 11px; + --text-sm: 12px; + --text-base: 14px; + --text-lg: 16px; + --text-xl: 20px; + --text-2xl: 28px; + --text-3xl: 40px; + --text-4xl: 56px; + --leading-body: 1.45; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 80px; + --section-y-tablet: 60px; + --section-y-phone: 42px; + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 16px 40px rgba(0, 0, 0, 0.10); + --focus-ring: 0 0 0 3px rgba(17, 17, 17, 0.18); + --motion-fast: 100ms; + --motion-base: 180ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1280px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/neobrutalism/components.html b/design-systems/neobrutalism/components.html new file mode 100644 index 000000000..af42ccc50 --- /dev/null +++ b/design-systems/neobrutalism/components.html @@ -0,0 +1,136 @@ + + + + + + Neobrutalism - reference components + + + + +
+
+
+
+

Neobrutalism design system

+

Neo-brutalist board

+

Offset shadows, thick lines, loud cards, and deliberately raw UI controls.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

neo-brutalist design language with hard borders, offset shadows, and loud yellow emphasis.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/neobrutalism/tokens.css b/design-systems/neobrutalism/tokens.css new file mode 100644 index 000000000..16249c5ec --- /dev/null +++ b/design-systems/neobrutalism/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/neobrutalism/tokens.css + * Structured token bindings for Neobrutalism. + * neo-brutalist design language with hard borders, offset shadows, and loud yellow emphasis. + */ + +:root { + --bg: #fff4cf; + --surface: #fffaf0; + --surface-warm: #ffdca8; + --fg: #2a1810; + --fg-2: #593625; + --muted: #8a6652; + --meta: #d24b1f; + --border: #d9aa7a; + --border-soft: #efd0ab; + --accent: #d24b1f; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #3d8f4f; + --warn: #f2a93b; + --danger: #b83a2f; + --font-display: Arial Black, Impact, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: 0; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 6px 6px 0 rgba(42, 24, 16, 0.26); + --focus-ring: 0 0 0 4px rgba(210, 75, 31, 0.28); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/neon/components.html b/design-systems/neon/components.html new file mode 100644 index 000000000..e0d51b131 --- /dev/null +++ b/design-systems/neon/components.html @@ -0,0 +1,136 @@ + + + + + + Neon - reference components + + + + +
+
+
+
+

Neon design system

+

Neon nightlife interface

+

Dark club-like surfaces, bright glows, and saturated interactive states.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

neon visual language with dark backgrounds, glowing accents, and high-energy controls.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/neon/tokens.css b/design-systems/neon/tokens.css new file mode 100644 index 000000000..4e3dff8ac --- /dev/null +++ b/design-systems/neon/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/neon/tokens.css + * Structured token bindings for Neon. + * neon visual language with dark backgrounds, glowing accents, and high-energy controls. + */ + +:root { + --bg: #070711; + --surface: #111126; + --surface-warm: #1e1540; + --fg: #f8f7ff; + --fg-2: #d6ccff; + --muted: #9d8ad4; + --meta: #c084fc; + --border: #34265e; + --border-soft: #241c42; + --accent: #c084fc; + --accent-on: #13051f; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #39ff88; + --warn: #fff34d; + --danger: #ff4d8d; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 24px 80px rgba(192, 132, 252, 0.22); + --focus-ring: 0 0 0 4px rgba(192, 132, 252, 0.32); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/neumorphism/components.html b/design-systems/neumorphism/components.html new file mode 100644 index 000000000..6e3c2e01d --- /dev/null +++ b/design-systems/neumorphism/components.html @@ -0,0 +1,136 @@ + + + + + + Neumorphism - reference components + + + + +
+
+
+
+

Neumorphism design system

+

Soft embossed interface

+

Subtle extruded controls, tonal surfaces, and low-contrast tactile depth.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

neumorphic interface with tonal surfaces, soft raised controls, and quiet embossed depth.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/neumorphism/tokens.css b/design-systems/neumorphism/tokens.css new file mode 100644 index 000000000..95fdcf61a --- /dev/null +++ b/design-systems/neumorphism/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/neumorphism/tokens.css + * Structured token bindings for Neumorphism. + * neumorphic interface with tonal surfaces, soft raised controls, and quiet embossed depth. + */ + +:root { + --bg: #f7eee6; + --surface: #fff8f1; + --surface-warm: #ead6c7; + --fg: #2b211c; + --fg-2: #5a4b43; + --muted: #8a7a70; + --meta: #b46a46; + --border: #dac8b9; + --border-soft: #eaded4; + --accent: #b46a46; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #4d8f5a; + --warn: #c88735; + --danger: #b84c4c; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 14px; + --radius-md: 22px; + --radius-lg: 34px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 8px 10px 24px rgba(128, 92, 70, 0.18), -8px -8px 20px rgba(255, 255, 255, 0.70); + --focus-ring: 0 0 0 4px rgba(180, 106, 70, 0.24); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/paper/components.html b/design-systems/paper/components.html new file mode 100644 index 000000000..65f65cafb --- /dev/null +++ b/design-systems/paper/components.html @@ -0,0 +1,136 @@ + + + + + + Paper - reference components + + + + +
+
+
+
+

Paper design system

+

Paper document system

+

Paper-like panels, document cards, and low-glare editorial reading surfaces.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

paper design language with warm document surfaces, soft texture, and readable hierarchy.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/paper/tokens.css b/design-systems/paper/tokens.css new file mode 100644 index 000000000..9cb96c34c --- /dev/null +++ b/design-systems/paper/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/paper/tokens.css + * Structured token bindings for Paper. + * paper design language with warm document surfaces, soft texture, and readable hierarchy. + */ + +:root { + --bg: #faf3df; + --surface: #fffaf0; + --surface-warm: #efe0bd; + --fg: #211b12; + --fg-2: #504737; + --muted: #7c7160; + --meta: #8f5d24; + --border: #ddd0b4; + --border-soft: #eee3cd; + --accent: #8f5d24; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #5b8d42; + --warn: #c27b22; + --danger: #a64036; + --font-display: Georgia, "Times New Roman", serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 17px; + --text-lg: 20px; + --text-xl: 28px; + --text-2xl: 42px; + --text-3xl: 64px; + --text-4xl: 88px; + --leading-body: 1.62; + --leading-tight: 1; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 112px; + --section-y-tablet: 80px; + --section-y-phone: 56px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 18px 42px rgba(33, 27, 18, 0.12); + --focus-ring: 0 0 0 4px rgba(143, 93, 36, 0.24); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/perspective/components.html b/design-systems/perspective/components.html new file mode 100644 index 000000000..299325f8b --- /dev/null +++ b/design-systems/perspective/components.html @@ -0,0 +1,136 @@ + + + + + + Perspective - reference components + + + + +
+
+
+
+

Perspective design system

+

Perspective showcase system

+

Layered panels, depth cues, and angled product presentation cards.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

perspective visual system with layered depth, cool surfaces, and dimensional product cards.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/perspective/tokens.css b/design-systems/perspective/tokens.css new file mode 100644 index 000000000..995efaab8 --- /dev/null +++ b/design-systems/perspective/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/perspective/tokens.css + * Structured token bindings for Perspective. + * perspective visual system with layered depth, cool surfaces, and dimensional product cards. + */ + +:root { + --bg: #f5f8ff; + --surface: #ffffff; + --surface-warm: #eaf1ff; + --fg: #101828; + --fg-2: #344054; + --muted: #667085; + --meta: #2563eb; + --border: #d7e0ef; + --border-soft: #edf2f8; + --accent: #2563eb; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #16a34a; + --warn: #f59e0b; + --danger: #ef4444; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 20px 52px rgba(16, 24, 40, 0.11); + --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/professional/components.html b/design-systems/professional/components.html new file mode 100644 index 000000000..70b90b207 --- /dev/null +++ b/design-systems/professional/components.html @@ -0,0 +1,136 @@ + + + + + + Professional - reference components + + + + +
+
+
+
+

Professional design system

+

Professional services kit

+

Trustworthy layouts, conservative controls, and polished business hierarchy.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

professional services interface with restrained blue, crisp cards, and business-first structure.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/professional/tokens.css b/design-systems/professional/tokens.css new file mode 100644 index 000000000..2c18f7d21 --- /dev/null +++ b/design-systems/professional/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/professional/tokens.css + * Structured token bindings for Professional. + * professional services interface with restrained blue, crisp cards, and business-first structure. + */ + +:root { + --bg: #f5f8ff; + --surface: #ffffff; + --surface-warm: #eaf1ff; + --fg: #101828; + --fg-2: #344054; + --muted: #667085; + --meta: #2563eb; + --border: #d7e0ef; + --border-soft: #edf2f8; + --accent: #2563eb; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #16a34a; + --warn: #f59e0b; + --danger: #ef4444; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 20px 52px rgba(16, 24, 40, 0.11); + --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/refined/components.html b/design-systems/refined/components.html new file mode 100644 index 000000000..392acb916 --- /dev/null +++ b/design-systems/refined/components.html @@ -0,0 +1,136 @@ + + + + + + Refined - reference components + + + + +
+
+
+
+

Refined design system

+

Refined brand system

+

Subtle premium details, quiet contrast, and elegant product-card composition.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

refined interface language with warm neutrals, restrained accent, and composed spacing.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/refined/tokens.css b/design-systems/refined/tokens.css new file mode 100644 index 000000000..90c485043 --- /dev/null +++ b/design-systems/refined/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/refined/tokens.css + * Structured token bindings for Refined. + * refined interface language with warm neutrals, restrained accent, and composed spacing. + */ + +:root { + --bg: #fbf6ee; + --surface: #fffdf8; + --surface-warm: #f1e3cf; + --fg: #201914; + --fg-2: #4c4037; + --muted: #7a6d63; + --meta: #9b5b32; + --border: #ded2c3; + --border-soft: #eee4d7; + --accent: #9b5b32; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #4f8a4f; + --warn: #c9822f; + --danger: #b33a3a; + --font-display: Georgia, "Times New Roman", serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 17px; + --text-lg: 20px; + --text-xl: 28px; + --text-2xl: 42px; + --text-3xl: 64px; + --text-4xl: 88px; + --leading-body: 1.62; + --leading-tight: 1; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 112px; + --section-y-tablet: 80px; + --section-y-phone: 56px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 20px 52px rgba(32, 25, 20, 0.12); + --focus-ring: 0 0 0 4px rgba(155, 91, 50, 0.24); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/retro/components.html b/design-systems/retro/components.html new file mode 100644 index 000000000..7d2cca08c --- /dev/null +++ b/design-systems/retro/components.html @@ -0,0 +1,136 @@ + + + + + + Retro - reference components + + + + +
+
+
+
+

Retro design system

+

Retro computing dashboard

+

Vintage color, chunky geometry, and nostalgic controls for playful products.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

retro interface with warm colors, chunky controls, and nostalgic product cards.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/retro/tokens.css b/design-systems/retro/tokens.css new file mode 100644 index 000000000..173617dd7 --- /dev/null +++ b/design-systems/retro/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/retro/tokens.css + * Structured token bindings for Retro. + * retro interface with warm colors, chunky controls, and nostalgic product cards. + */ + +:root { + --bg: #fff4cf; + --surface: #fffaf0; + --surface-warm: #ffdca8; + --fg: #2a1810; + --fg-2: #593625; + --muted: #8a6652; + --meta: #d24b1f; + --border: #d9aa7a; + --border-soft: #efd0ab; + --accent: #d24b1f; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #3d8f4f; + --warn: #f2a93b; + --danger: #b83a2f; + --font-display: "Courier New", ui-monospace, monospace; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "Courier New", ui-monospace, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: 0; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 6px 6px 0 rgba(42, 24, 16, 0.26); + --focus-ring: 0 0 0 4px rgba(210, 75, 31, 0.28); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/simple/components.html b/design-systems/simple/components.html new file mode 100644 index 000000000..0e88b192f --- /dev/null +++ b/design-systems/simple/components.html @@ -0,0 +1,136 @@ + + + + + + Simple - reference components + + + + +
+
+
+
+

Simple design system

+

Simple app foundation

+

Straightforward surfaces, accessible controls, and clean reusable component defaults.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

simple application system with neutral surfaces, clear action color, and dependable layout primitives.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/simple/tokens.css b/design-systems/simple/tokens.css new file mode 100644 index 000000000..1db0c37f2 --- /dev/null +++ b/design-systems/simple/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/simple/tokens.css + * Structured token bindings for Simple. + * simple application system with neutral surfaces, clear action color, and dependable layout primitives. + */ + +:root { + --bg: #f5f8ff; + --surface: #ffffff; + --surface-warm: #eaf1ff; + --fg: #101828; + --fg-2: #344054; + --muted: #667085; + --meta: #2563eb; + --border: #d7e0ef; + --border-soft: #edf2f8; + --accent: #2563eb; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #16a34a; + --warn: #f59e0b; + --danger: #ef4444; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 20px 52px rgba(16, 24, 40, 0.11); + --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/skeumorphism/components.html b/design-systems/skeumorphism/components.html new file mode 100644 index 000000000..bb9397f15 --- /dev/null +++ b/design-systems/skeumorphism/components.html @@ -0,0 +1,136 @@ + + + + + + Skeuomorphism - reference components + + + + +
+
+
+
+

Skeuomorphism design system

+

Skeuomorphic control panel

+

Physical metaphors, soft bevels, and tactile card controls.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

skeuomorphic interface with tactile surfaces, beveled cards, and warm analog depth.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/skeumorphism/tokens.css b/design-systems/skeumorphism/tokens.css new file mode 100644 index 000000000..aaff509c0 --- /dev/null +++ b/design-systems/skeumorphism/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/skeumorphism/tokens.css + * Structured token bindings for Skeuomorphism. + * skeuomorphic interface with tactile surfaces, beveled cards, and warm analog depth. + */ + +:root { + --bg: #f7eee6; + --surface: #fff8f1; + --surface-warm: #ead6c7; + --fg: #2b211c; + --fg-2: #5a4b43; + --muted: #8a7a70; + --meta: #b46a46; + --border: #dac8b9; + --border-soft: #eaded4; + --accent: #b46a46; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #4d8f5a; + --warn: #c88735; + --danger: #b84c4c; + --font-display: Georgia, "Times New Roman", serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 14px; + --radius-md: 22px; + --radius-lg: 34px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 8px 10px 24px rgba(128, 92, 70, 0.18), -8px -8px 20px rgba(255, 255, 255, 0.70); + --focus-ring: 0 0 0 4px rgba(180, 106, 70, 0.24); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/sleek/components.html b/design-systems/sleek/components.html new file mode 100644 index 000000000..0ec7acb75 --- /dev/null +++ b/design-systems/sleek/components.html @@ -0,0 +1,136 @@ + + + + + + Sleek - reference components + + + + +
+
+
+
+

Sleek design system

+

Sleek product launch

+

Polished dark-light contrast, slim controls, and modern premium rhythm.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

sleek product language with polished panels, sharp typography, and confident blue accent.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/sleek/tokens.css b/design-systems/sleek/tokens.css new file mode 100644 index 000000000..0294f9eb2 --- /dev/null +++ b/design-systems/sleek/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/sleek/tokens.css + * Structured token bindings for Sleek. + * sleek product language with polished panels, sharp typography, and confident blue accent. + */ + +:root { + --bg: #090b12; + --surface: #121722; + --surface-warm: #1b2233; + --fg: #f8fafc; + --fg-2: #cbd5e1; + --muted: #94a3b8; + --meta: #60a5fa; + --border: #2a3447; + --border-soft: #1d2636; + --accent: #60a5fa; + --accent-on: #06101d; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #22c55e; + --warn: #fbbf24; + --danger: #fb7185; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 24px 72px rgba(0, 0, 0, 0.42); + --focus-ring: 0 0 0 4px rgba(96, 165, 250, 0.28); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/spacious/components.html b/design-systems/spacious/components.html new file mode 100644 index 000000000..df0b75e3d --- /dev/null +++ b/design-systems/spacious/components.html @@ -0,0 +1,136 @@ + + + + + + Spacious - reference components + + + + +
+
+
+
+

Spacious design system

+

Spacious editorial system

+

Large whitespace, airy cards, and slow premium reading rhythm.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

spacious interface with airy sections, soft surfaces, and generous layout rhythm.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/spacious/tokens.css b/design-systems/spacious/tokens.css new file mode 100644 index 000000000..4e31ba8ba --- /dev/null +++ b/design-systems/spacious/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/spacious/tokens.css + * Structured token bindings for Spacious. + * spacious interface with airy sections, soft surfaces, and generous layout rhythm. + */ + +:root { + --bg: #faf3df; + --surface: #fffaf0; + --surface-warm: #efe0bd; + --fg: #211b12; + --fg-2: #504737; + --muted: #7c7160; + --meta: #8f5d24; + --border: #ddd0b4; + --border-soft: #eee3cd; + --accent: #8f5d24; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #5b8d42; + --warn: #c27b22; + --danger: #a64036; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 17px; + --text-lg: 20px; + --text-xl: 28px; + --text-2xl: 42px; + --text-3xl: 64px; + --text-4xl: 88px; + --leading-body: 1.62; + --leading-tight: 1; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 112px; + --section-y-tablet: 80px; + --section-y-phone: 56px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 18px 42px rgba(33, 27, 18, 0.12); + --focus-ring: 0 0 0 4px rgba(143, 93, 36, 0.24); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/storytelling/components.html b/design-systems/storytelling/components.html new file mode 100644 index 000000000..d06205d6f --- /dev/null +++ b/design-systems/storytelling/components.html @@ -0,0 +1,136 @@ + + + + + + Storytelling - reference components + + + + +
+
+
+
+

Storytelling design system

+

Narrative product story

+

Chaptered sections, narrative cards, and warm long-form product rhythm.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

storytelling design language with warm paper, narrative modules, and editorial pacing.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/storytelling/tokens.css b/design-systems/storytelling/tokens.css new file mode 100644 index 000000000..791c4dc6c --- /dev/null +++ b/design-systems/storytelling/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/storytelling/tokens.css + * Structured token bindings for Storytelling. + * storytelling design language with warm paper, narrative modules, and editorial pacing. + */ + +:root { + --bg: #fbf6ee; + --surface: #fffdf8; + --surface-warm: #f1e3cf; + --fg: #201914; + --fg-2: #4c4037; + --muted: #7a6d63; + --meta: #9b5b32; + --border: #ded2c3; + --border-soft: #eee4d7; + --accent: #9b5b32; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #4f8a4f; + --warn: #c9822f; + --danger: #b33a3a; + --font-display: Georgia, "Times New Roman", serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 17px; + --text-lg: 20px; + --text-xl: 28px; + --text-2xl: 42px; + --text-3xl: 64px; + --text-4xl: 88px; + --leading-body: 1.62; + --leading-tight: 1; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 112px; + --section-y-tablet: 80px; + --section-y-phone: 56px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 20px 52px rgba(32, 25, 20, 0.12); + --focus-ring: 0 0 0 4px rgba(155, 91, 50, 0.24); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/totality-festival/components.html b/design-systems/totality-festival/components.html new file mode 100644 index 000000000..c5ea6d540 --- /dev/null +++ b/design-systems/totality-festival/components.html @@ -0,0 +1,136 @@ + + + + + + Totality Festival - reference components + + + + +
+
+
+
+

Totality Festival design system

+

Festival experience guide

+

Event programming, celestial dark sections, and energetic schedule cards.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

festival identity with cosmic dark surfaces, warm highlights, and event-program cards.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/totality-festival/tokens.css b/design-systems/totality-festival/tokens.css new file mode 100644 index 000000000..b34b1ea74 --- /dev/null +++ b/design-systems/totality-festival/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/totality-festival/tokens.css + * Structured token bindings for Totality Festival. + * festival identity with cosmic dark surfaces, warm highlights, and event-program cards. + */ + +:root { + --bg: #070711; + --surface: #111126; + --surface-warm: #1e1540; + --fg: #f8f7ff; + --fg-2: #d6ccff; + --muted: #9d8ad4; + --meta: #c084fc; + --border: #34265e; + --border-soft: #241c42; + --accent: #c084fc; + --accent-on: #13051f; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #39ff88; + --warn: #fff34d; + --danger: #ff4d8d; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 24px 80px rgba(192, 132, 252, 0.22); + --focus-ring: 0 0 0 4px rgba(192, 132, 252, 0.32); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/urdu/components.html b/design-systems/urdu/components.html new file mode 100644 index 000000000..33cf04073 --- /dev/null +++ b/design-systems/urdu/components.html @@ -0,0 +1,136 @@ + + + + + + Urdu - reference components + + + + +
+
+
+
+

Urdu design system

+

Urdu editorial interface

+

Right-to-left publishing inspiration, calligraphic warmth, and readable content panels.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

Urdu editorial language with green cultural accent, warm paper, and composed reading surfaces.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/urdu/tokens.css b/design-systems/urdu/tokens.css new file mode 100644 index 000000000..a73ee77e3 --- /dev/null +++ b/design-systems/urdu/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/urdu/tokens.css + * Structured token bindings for Urdu. + * Urdu editorial language with green cultural accent, warm paper, and composed reading surfaces. + */ + +:root { + --bg: #f3faf4; + --surface: #ffffff; + --surface-warm: #e5f5e7; + --fg: #15261a; + --fg-2: #38513e; + --muted: #6b7d70; + --meta: #1f8f46; + --border: #d4e3d7; + --border-soft: #edf3ee; + --accent: #1f8f46; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #16a34a; + --warn: #d97706; + --danger: #dc2626; + --font-display: Georgia, "Times New Roman", serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 20px 48px rgba(21, 38, 26, 0.10); + --focus-ring: 0 0 0 4px rgba(31, 143, 70, 0.24); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/vibrant/components.html b/design-systems/vibrant/components.html new file mode 100644 index 000000000..fe5cdf90f --- /dev/null +++ b/design-systems/vibrant/components.html @@ -0,0 +1,136 @@ + + + + + + Vibrant - reference components + + + + +
+
+
+
+

Vibrant design system

+

Vibrant brand launch

+

Saturated sections, expressive controls, and colorful high-energy component states.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

vibrant visual system with saturated accents, warm surfaces, and optimistic product energy.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/vibrant/tokens.css b/design-systems/vibrant/tokens.css new file mode 100644 index 000000000..78d6763e0 --- /dev/null +++ b/design-systems/vibrant/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/vibrant/tokens.css + * Structured token bindings for Vibrant. + * vibrant visual system with saturated accents, warm surfaces, and optimistic product energy. + */ + +:root { + --bg: #fff8d7; + --surface: #ffffff; + --surface-warm: #ffef9f; + --fg: #1d1836; + --fg-2: #4c426c; + --muted: #796f91; + --meta: #ff6b00; + --border: #eadfba; + --border-soft: #f5eccd; + --accent: #ff6b00; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #2e9d57; + --warn: #ffb020; + --danger: #e5484d; + --font-display: Inter, system-ui, sans-serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 36px; + --text-3xl: 54px; + --text-4xl: 76px; + --leading-body: 1.52; + --leading-tight: 1.06; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 96px; + --section-y-tablet: 68px; + --section-y-phone: 48px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 18px 44px rgba(29, 24, 54, 0.14); + --focus-ring: 0 0 0 4px rgba(255, 107, 0, 0.26); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/vintage/components.html b/design-systems/vintage/components.html new file mode 100644 index 000000000..74979fec5 --- /dev/null +++ b/design-systems/vintage/components.html @@ -0,0 +1,136 @@ + + + + + + Vintage - reference components + + + + +
+
+
+
+

Vintage design system

+

Vintage archive system

+

Aged-paper surfaces, classic typography, and nostalgic product cards.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

vintage interface with aged paper, muted ink, and heritage-inspired controls.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/vintage/tokens.css b/design-systems/vintage/tokens.css new file mode 100644 index 000000000..ae40dbf36 --- /dev/null +++ b/design-systems/vintage/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/vintage/tokens.css + * Structured token bindings for Vintage. + * vintage interface with aged paper, muted ink, and heritage-inspired controls. + */ + +:root { + --bg: #faf3df; + --surface: #fffaf0; + --surface-warm: #efe0bd; + --fg: #211b12; + --fg-2: #504737; + --muted: #7c7160; + --meta: #8f5d24; + --border: #ddd0b4; + --border-soft: #eee3cd; + --accent: #8f5d24; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #5b8d42; + --warn: #c27b22; + --danger: #a64036; + --font-display: Georgia, "Times New Roman", serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 17px; + --text-lg: 20px; + --text-xl: 28px; + --text-2xl: 42px; + --text-3xl: 64px; + --text-4xl: 88px; + --leading-body: 1.62; + --leading-tight: 1; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 112px; + --section-y-tablet: 80px; + --section-y-phone: 56px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 18px 42px rgba(33, 27, 18, 0.12); + --focus-ring: 0 0 0 4px rgba(143, 93, 36, 0.24); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/warm-editorial/components.html b/design-systems/warm-editorial/components.html new file mode 100644 index 000000000..6f043258b --- /dev/null +++ b/design-systems/warm-editorial/components.html @@ -0,0 +1,136 @@ + + + + + + Warm Editorial - reference components + + + + +
+
+
+
+

Warm Editorial design system

+

Warm editorial publication

+

Soft magazine pages, warm ink, and generous long-form reading components.

+
Primary actionSecondary action
+
+
+

Live module

Reference component

online
+
98%Signal quality
24Active flows
3.2sResponse time
+

Palette

warm editorial system with cream canvas, serif display, and calm publication rhythm.

Control

Focus, hover, and status states share the same system signal.

+
+
+
+

Typography

Display rhythm

Headlines use the display stack with the declared scale and leading.

Surface

Layer system

Cards, warm panels, borders, and raised states resolve through shared tokens.

Interaction

Motion states

Buttons, inputs, and panels use system-specific focus rings and easing.

+
+ + diff --git a/design-systems/warm-editorial/tokens.css b/design-systems/warm-editorial/tokens.css new file mode 100644 index 000000000..aeded8754 --- /dev/null +++ b/design-systems/warm-editorial/tokens.css @@ -0,0 +1,63 @@ +/* design-systems/warm-editorial/tokens.css + * Structured token bindings for Warm Editorial. + * warm editorial system with cream canvas, serif display, and calm publication rhythm. + */ + +:root { + --bg: #fbf6ee; + --surface: #fffdf8; + --surface-warm: #f1e3cf; + --fg: #201914; + --fg-2: #4c4037; + --muted: #7a6d63; + --meta: #9b5b32; + --border: #ded2c3; + --border-soft: #eee4d7; + --accent: #9b5b32; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + --success: #4f8a4f; + --warn: #c9822f; + --danger: #b33a3a; + --font-display: Georgia, "Times New Roman", serif; + --font-body: Inter, system-ui, sans-serif; + --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --text-xs: 12px; + --text-sm: 14px; + --text-base: 17px; + --text-lg: 20px; + --text-xl: 28px; + --text-2xl: 42px; + --text-3xl: 64px; + --text-4xl: 88px; + --leading-body: 1.62; + --leading-tight: 1; + --tracking-display: -0.025em; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --section-y-desktop: 112px; + --section-y-tablet: 80px; + --section-y-phone: 56px; + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-pill: 9999px; + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 20px 52px rgba(32, 25, 20, 0.12); + --focus-ring: 0 0 0 4px rgba(155, 91, 50, 0.24); + --motion-fast: 150ms; + --motion-base: 240ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --container-max: 1180px; + --container-gutter-desktop: 36px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +}