SBK Design System Specification¶
Parameterized design system with selectable variants for SBK Consulting
Generated: January 2026 Framework: Design System Specification Builder v2.0 Status: Active Selection Required
Design System Overview¶
This document provides eight distinct design variants for SBK Consulting. Each variant is fully parameterized with tokens, components, and motion specifications. Select one as the active theme or use as a starting point for customization.
For parameterized token system and AI skill configuration, see generative-prompts/readme.md.
Variant Summary¶
| Variant | Style | Best For | Trust Signal |
|---|---|---|---|
| Variant A: Trusted Advisor | Clean, minimal, blue-anchored | Primary recommendation | Authority + Reliability |
| Variant B: Modern Partner | Warm neutral, teal accent | Non-profit focus | Approachable + Expert |
| Variant C: Bold Challenger | High-contrast, charcoal-led | Differentiation focus | Confident + Direct |
| Variant D: Cyber Shield | Deep navy, electric blue accents | Security services | Protective + Vigilant |
| Variant E: Sentinel Guard | Dark purple-gray, magenta accents | AI/Autonomous security | Intelligent + Futuristic |
| Variant F: Clean Developer | White, purple accent | Technical documentation | Precise + Developer-friendly |
| Variant G: Creative Clay | Warm cream, coral accents | Marketing campaigns | Approachable + Memorable |
| Variant H: Blueprint Technical | Dark background, orange accents | Engineering/Technical | Precise + CAD-style |
Variant A: Trusted Advisor¶
Clean authority with deep blue anchoring—classic trust signals optimized for professional services.
Design Philosophy¶
philosophy:
principle: "Clarity builds trust"
aesthetic: "Swiss International meets Professional Services"
contrast: "Soft, readable, accessible"
animation: "Subtle, purposeful, never distracting"
typography: "Modern geometric sans-serif"
Color Tokens¶
[VARIANT_A_COLORS]
# Semantic Names → Hex Values
# Primary: Deep Trust Blue
primary:
50: "#eff6ff"
100: "#dbeafe"
200: "#bfdbfe"
300: "#93c5fd"
400: "#60a5fa"
500: "#3b82f6" # Primary action
600: "#2563eb" # Primary hover
700: "#1d4ed8"
800: "#1e40af"
900: "#1e3a8a"
950: "#172554" # Deep anchor
# Secondary: Professional Navy
secondary:
50: "#f8fafc"
100: "#f1f5f9"
200: "#e2e8f0"
300: "#cbd5e1"
400: "#94a3b8"
500: "#64748b"
600: "#475569"
700: "#334155"
800: "#1e293b"
900: "#0f172a"
950: "#020617"
# Accent: Success Green (results-focused)
accent:
500: "#10b981"
600: "#059669"
# Backgrounds
background:
primary: "#ffffff"
secondary: "#f8fafc"
tertiary: "#f1f5f9"
inverse: "#0f172a"
# Foreground
foreground:
primary: "#0f172a"
secondary: "#475569"
muted: "#64748b"
inverse: "#f8fafc"
# Borders
border:
default: "#e2e8f0"
subtle: "#f1f5f9"
strong: "#cbd5e1"
focus: "#3b82f6"
# Status
status:
success: "#10b981"
warning: "#f59e0b"
error: "#ef4444"
info: "#3b82f6"
Typography Tokens¶
[VARIANT_A_TYPOGRAPHY]
# Font Stack
fonts:
sans: "'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
display: "'Inter', 'SF Pro Display', sans-serif"
mono: "'JetBrains Mono', 'SF Mono', 'Consolas', monospace"
# Type Scale (Major Third: 1.25)
scale:
xs: "0.75rem" # 12px - Labels, captions
sm: "0.875rem" # 14px - Small text
base: "1rem" # 16px - Body text
lg: "1.125rem" # 18px - Large body
xl: "1.25rem" # 20px - H5
2xl: "1.5rem" # 24px - H4
3xl: "1.875rem" # 30px - H3
4xl: "2.25rem" # 36px - H2
5xl: "3rem" # 48px - H1
6xl: "3.75rem" # 60px - Display
# Font Weights
weight:
normal: 400
medium: 500
semibold: 600
bold: 700
# Line Heights
leading:
none: 1
tight: 1.25
snug: 1.375
normal: 1.5
relaxed: 1.625
loose: 2
# Letter Spacing
tracking:
tighter: "-0.05em"
tight: "-0.025em"
normal: "0"
wide: "0.025em"
wider: "0.05em"
Spacing Scale¶
[VARIANT_A_SPACING]
scale:
0: "0"
px: "1px"
0.5: "0.125rem" # 2px
1: "0.25rem" # 4px
1.5: "0.375rem" # 6px
2: "0.5rem" # 8px
2.5: "0.625rem" # 10px
3: "0.75rem" # 12px
3.5: "0.875rem" # 14px
4: "1rem" # 16px
5: "1.25rem" # 20px
6: "1.5rem" # 24px
7: "1.75rem" # 28px
8: "2rem" # 32px
9: "2.25rem" # 36px
10: "2.5rem" # 40px
11: "2.75rem" # 44px
12: "3rem" # 48px
14: "3.5rem" # 56px
16: "4rem" # 64px
20: "5rem" # 80px
24: "6rem" # 96px
28: "7rem" # 112px
32: "8rem" # 128px
# Section Spacing
section:
sm: "4rem" # 64px - Compact sections
md: "6rem" # 96px - Standard sections
lg: "8rem" # 128px - Feature sections
xl: "10rem" # 160px - Hero sections
Border & Shadow Tokens¶
[VARIANT_A_GEOMETRY]
# Border Radius
radius:
none: "0"
sm: "0.25rem" # 4px - Buttons, inputs
md: "0.375rem" # 6px - Cards
lg: "0.5rem" # 8px - Containers
xl: "0.75rem" # 12px - Large cards
2xl: "1rem" # 16px - Modals
full: "9999px" # Pill shapes
# Shadows (Subtle, professional)
shadow:
xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
# Borders
border:
width:
thin: "1px"
medium: "1.5px"
thick: "2px"
Motion Tokens¶
[VARIANT_A_MOTION]
# Duration (Quick, professional)
duration:
instant: "0ms"
fast: "150ms" # Micro-interactions
normal: "250ms" # Standard transitions
slow: "400ms" # Important reveals
slower: "600ms" # Page transitions
# Easing
easing:
default: "cubic-bezier(0.4, 0, 0.2, 1)"
in: "cubic-bezier(0.4, 0, 1, 1)"
out: "cubic-bezier(0, 0, 0.2, 1)"
in-out: "cubic-bezier(0.4, 0, 0.2, 1)"
bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)"
# Animation Presets
animations:
fade-in:
from: { opacity: 0 }
to: { opacity: 1 }
duration: "normal"
easing: "out"
slide-up:
from: { opacity: 0, transform: "translateY(16px)" }
to: { opacity: 1, transform: "translateY(0)" }
duration: "normal"
easing: "out"
scale-in:
from: { opacity: 0, transform: "scale(0.95)" }
to: { opacity: 1, transform: "scale(1)" }
duration: "fast"
easing: "out"
Component Variants¶
[VARIANT_A_COMPONENTS]
button:
primary:
bg: "primary-600"
text: "white"
hover: "primary-700"
radius: "md"
shadow: "sm"
secondary:
bg: "secondary-100"
text: "secondary-900"
hover: "secondary-200"
radius: "md"
border: "secondary-200"
card:
default:
bg: "background-primary"
border: "border-default"
radius: "lg"
shadow: "sm"
padding: "6"
elevated:
bg: "background-primary"
border: "none"
radius: "xl"
shadow: "lg"
padding: "8"
input:
default:
bg: "background-primary"
border: "border-default"
focus: "primary-500"
radius: "md"
padding: "3 4"
hero:
style: "split-media"
bg: "gradient(180deg, background-secondary, background-primary)"
headline: "5xl semibold tracking-tight"
subhead: "lg normal text-secondary"
Variant B: Modern Partner¶
Warm neutrals with teal accents—approachable expertise for mission-driven organizations.
Design Philosophy¶
philosophy:
principle: "Warmth enables partnership"
aesthetic: "Humanist Modern meets Mission-Driven"
contrast: "Warm, inviting, accessible"
animation: "Gentle, welcoming, organic"
typography: "Humanist sans-serif with warmth"
Color Tokens¶
[VARIANT_B_COLORS]
# Primary: Partnership Teal
primary:
50: "#f0fdfa"
100: "#ccfbf1"
200: "#99f6e4"
300: "#5eead4"
400: "#2dd4bf"
500: "#14b8a6" # Primary action
600: "#0d9488" # Primary hover
700: "#0f766e"
800: "#115e59"
900: "#134e4a"
950: "#042f2e"
# Secondary: Warm Stone
secondary:
50: "#fafaf9"
100: "#f5f5f4"
200: "#e7e5e4"
300: "#d6d3d1"
400: "#a8a29e"
500: "#78716c"
600: "#57534e"
700: "#44403c"
800: "#292524"
900: "#1c1917"
950: "#0c0a09"
# Accent: Warm Amber (action-focused)
accent:
500: "#f59e0b"
600: "#d97706"
# Backgrounds (Warm undertones)
background:
primary: "#fffbf5" # Warm white
secondary: "#faf5ef"
tertiary: "#f5efe6"
inverse: "#1c1917"
# Foreground
foreground:
primary: "#1c1917"
secondary: "#57534e"
muted: "#78716c"
inverse: "#fafaf9"
# Borders
border:
default: "#e7e5e4"
subtle: "#f5f5f4"
strong: "#d6d3d1"
focus: "#14b8a6"
# Status
status:
success: "#10b981"
warning: "#f59e0b"
error: "#ef4444"
info: "#0d9488"
Typography Tokens¶
[VARIANT_B_TYPOGRAPHY]
# Font Stack (Humanist, warmer)
fonts:
sans: "'Lato', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif"
display: "'Lato', 'Source Sans Pro', sans-serif"
mono: "'Source Code Pro', 'Consolas', monospace"
# Type Scale (Minor Third: 1.2 - more approachable)
scale:
xs: "0.75rem" # 12px
sm: "0.875rem" # 14px
base: "1rem" # 16px
lg: "1.2rem" # 19.2px
xl: "1.44rem" # 23px
2xl: "1.728rem" # 27.6px
3xl: "2.074rem" # 33.2px
4xl: "2.488rem" # 39.8px
5xl: "2.986rem" # 47.8px
6xl: "3.583rem" # 57.3px
# Font Weights
weight:
normal: 400
medium: 500
semibold: 600
bold: 700
# Line Heights (Slightly more generous)
leading:
none: 1
tight: 1.3
snug: 1.4
normal: 1.6
relaxed: 1.75
loose: 2
Component Variants¶
[VARIANT_B_COMPONENTS]
button:
primary:
bg: "primary-600"
text: "white"
hover: "primary-700"
radius: "lg" # Softer corners
shadow: "md"
secondary:
bg: "background-secondary"
text: "primary-700"
hover: "primary-50"
radius: "lg"
border: "primary-200"
card:
default:
bg: "background-primary"
border: "border-default"
radius: "xl" # Warmer, softer
shadow: "md"
padding: "8"
featured:
bg: "primary-50"
border: "primary-200"
radius: "2xl"
shadow: "lg"
padding: "10"
hero:
style: "centered"
bg: "background-secondary"
headline: "5xl bold leading-tight"
subhead: "xl normal text-secondary"
cta_style: "rounded, warm"
Variant C: Bold Challenger¶
High-contrast charcoal with confident accents—for brands that lead with differentiation.
Design Philosophy¶
philosophy:
principle: "Confidence commands attention"
aesthetic: "Bold Minimal meets Anti-Vendor"
contrast: "High, impactful, memorable"
animation: "Confident, crisp, intentional"
typography: "Strong geometric sans-serif"
Color Tokens¶
[VARIANT_C_COLORS]
# Primary: Confident Charcoal
primary:
50: "#fafafa"
100: "#f4f4f5"
200: "#e4e4e7"
300: "#d4d4d8"
400: "#a1a1aa"
500: "#71717a"
600: "#52525b"
700: "#3f3f46"
800: "#27272a"
900: "#18181b" # Primary text/buttons
950: "#09090b" # Deepest
# Secondary: Slate (supporting)
secondary:
50: "#f8fafc"
100: "#f1f5f9"
200: "#e2e8f0"
300: "#cbd5e1"
400: "#94a3b8"
500: "#64748b"
600: "#475569"
700: "#334155"
800: "#1e293b"
900: "#0f172a"
950: "#020617"
# Accent: Action Orange (stands out)
accent:
400: "#fb923c"
500: "#f97316" # Primary accent
600: "#ea580c"
# Backgrounds (Light with high contrast text)
background:
primary: "#ffffff"
secondary: "#fafafa"
tertiary: "#f4f4f5"
inverse: "#18181b"
contrast: "#09090b" # For dark sections
# Foreground
foreground:
primary: "#09090b"
secondary: "#3f3f46"
muted: "#71717a"
inverse: "#fafafa"
accent: "#f97316"
# Borders
border:
default: "#e4e4e7"
subtle: "#f4f4f5"
strong: "#18181b" # Bold borders
focus: "#f97316"
# Status
status:
success: "#22c55e"
warning: "#f97316"
error: "#ef4444"
info: "#3b82f6"
Typography Tokens¶
[VARIANT_C_TYPOGRAPHY]
# Font Stack (Strong, geometric)
fonts:
sans: "'Geist', 'Inter', 'SF Pro Display', -apple-system, sans-serif"
display: "'Geist', 'Inter', sans-serif"
mono: "'Geist Mono', 'JetBrains Mono', monospace"
# Type Scale (Perfect Fourth: 1.333 - bold presence)
scale:
xs: "0.75rem" # 12px
sm: "0.875rem" # 14px
base: "1rem" # 16px
lg: "1.333rem" # 21.3px
xl: "1.777rem" # 28.4px
2xl: "2.369rem" # 37.9px
3xl: "3.157rem" # 50.5px
4xl: "4.209rem" # 67.3px
5xl: "5.61rem" # 89.8px
# Font Weights (Heavier defaults)
weight:
normal: 400
medium: 500
semibold: 600
bold: 700
extrabold: 800
# Line Heights (Tighter for headlines)
leading:
none: 1
tight: 1.1 # Headlines
snug: 1.25
normal: 1.5
relaxed: 1.625
loose: 2
# Letter Spacing
tracking:
tighter: "-0.075em" # Tighter headlines
tight: "-0.05em"
normal: "0"
wide: "0.05em"
wider: "0.1em" # All-caps
Component Variants¶
[VARIANT_C_COMPONENTS]
button:
primary:
bg: "primary-900"
text: "white"
hover: "primary-950"
radius: "sm" # Sharp, confident
shadow: "none"
border: "none"
secondary:
bg: "transparent"
text: "primary-900"
hover: "primary-100"
radius: "sm"
border: "primary-900 thick"
accent:
bg: "accent-500"
text: "white"
hover: "accent-600"
radius: "sm"
shadow: "none"
card:
default:
bg: "background-primary"
border: "border-strong"
radius: "none" # Sharp edges
shadow: "none"
padding: "6"
dark:
bg: "background-contrast"
border: "none"
radius: "none"
shadow: "none"
padding: "8"
text: "foreground-inverse"
hero:
style: "bold-statement"
bg: "background-primary"
headline: "5xl extrabold tracking-tighter leading-tight"
subhead: "xl medium text-secondary"
cta_style: "sharp, high-contrast"
accent_element: "accent-500 bar or highlight"
Variant D: Cyber Shield¶
Deep navy with electric blue accents—CrowdStrike-inspired security-focused aesthetic with strong protective visual language.
Design Philosophy¶
philosophy:
principle: "Protection through vigilance"
aesthetic: "Security Operations Center meets Enterprise Defense"
contrast: "High-impact, dark-anchored, alert-ready"
animation: "Precise, tactical, purposeful"
typography: "Strong geometric with monospace accents"
inspiration: "CrowdStrike visual language"
Color Tokens¶
[VARIANT_D_COLORS]
# Primary: Deep Navy
primary:
50: "#e6f4ff"
100: "#b3dcff"
200: "#80c4ff"
300: "#4dacff"
400: "#1a94ff"
500: "#0077e6" # Primary action
600: "#005cb3" # Primary hover
700: "#004080"
800: "#0A1628" # Deep navy anchor
900: "#061018"
950: "#030810"
# Secondary: Steel Blue
secondary:
50: "#f0f4f8"
100: "#d9e2ec"
200: "#bcccdc"
300: "#9fb3c8"
400: "#829ab1"
500: "#627d98"
600: "#486581"
700: "#334e68"
800: "#243b53"
900: "#102a43"
950: "#0a1929"
# Accent: Electric Blue
accent:
400: "#33ddff"
500: "#00D4FF" # Primary accent
600: "#00a8cc"
# Backgrounds (Dark-anchored)
background:
primary: "#0A1628" # Deep navy
secondary: "#0d1f36"
tertiary: "#112845"
inverse: "#f0f4f8"
surface: "#142238"
# Foreground
foreground:
primary: "#f0f4f8"
secondary: "#9fb3c8"
muted: "#627d98"
accent: "#00D4FF"
inverse: "#0A1628"
# Borders
border:
default: "#243b53"
subtle: "#1a2f47"
strong: "#00D4FF"
focus: "#00D4FF"
glow: "#00D4FF"
# Status
status:
success: "#00d97e"
warning: "#ffb020"
error: "#ff4d4d"
info: "#00D4FF"
threat: "#ff3333"
Typography Tokens¶
[VARIANT_D_TYPOGRAPHY]
# Font Stack (Strong, tactical)
fonts:
sans: "'Geist', 'Inter', 'SF Pro Display', -apple-system, sans-serif"
display: "'Geist', 'Inter', sans-serif"
mono: "'JetBrains Mono', 'SF Mono', 'Fira Code', monospace"
# Type Scale (Perfect Fourth: 1.333)
scale:
xs: "0.75rem" # 12px
sm: "0.875rem" # 14px
base: "1rem" # 16px
lg: "1.333rem" # 21.3px
xl: "1.777rem" # 28.4px
2xl: "2.369rem" # 37.9px
3xl: "3.157rem" # 50.5px
4xl: "4.209rem" # 67.3px
5xl: "5.61rem" # 89.8px
# Font Weights
weight:
normal: 400
medium: 500
semibold: 600
bold: 700
# Line Heights (Tight for data density)
leading:
none: 1
tight: 1.2
snug: 1.35
normal: 1.5
relaxed: 1.625
loose: 2
Spacing Scale¶
[VARIANT_D_SPACING]
scale:
# Same base scale as other variants
0: "0"
px: "1px"
1: "0.25rem"
2: "0.5rem"
3: "0.75rem"
4: "1rem"
6: "1.5rem"
8: "2rem"
12: "3rem"
16: "4rem"
20: "5rem"
24: "6rem"
# Section Spacing (Tighter for data density)
section:
sm: "3rem" # 48px
md: "5rem" # 80px
lg: "7rem" # 112px
xl: "9rem" # 144px
Border & Shadow Tokens¶
[VARIANT_D_GEOMETRY]
# Border Radius (Angular, protective)
radius:
none: "0"
sm: "0.125rem" # 2px - Sharp elements
md: "0.25rem" # 4px - Buttons, inputs
lg: "0.375rem" # 6px - Cards
xl: "0.5rem" # 8px - Large containers
2xl: "0.75rem" # 12px - Modals
full: "9999px" # Pill shapes
# Shadows (Minimal, glow-focused)
shadow:
xs: "none"
sm: "0 2px 4px 0 rgb(0 0 0 / 0.3)"
md: "0 4px 8px -2px rgb(0 0 0 / 0.4)"
lg: "0 8px 16px -4px rgb(0 0 0 / 0.5)"
xl: "0 12px 24px -6px rgb(0 0 0 / 0.6)"
glow-sm: "0 0 8px rgb(0 212 255 / 0.3)"
glow-md: "0 0 16px rgb(0 212 255 / 0.4)"
glow-lg: "0 0 24px rgb(0 212 255 / 0.5)"
# Borders
border:
width:
thin: "1px"
medium: "2px"
thick: "3px"
Motion Tokens¶
[VARIANT_D_MOTION]
# Duration (Precise, tactical)
duration:
instant: "0ms"
fast: "100ms" # Micro-interactions
normal: "200ms" # Standard transitions
slow: "350ms" # Important reveals
slower: "500ms" # Page transitions
# Easing
easing:
default: "cubic-bezier(0.4, 0, 0.2, 1)"
in: "cubic-bezier(0.4, 0, 1, 1)"
out: "cubic-bezier(0, 0, 0.2, 1)"
in-out: "cubic-bezier(0.4, 0, 0.2, 1)"
sharp: "cubic-bezier(0.4, 0, 0.6, 1)"
# Animation Presets
animations:
scan-line:
from: { backgroundPosition: "0% 0%" }
to: { backgroundPosition: "0% 100%" }
duration: "3s"
iteration: "infinite"
pulse-glow:
0%: { boxShadow: "0 0 8px rgb(0 212 255 / 0.3)" }
50%: { boxShadow: "0 0 16px rgb(0 212 255 / 0.5)" }
100%: { boxShadow: "0 0 8px rgb(0 212 255 / 0.3)" }
duration: "2s"
iteration: "infinite"
threat-pulse:
0%: { opacity: 1 }
50%: { opacity: 0.6 }
100%: { opacity: 1 }
duration: "1.5s"
iteration: "infinite"
Component Variants¶
[VARIANT_D_COMPONENTS]
button:
primary:
bg: "accent-500"
text: "primary-800"
hover: "accent-600"
radius: "md"
shadow: "glow-sm"
secondary:
bg: "transparent"
text: "accent-500"
hover: "primary-700"
radius: "md"
border: "accent-500"
alert:
bg: "status-threat"
text: "white"
hover: "status-error"
radius: "md"
shadow: "none"
card:
default:
bg: "background-surface"
border: "border-default"
radius: "lg"
shadow: "none"
padding: "6"
elevated:
bg: "background-tertiary"
border: "border-strong"
radius: "lg"
shadow: "glow-sm"
padding: "6"
threat:
bg: "background-surface"
border: "status-threat"
radius: "lg"
shadow: "none"
padding: "6"
input:
default:
bg: "background-secondary"
border: "border-default"
focus: "accent-500"
radius: "md"
padding: "3 4"
hero:
style: "command-center"
bg: "gradient(180deg, background-primary, background-secondary)"
headline: "5xl bold tracking-tight"
subhead: "lg normal text-secondary"
accent: "Electric blue glow on key elements"
Visual Patterns¶
[VARIANT_D_PATTERNS]
# Security-focused iconography and patterns
patterns:
scan_lines:
type: "repeating-linear-gradient"
angle: "0deg"
color: "rgb(0 212 255 / 0.02)"
size: "2px"
gap: "4px"
hex_grid:
type: "hexagonal-pattern"
color: "rgb(0 212 255 / 0.05)"
size: "24px"
corner_brackets:
position: "corners"
size: "12px"
color: "accent-500"
thickness: "2px"
angular_accents:
type: "geometric"
angles: ["45deg", "135deg"]
color: "accent-500"
Variant E: Sentinel Guard¶
Dark purple-gray with magenta/purple accents—SentinelOne-inspired AI-powered autonomous defense aesthetic with futuristic neural patterns.
Design Philosophy¶
philosophy:
principle: "Intelligence enables autonomy"
aesthetic: "Neural Network meets Autonomous Defense"
contrast: "Rich, layered, depth-focused"
animation: "Flowing, organic-tech, intelligent"
typography: "Modern geometric with elegant weight"
inspiration: "SentinelOne visual language"
Color Tokens¶
[VARIANT_E_COLORS]
# Primary: Deep Purple-Gray
primary:
50: "#f5f3ff"
100: "#ede9fe"
200: "#ddd6fe"
300: "#c4b5fd"
400: "#a78bfa"
500: "#8B5CF6" # Primary action
600: "#7c3aed" # Primary hover
700: "#6d28d9"
800: "#1A1A2E" # Deep purple-gray anchor
900: "#12121f"
950: "#0a0a14"
# Secondary: Violet
secondary:
50: "#faf5ff"
100: "#f3e8ff"
200: "#e9d5ff"
300: "#d8b4fe"
400: "#c084fc"
500: "#a855f7"
600: "#9333ea"
700: "#7e22ce"
800: "#6b21a8"
900: "#581c87"
950: "#3b0764"
# Accent: Magenta/Fuchsia
accent:
400: "#e879f9"
500: "#d946ef" # Primary accent
600: "#c026d3"
glow: "#a855f7"
# Backgrounds (Dark-anchored with depth)
background:
primary: "#1A1A2E" # Deep purple-gray
secondary: "#1f1f38"
tertiary: "#252542"
inverse: "#faf5ff"
surface: "#222240"
# Foreground
foreground:
primary: "#faf5ff"
secondary: "#c4b5fd"
muted: "#a78bfa"
accent: "#d946ef"
inverse: "#1A1A2E"
# Borders
border:
default: "#3b3b5c"
subtle: "#2d2d4a"
strong: "#8B5CF6"
focus: "#8B5CF6"
glow: "#a855f7"
# Status
status:
success: "#34d399"
warning: "#fbbf24"
error: "#f87171"
info: "#8B5CF6"
Typography Tokens¶
[VARIANT_E_TYPOGRAPHY]
# Font Stack (Modern, elegant)
fonts:
sans: "'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif"
display: "'Cal Sans', 'Inter', sans-serif"
mono: "'JetBrains Mono', 'SF Mono', monospace"
# Type Scale (Major Third: 1.25)
scale:
xs: "0.75rem" # 12px
sm: "0.875rem" # 14px
base: "1rem" # 16px
lg: "1.125rem" # 18px
xl: "1.25rem" # 20px
2xl: "1.5rem" # 24px
3xl: "1.875rem" # 30px
4xl: "2.25rem" # 36px
5xl: "3rem" # 48px
6xl: "3.75rem" # 60px
# Font Weights
weight:
normal: 400
medium: 500
semibold: 600
bold: 700
# Line Heights
leading:
none: 1
tight: 1.25
snug: 1.375
normal: 1.5
relaxed: 1.625
loose: 2
Border & Shadow Tokens¶
[VARIANT_E_GEOMETRY]
# Border Radius (Rounded, organic-tech)
radius:
none: "0"
sm: "0.25rem" # 4px
md: "0.5rem" # 8px - Buttons, inputs
lg: "0.75rem" # 12px - Cards
xl: "1rem" # 16px - Large containers
2xl: "1.5rem" # 24px - Modals
full: "9999px"
# Shadows (Layered with glow)
shadow:
xs: "0 1px 2px 0 rgb(0 0 0 / 0.2)"
sm: "0 2px 4px 0 rgb(0 0 0 / 0.3), 0 0 8px rgb(139 92 246 / 0.1)"
md: "0 4px 8px -2px rgb(0 0 0 / 0.4), 0 0 12px rgb(139 92 246 / 0.15)"
lg: "0 8px 16px -4px rgb(0 0 0 / 0.5), 0 0 20px rgb(139 92 246 / 0.2)"
xl: "0 12px 24px -6px rgb(0 0 0 / 0.6), 0 0 32px rgb(139 92 246 / 0.25)"
glow-sm: "0 0 12px rgb(139 92 246 / 0.3)"
glow-md: "0 0 24px rgb(139 92 246 / 0.4)"
glow-lg: "0 0 40px rgb(139 92 246 / 0.5)"
# Borders
border:
width:
thin: "1px"
medium: "1.5px"
thick: "2px"
Motion Tokens¶
[VARIANT_E_MOTION]
# Duration (Flowing, organic)
duration:
instant: "0ms"
fast: "150ms" # Micro-interactions
normal: "300ms" # Standard transitions
slow: "500ms" # Important reveals
slower: "700ms" # Page transitions
# Easing
easing:
default: "cubic-bezier(0.4, 0, 0.2, 1)"
in: "cubic-bezier(0.4, 0, 1, 1)"
out: "cubic-bezier(0, 0, 0.2, 1)"
in-out: "cubic-bezier(0.4, 0, 0.2, 1)"
bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)"
organic: "cubic-bezier(0.25, 0.46, 0.45, 0.94)"
# Animation Presets
animations:
neural-pulse:
0%: { opacity: 0.3, transform: "scale(0.95)" }
50%: { opacity: 0.6, transform: "scale(1)" }
100%: { opacity: 0.3, transform: "scale(0.95)" }
duration: "4s"
iteration: "infinite"
gradient-shift:
0%: { backgroundPosition: "0% 50%" }
50%: { backgroundPosition: "100% 50%" }
100%: { backgroundPosition: "0% 50%" }
duration: "8s"
iteration: "infinite"
glow-breathe:
0%: { boxShadow: "0 0 12px rgb(139 92 246 / 0.2)" }
50%: { boxShadow: "0 0 24px rgb(139 92 246 / 0.4)" }
100%: { boxShadow: "0 0 12px rgb(139 92 246 / 0.2)" }
duration: "3s"
iteration: "infinite"
Component Variants¶
[VARIANT_E_COMPONENTS]
button:
primary:
bg: "gradient(135deg, primary-500, secondary-600)"
text: "white"
hover: "gradient(135deg, primary-600, secondary-700)"
radius: "lg"
shadow: "glow-sm"
secondary:
bg: "transparent"
text: "primary-400"
hover: "background-tertiary"
radius: "lg"
border: "primary-500"
accent:
bg: "accent-500"
text: "white"
hover: "accent-600"
radius: "lg"
shadow: "glow-sm"
card:
default:
bg: "background-surface"
border: "border-default"
radius: "xl"
shadow: "sm"
padding: "6"
elevated:
bg: "gradient(135deg, background-secondary, background-tertiary)"
border: "border-glow"
radius: "xl"
shadow: "glow-md"
padding: "8"
glass:
bg: "rgb(26 26 46 / 0.8)"
border: "rgb(139 92 246 / 0.2)"
radius: "xl"
backdrop: "blur(12px)"
padding: "6"
hero:
style: "flowing-neural"
bg: "gradient(135deg, background-primary, background-secondary, background-tertiary)"
headline: "5xl semibold tracking-tight"
subhead: "lg normal text-secondary"
accent: "Gradient overlays with purple/magenta flow"
Visual Patterns¶
[VARIANT_E_PATTERNS]
# AI/Neural network visual patterns
patterns:
neural_nodes:
type: "connected-dots"
color: "rgb(139 92 246 / 0.1)"
node_size: "4px"
line_width: "1px"
density: "medium"
gradient_mesh:
type: "radial-gradient"
colors: ["primary-500", "secondary-600", "accent-500"]
opacity: 0.1
animation: "gradient-shift"
glow_orbs:
type: "radial"
color: "accent-glow"
blur: "40px"
opacity: 0.15
count: 3
flowing_lines:
type: "svg-path"
stroke: "primary-500"
stroke_width: "1px"
opacity: 0.2
animation: "flow"
Variant F: Clean Developer¶
Pure white with purple accent—Stripe-inspired ultra-clean minimalism with precise spacing and developer-friendly documentation style.
Design Philosophy¶
philosophy:
principle: "Clarity enables excellence"
aesthetic: "Swiss Minimalism meets Developer Experience"
contrast: "Crisp, readable, precise"
animation: "Subtle, functional, never decorative"
typography: "Clean geometric with excellent readability"
inspiration: "Stripe visual language"
Color Tokens¶
[VARIANT_F_COLORS]
# Primary: Stripe Purple
primary:
50: "#faf5ff"
100: "#f3e8ff"
200: "#e9d5ff"
300: "#d8b4fe"
400: "#a78bfa"
500: "#635BFF" # Primary action (Stripe purple)
600: "#5046e5" # Primary hover
700: "#4338ca"
800: "#3730a3"
900: "#312e81"
950: "#1e1b4b"
# Secondary: Cool Gray
secondary:
50: "#f9fafb"
100: "#f3f4f6"
200: "#e5e7eb"
300: "#d1d5db"
400: "#9ca3af"
500: "#6b7280"
600: "#4b5563"
700: "#374151"
800: "#1f2937"
900: "#111827"
950: "#030712"
# Accent: Cyan (for code/highlights)
accent:
400: "#22d3ee"
500: "#06b6d4"
600: "#0891b2"
# Backgrounds (Pure, clean)
background:
primary: "#FFFFFF" # Pure white
secondary: "#f9fafb"
tertiary: "#f3f4f6"
inverse: "#111827"
code: "#1e1e3f" # Code block background
# Foreground
foreground:
primary: "#111827"
secondary: "#4b5563"
muted: "#9ca3af"
accent: "#635BFF"
inverse: "#ffffff"
code: "#e5e7eb"
# Borders
border:
default: "#e5e7eb"
subtle: "#f3f4f6"
strong: "#d1d5db"
focus: "#635BFF"
# Status
status:
success: "#10b981"
warning: "#f59e0b"
error: "#ef4444"
info: "#635BFF"
Typography Tokens¶
[VARIANT_F_TYPOGRAPHY]
# Font Stack (Clean, readable)
fonts:
sans: "'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif"
display: "'Inter', 'SF Pro Display', sans-serif"
mono: "'JetBrains Mono', 'SF Mono', 'Fira Code', monospace"
# Type Scale (Major Third: 1.25)
scale:
xs: "0.75rem" # 12px
sm: "0.875rem" # 14px
base: "1rem" # 16px
lg: "1.125rem" # 18px
xl: "1.25rem" # 20px
2xl: "1.5rem" # 24px
3xl: "1.875rem" # 30px
4xl: "2.25rem" # 36px
5xl: "3rem" # 48px
6xl: "3.75rem" # 60px
# Font Weights
weight:
normal: 400
medium: 500
semibold: 600
bold: 700
# Line Heights (Generous for readability)
leading:
none: 1
tight: 1.25
snug: 1.375
normal: 1.5
relaxed: 1.75
loose: 2
Spacing Scale¶
[VARIANT_F_SPACING]
scale:
# Generous spacing for breathing room
0: "0"
px: "1px"
1: "0.25rem"
2: "0.5rem"
3: "0.75rem"
4: "1rem"
5: "1.25rem"
6: "1.5rem"
8: "2rem"
10: "2.5rem"
12: "3rem"
16: "4rem"
20: "5rem"
24: "6rem"
32: "8rem"
# Section Spacing (Generous)
section:
sm: "5rem" # 80px
md: "7rem" # 112px
lg: "9rem" # 144px
xl: "12rem" # 192px
Border & Shadow Tokens¶
[VARIANT_F_GEOMETRY]
# Border Radius (Consistent, rounded)
radius:
none: "0"
sm: "0.25rem" # 4px
md: "0.5rem" # 8px - Buttons, inputs
lg: "0.75rem" # 12px - Cards
xl: "1rem" # 16px - Large containers
2xl: "1.5rem" # 24px - Modals
full: "9999px"
# Shadows (Subtle, refined)
shadow:
xs: "0 1px 2px 0 rgb(0 0 0 / 0.03)"
sm: "0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04)"
md: "0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05)"
lg: "0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.06)"
xl: "0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.08)"
inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.04)"
# Borders
border:
width:
thin: "1px"
medium: "1.5px"
thick: "2px"
Motion Tokens¶
[VARIANT_F_MOTION]
# Duration (Quick, functional)
duration:
instant: "0ms"
fast: "100ms" # Micro-interactions
normal: "150ms" # Standard transitions
slow: "250ms" # Important reveals
slower: "400ms" # Page transitions
# Easing
easing:
default: "cubic-bezier(0.4, 0, 0.2, 1)"
in: "cubic-bezier(0.4, 0, 1, 1)"
out: "cubic-bezier(0, 0, 0.2, 1)"
in-out: "cubic-bezier(0.4, 0, 0.2, 1)"
spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
# Animation Presets
animations:
fade-in:
from: { opacity: 0 }
to: { opacity: 1 }
duration: "normal"
easing: "out"
slide-up:
from: { opacity: 0, transform: "translateY(8px)" }
to: { opacity: 1, transform: "translateY(0)" }
duration: "normal"
easing: "out"
code-highlight:
from: { backgroundColor: "rgb(99 91 255 / 0)" }
to: { backgroundColor: "rgb(99 91 255 / 0.1)" }
duration: "fast"
easing: "out"
Component Variants¶
[VARIANT_F_COMPONENTS]
button:
primary:
bg: "primary-500"
text: "white"
hover: "primary-600"
radius: "md"
shadow: "sm"
font: "medium"
secondary:
bg: "white"
text: "secondary-700"
hover: "secondary-50"
radius: "md"
border: "secondary-200"
shadow: "xs"
ghost:
bg: "transparent"
text: "secondary-600"
hover: "secondary-100"
radius: "md"
border: "none"
card:
default:
bg: "background-primary"
border: "border-default"
radius: "lg"
shadow: "sm"
padding: "6"
code:
bg: "background-code"
border: "none"
radius: "lg"
shadow: "md"
padding: "4"
font: "mono"
elevated:
bg: "background-primary"
border: "none"
radius: "xl"
shadow: "lg"
padding: "8"
input:
default:
bg: "background-primary"
border: "border-default"
focus: "primary-500"
radius: "md"
padding: "3 4"
shadow: "xs"
hero:
style: "documentation"
bg: "background-primary"
headline: "5xl semibold tracking-tight"
subhead: "xl normal text-secondary"
code_preview: "Dark code block with syntax highlighting"
Code Block Styling¶
[VARIANT_F_CODE]
# Developer-focused code presentation
code_blocks:
background: "#1e1e3f"
text: "#e5e7eb"
border_radius: "lg"
padding: "4"
syntax_colors:
keyword: "#c792ea" # Purple
string: "#c3e88d" # Green
number: "#f78c6c" # Orange
comment: "#676e95" # Gray
function: "#82aaff" # Blue
variable: "#f07178" # Red
operator: "#89ddff" # Cyan
line_numbers:
color: "#676e95"
border: "#2d2d5f"
Variant G: Creative Clay¶
Warm cream with coral/terracotta accents—Clay-inspired friendly approachable aesthetic with soft shadows, rounded elements, and playful professional character.
Design Philosophy¶
philosophy:
principle: "Warmth inspires connection"
aesthetic: "Friendly Modern meets Playful Professional"
contrast: "Warm, inviting, memorable"
animation: "Bouncy, delightful, characterful"
typography: "Rounded geometric with personality"
inspiration: "Clay visual language"
Color Tokens¶
[VARIANT_G_COLORS]
# Primary: Deep Charcoal
primary:
50: "#f9fafb"
100: "#f3f4f6"
200: "#e5e7eb"
300: "#d1d5db"
400: "#9ca3af"
500: "#6b7280"
600: "#4b5563"
700: "#374151"
800: "#1f2937"
900: "#111827"
950: "#030712"
# Secondary: Warm Gray
secondary:
50: "#fafaf9"
100: "#f5f5f4"
200: "#e7e5e4"
300: "#d6d3d1"
400: "#a8a29e"
500: "#78716c"
600: "#57534e"
700: "#44403c"
800: "#292524"
900: "#1c1917"
950: "#0c0a09"
# Accent: Coral/Terracotta
accent:
300: "#fdba74"
400: "#fb923c"
500: "#E85D04" # Primary accent (coral/terracotta)
600: "#c2410c"
700: "#9a3412"
# Backgrounds (Warm cream)
background:
primary: "#FFF8F0" # Warm cream
secondary: "#fff5eb"
tertiary: "#ffedd5"
inverse: "#1c1917"
surface: "#ffffff"
# Foreground
foreground:
primary: "#1c1917"
secondary: "#57534e"
muted: "#78716c"
accent: "#E85D04"
inverse: "#fafaf9"
# Borders
border:
default: "#e7e5e4"
subtle: "#f5f5f4"
strong: "#d6d3d1"
focus: "#E85D04"
# Status
status:
success: "#22c55e"
warning: "#f59e0b"
error: "#ef4444"
info: "#0ea5e9"
Typography Tokens¶
[VARIANT_G_TYPOGRAPHY]
# Font Stack (Rounded, friendly)
fonts:
sans: "'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif"
display: "'Plus Jakarta Sans', 'Inter', sans-serif"
mono: "'JetBrains Mono', 'SF Mono', monospace"
# Type Scale (Minor Third: 1.2 - approachable)
scale:
xs: "0.75rem" # 12px
sm: "0.875rem" # 14px
base: "1rem" # 16px
lg: "1.2rem" # 19.2px
xl: "1.44rem" # 23px
2xl: "1.728rem" # 27.6px
3xl: "2.074rem" # 33.2px
4xl: "2.488rem" # 39.8px
5xl: "2.986rem" # 47.8px
6xl: "3.583rem" # 57.3px
# Font Weights
weight:
normal: 400
medium: 500
semibold: 600
bold: 700
extrabold: 800
# Line Heights (Generous)
leading:
none: 1
tight: 1.3
snug: 1.4
normal: 1.6
relaxed: 1.75
loose: 2
Border & Shadow Tokens¶
[VARIANT_G_GEOMETRY]
# Border Radius (Very rounded, soft)
radius:
none: "0"
sm: "0.5rem" # 8px
md: "0.75rem" # 12px - Buttons, inputs
lg: "1rem" # 16px - Cards
xl: "1.5rem" # 24px - Large containers
2xl: "2rem" # 32px - Modals
3xl: "3rem" # 48px - Feature elements
full: "9999px" # Pill shapes
# Shadows (Soft, warm)
shadow:
xs: "0 1px 2px 0 rgb(28 25 23 / 0.04)"
sm: "0 2px 4px 0 rgb(28 25 23 / 0.06), 0 1px 2px -1px rgb(28 25 23 / 0.06)"
md: "0 4px 8px -2px rgb(28 25 23 / 0.08), 0 2px 4px -2px rgb(28 25 23 / 0.06)"
lg: "0 12px 20px -4px rgb(28 25 23 / 0.1), 0 4px 8px -4px rgb(28 25 23 / 0.08)"
xl: "0 24px 32px -8px rgb(28 25 23 / 0.12), 0 8px 16px -8px rgb(28 25 23 / 0.1)"
soft: "0 8px 24px -4px rgb(232 93 4 / 0.15)"
# Borders
border:
width:
thin: "1px"
medium: "2px"
thick: "3px"
Motion Tokens¶
[VARIANT_G_MOTION]
# Duration (Playful, bouncy)
duration:
instant: "0ms"
fast: "150ms" # Micro-interactions
normal: "300ms" # Standard transitions
slow: "500ms" # Important reveals
slower: "700ms" # Page transitions
# Easing (Bouncy, delightful)
easing:
default: "cubic-bezier(0.4, 0, 0.2, 1)"
in: "cubic-bezier(0.4, 0, 1, 1)"
out: "cubic-bezier(0, 0, 0.2, 1)"
in-out: "cubic-bezier(0.4, 0, 0.2, 1)"
bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)"
elastic: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
playful: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
# Animation Presets
animations:
bounce-in:
from: { opacity: 0, transform: "scale(0.9)" }
to: { opacity: 1, transform: "scale(1)" }
duration: "normal"
easing: "bounce"
wiggle:
0%: { transform: "rotate(0deg)" }
25%: { transform: "rotate(-3deg)" }
75%: { transform: "rotate(3deg)" }
100%: { transform: "rotate(0deg)" }
duration: "500ms"
float:
0%: { transform: "translateY(0px)" }
50%: { transform: "translateY(-8px)" }
100%: { transform: "translateY(0px)" }
duration: "3s"
iteration: "infinite"
Component Variants¶
[VARIANT_G_COMPONENTS]
button:
primary:
bg: "accent-500"
text: "white"
hover: "accent-600"
radius: "full"
shadow: "md"
transform_hover: "translateY(-2px)"
secondary:
bg: "background-surface"
text: "primary-900"
hover: "background-tertiary"
radius: "full"
border: "primary-200"
shadow: "sm"
playful:
bg: "gradient(135deg, accent-400, accent-600)"
text: "white"
hover: "gradient(135deg, accent-500, accent-700)"
radius: "full"
shadow: "soft"
card:
default:
bg: "background-surface"
border: "border-default"
radius: "xl"
shadow: "md"
padding: "8"
elevated:
bg: "background-surface"
border: "none"
radius: "2xl"
shadow: "xl"
padding: "10"
accent:
bg: "gradient(135deg, background-tertiary, background-secondary)"
border: "accent-300"
radius: "2xl"
shadow: "soft"
padding: "8"
hero:
style: "playful-split"
bg: "background-primary"
headline: "5xl extrabold tracking-tight"
subhead: "xl normal text-secondary"
illustrations: "3D clay-style floating elements"
Visual Patterns¶
[VARIANT_G_PATTERNS]
# Friendly, organic patterns
patterns:
blob_backgrounds:
type: "svg-blob"
colors: ["accent-300", "accent-400", "primary-200"]
opacity: 0.1
blur: "60px"
count: 3-5
soft_gradient:
type: "radial-gradient"
from: "background-primary"
to: "background-secondary"
position: "top-right"
grain_texture:
type: "noise"
opacity: 0.02
blend: "overlay"
floating_shapes:
type: "3d-clay"
shapes: ["sphere", "torus", "cube-rounded"]
colors: ["accent-500", "primary-400", "secondary-300"]
animation: "float"
Variant H: Blueprint Technical¶
Dark background with orange accents—AlignUI-inspired engineering drawing aesthetic with CAD annotation style, ruler tick marks, and precise technical visual language.
Design Philosophy¶
philosophy:
principle: "Precision defines excellence"
aesthetic: "Engineering Blueprint meets Modern CAD"
contrast: "Technical, precise, annotated"
animation: "Measured, systematic, mechanical"
typography: "Technical sans with monospace data"
inspiration: "AlignUI engineering drawing aesthetic, ASME standards"
integration: "Layout AND components (not just framing)"
Color Tokens¶
[VARIANT_H_COLORS]
# Primary: Rich Charcoal
primary:
50: "#fafafa"
100: "#f5f5f5"
200: "#e5e5e5"
300: "#d4d4d4"
400: "#a3a3a3"
500: "#737373"
600: "#525252"
700: "#404040"
800: "#262626"
900: "#1C1C1C" # Primary background
950: "#0a0a0a"
# Secondary: Cool Gray
secondary:
50: "#f9fafb"
100: "#f3f4f6"
200: "#e5e7eb"
300: "#d1d5db"
400: "#9ca3af"
500: "#6b7280"
600: "#4b5563"
700: "#374151"
800: "#1f2937"
900: "#111827"
950: "#030712"
# Accent: Engineering Orange
accent:
300: "#fdba74"
400: "#fb923c"
500: "#F05023" # Primary accent (engineering orange)
600: "#dc2626"
700: "#b91c1c"
# Annotation Colors
annotation:
dimension: "#F05023" # Dimension lines and text
construction: "#4b5563" # Construction lines (lighter gray)
centerline: "#6b7280" # Center lines
hidden: "#374151" # Hidden lines (dashed)
section: "#F05023" # Section cut indicators
callout: "#f59e0b" # Callout bubbles
# Backgrounds (Dark, technical)
background:
primary: "#1C1C1C" # Rich charcoal
secondary: "#242424"
tertiary: "#2d2d2d"
inverse: "#fafafa"
surface: "#1f1f1f"
grid: "#282828" # Grid background
# Foreground
foreground:
primary: "#fafafa"
secondary: "#a3a3a3"
muted: "#737373"
accent: "#F05023"
inverse: "#1C1C1C"
dimension: "#d4d4d4" # Dimension text
# Borders
border:
default: "#404040"
subtle: "#2d2d2d"
strong: "#525252"
focus: "#F05023"
hairline: "#333333" # Ultra-thin technical lines
dimension: "#F05023" # Dimension lines
# Status
status:
success: "#22c55e"
warning: "#f59e0b"
error: "#ef4444"
info: "#0ea5e9"
Typography Tokens¶
[VARIANT_H_TYPOGRAPHY]
# Font Stack (Technical, precise)
fonts:
sans: "'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif"
display: "'Inter', 'SF Pro Display', sans-serif"
mono: "'JetBrains Mono', 'SF Mono', 'Fira Code', monospace"
technical: "'IBM Plex Mono', 'JetBrains Mono', monospace" # For annotations
# Type Scale (Modular: 1.25)
scale:
xs: "0.625rem" # 10px - Technical annotations
sm: "0.75rem" # 12px - Dimension text
base: "0.875rem" # 14px - Body text (tighter for technical)
lg: "1rem" # 16px - Large body
xl: "1.125rem" # 18px - H5
2xl: "1.25rem" # 20px - H4
3xl: "1.5rem" # 24px - H3
4xl: "1.875rem" # 30px - H2
5xl: "2.25rem" # 36px - H1
6xl: "3rem" # 48px - Display
# Font Weights
weight:
light: 300 # For dimension text
normal: 400
medium: 500
semibold: 600
bold: 700
# Line Heights (Tight for technical density)
leading:
none: 1
tight: 1.2
snug: 1.3
normal: 1.4
relaxed: 1.5
loose: 1.75
# Letter Spacing
tracking:
tighter: "-0.05em"
tight: "-0.025em"
normal: "0"
wide: "0.05em" # For all-caps labels
wider: "0.1em" # For technical annotations
widest: "0.15em" # For dimension text
Spacing Scale¶
[VARIANT_H_SPACING]
scale:
# Precise increments for technical layouts
0: "0"
px: "1px"
0.5: "0.125rem" # 2px
1: "0.25rem" # 4px
1.5: "0.375rem" # 6px
2: "0.5rem" # 8px
2.5: "0.625rem" # 10px
3: "0.75rem" # 12px
4: "1rem" # 16px
5: "1.25rem" # 20px
6: "1.5rem" # 24px
8: "2rem" # 32px
10: "2.5rem" # 40px
12: "3rem" # 48px
16: "4rem" # 64px
# Section Spacing (Grid-aligned)
section:
sm: "3rem" # 48px
md: "4rem" # 64px
lg: "6rem" # 96px
xl: "8rem" # 128px
# Grid Unit
grid_unit: "8px" # Base grid for all measurements
Border & Shadow Tokens¶
[VARIANT_H_GEOMETRY]
# Border Radius (Minimal, technical)
radius:
none: "0"
xs: "2px" # Technical elements
sm: "4px" # Buttons, inputs
md: "6px" # Cards
lg: "8px" # Containers
xl: "12px" # Large elements
full: "9999px" # Indicators only
# Shadows (Minimal, subtle)
shadow:
none: "none"
xs: "0 1px 2px 0 rgb(0 0 0 / 0.3)"
sm: "0 2px 4px 0 rgb(0 0 0 / 0.4)"
md: "0 4px 8px -2px rgb(0 0 0 / 0.5)"
inset: "inset 0 1px 2px 0 rgb(0 0 0 / 0.3)"
# Technical Line Styles
lines:
solid:
weight: "1px"
style: "solid"
description: "Object lines, visible edges"
hairline:
weight: "0.5px"
style: "solid"
description: "Dimension lines, extension lines"
dashed:
weight: "1px"
style: "dashed"
dash: "6px"
gap: "3px"
description: "Hidden lines, fold lines"
dotted:
weight: "1px"
style: "dotted"
description: "Alignment markers, guides"
centerline:
weight: "0.5px"
style: "dashed"
dash: "12px"
gap: "3px"
dot: "2px"
description: "Center lines (long-short-long pattern)"
phantom:
weight: "0.5px"
style: "dashed"
dash: "12px"
gap: "2px"
dots: "2px 2px"
description: "Phantom lines for motion/alternate positions"
Motion Tokens¶
[VARIANT_H_MOTION]
# Duration (Precise, mechanical)
duration:
instant: "0ms"
fast: "100ms" # Micro-interactions
normal: "200ms" # Standard transitions
slow: "300ms" # Important reveals
slower: "400ms" # Page transitions
# Easing (Linear, technical)
easing:
default: "cubic-bezier(0.4, 0, 0.2, 1)"
linear: "linear" # For measurement animations
in: "cubic-bezier(0.4, 0, 1, 1)"
out: "cubic-bezier(0, 0, 0.2, 1)"
in-out: "cubic-bezier(0.4, 0, 0.2, 1)"
precise: "cubic-bezier(0.25, 0, 0.25, 1)"
# Animation Presets
animations:
dimension-draw:
from: { strokeDashoffset: "100%", opacity: 0 }
to: { strokeDashoffset: "0%", opacity: 1 }
duration: "slow"
easing: "linear"
tick-appear:
from: { transform: "scaleY(0)", opacity: 0 }
to: { transform: "scaleY(1)", opacity: 1 }
duration: "fast"
easing: "out"
callout-fade:
from: { opacity: 0, transform: "translateY(-4px)" }
to: { opacity: 1, transform: "translateY(0)" }
duration: "normal"
easing: "out"
gradient-fade:
# Lines fade to transparency instead of hard stops
type: "gradient-mask"
direction: "to-edge"
opacity_start: 1
opacity_end: 0
length: "24px"
Component Variants¶
[VARIANT_H_COMPONENTS]
button:
primary:
bg: "accent-500"
text: "white"
hover: "accent-600"
radius: "sm"
shadow: "none"
border: "none"
secondary:
bg: "transparent"
text: "foreground-primary"
hover: "background-secondary"
radius: "sm"
border: "border-default"
technical:
bg: "background-tertiary"
text: "accent-500"
hover: "background-secondary"
radius: "xs"
border: "accent-500 hairline"
card:
default:
bg: "background-surface"
border: "border-default"
radius: "md"
shadow: "none"
padding: "4"
annotated:
bg: "background-surface"
border: "border-default"
radius: "md"
shadow: "none"
padding: "4"
annotation_style: "dimension-markers"
data:
bg: "background-grid"
border: "border-hairline"
radius: "sm"
shadow: "none"
padding: "3"
input:
default:
bg: "background-secondary"
border: "border-default"
focus: "accent-500"
radius: "sm"
padding: "2 3"
hero:
style: "technical-specification"
bg: "background-primary"
headline: "4xl semibold tracking-tight"
subhead: "base normal text-secondary"
annotation: "Dimension callouts and measurement overlays"
Technical Annotation System¶
[VARIANT_H_ANNOTATIONS]
# Ruler tick marks at margins
ruler_ticks:
enabled: true
position: ["top", "left"] # Configurable
major_tick:
interval: "64px" # Every 8 grid units
length: "8px"
color: "annotation-dimension"
weight: "1px"
minor_tick:
interval: "8px" # Every grid unit
length: "4px"
color: "border-subtle"
weight: "0.5px"
label:
interval: "64px"
font: "technical"
size: "xs"
color: "foreground-muted"
# Dimension lines
dimension_lines:
style: "hairline"
color: "annotation-dimension"
extension_lines: true
extension_gap: "2px"
extension_overshoot: "2px"
arrow_style: "tick" # tick, arrow, dot, none
text:
font: "technical"
size: "sm"
color: "foreground-dimension"
position: "above" # above, below, inline
# Alignment markers
alignment_markers:
style: "dotted"
color: "annotation-construction"
intersection_dot:
enabled: true
size: "4px"
ring: true
ring_size: "8px"
ring_color: "annotation-dimension"
# Gradient fade lines
gradient_fade_lines:
enabled: true
fade_length: "24px"
direction: "outward" # Lines fade toward edges
opacity_curve: "linear"
# Progressive blur for measurements
measurement_blur:
enabled: true
blur_start: "0px"
blur_end: "4px"
distance: "100px" # Blur increases over distance
# Callout bubbles
callouts:
shape: "circle" # circle, square, rounded-square
size: "24px"
bg: "accent-500"
text: "white"
font: "technical"
connector:
style: "solid"
color: "accent-500"
weight: "1px"
# Timeline annotations
timeline:
axis:
style: "solid"
color: "border-default"
weight: "1px"
tick:
style: "solid"
color: "annotation-dimension"
length: "8px"
weight: "1px"
label:
font: "technical"
size: "xs"
color: "foreground-secondary"
Visual Patterns¶
[VARIANT_H_PATTERNS]
# Engineering/CAD-style patterns
patterns:
grid_background:
type: "grid"
major_color: "rgb(64 64 64 / 0.3)"
minor_color: "rgb(64 64 64 / 0.1)"
major_size: "64px"
minor_size: "8px"
major_weight: "1px"
minor_weight: "0.5px"
dot_grid:
type: "dot-matrix"
color: "rgb(115 115 115 / 0.2)"
size: "2px"
spacing: "16px"
construction_lines:
type: "diagonal-hatch"
color: "rgb(75 85 99 / 0.1)"
angle: "45deg"
spacing: "8px"
weight: "0.5px"
section_fill:
type: "diagonal-hatch"
color: "rgb(240 80 35 / 0.1)"
angle: "45deg"
spacing: "4px"
weight: "1px"
measurement_overlay:
type: "composite"
includes: ["ruler_ticks", "dimension_lines", "alignment_markers"]
opacity: 0.8
Layout Integration¶
[VARIANT_H_LAYOUT]
# Blueprint aesthetic integrates into layout, not just framing
layout_features:
margin_rulers:
enabled: true
width: "24px"
position: ["left", "top"]
tick_marks: true
labels: true
edge_fade:
enabled: true
type: "gradient"
color: "background-primary"
length: "32px"
position: "all-edges"
intersection_markers:
enabled: true
at: "grid-intersections"
style: "ringed-dot"
component_annotations:
enabled: true
show_dimensions: "on-hover"
show_spacing: "on-hover"
data_callouts:
style: "numbered-circle"
connector: "leader-line"
position: "auto"
Selection Guide¶
Decision Matrix¶
| Factor | Trusted Advisor | Modern Partner | Bold Challenger | Cyber Shield | Sentinel Guard |
|---|---|---|---|---|---|
| Primary Audience | IT Managers, CFOs | Non-profits, Healthcare | Business Owners | Security Teams | Tech Leaders |
| Trust Signal | Authority, Reliability | Partnership, Warmth | Confidence, Honesty | Protection, Vigilance | Intelligence, Autonomy |
| Visual Feel | Clean, Corporate | Warm, Approachable | Bold, Distinctive | Dark, Tactical | Futuristic, Neural |
| Color Anchor | Deep Blue | Teal + Cream | Charcoal + Orange | Navy + Electric Blue | Purple-Gray + Magenta |
| Typography | Inter (Geometric) | Lato (Humanist) | Geist (Strong) | Geist + Mono | Inter + Cal Sans |
| Animation | Subtle, professional | Gentle, organic | Crisp, intentional | Precise, tactical | Flowing, organic-tech |
| Best For | General use | Non-profit focus | Differentiation | Security services | AI/ML messaging |
| Factor | Clean Developer | Creative Clay | Blueprint Technical |
|---|---|---|---|
| Primary Audience | Developers, Engineers | Marketing, Creative | Engineers, Technical Buyers |
| Trust Signal | Precision, Clarity | Warmth, Memorability | Precision, Expertise |
| Visual Feel | Minimal, Pristine | Playful, Friendly | Technical, CAD-style |
| Color Anchor | White + Purple | Cream + Coral | Dark + Orange |
| Typography | Inter + JetBrains Mono | Plus Jakarta Sans | Inter + IBM Plex Mono |
| Animation | Quick, functional | Bouncy, delightful | Measured, mechanical |
| Best For | Documentation, APIs | Campaigns, Landing | Technical specs, Data |
Recommendation¶
Primary Recommendation: Variant A (Trusted Advisor) for general use, with elements from Variant B for non-profit-specific materials.
For differentiation campaigns: Use Variant C (Bold Challenger) elements to stand out from competitors.
For security-focused content: Use Variant D (Cyber Shield) for threat protection messaging or Variant E (Sentinel Guard) for AI-powered security positioning.
For technical documentation: Use Variant F (Clean Developer) for developer-facing materials and API documentation.
For marketing campaigns: Use Variant G (Creative Clay) for memorable, approachable campaign materials.
For engineering audiences: Use Variant H (Blueprint Technical) for technical specifications, architecture diagrams, and data-heavy presentations.
Implementation Notes¶
CSS Variables Export¶
Each variant can be exported as CSS custom properties:
/* Variant A Example */
:root {
--color-primary-500: #3b82f6;
--color-primary-600: #2563eb;
--color-background-primary: #ffffff;
--color-foreground-primary: #0f172a;
--font-sans: 'Inter', system-ui, sans-serif;
--radius-md: 0.375rem;
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}
Tailwind Config Export¶
// tailwind.config.js (Variant A)
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#eff6ff',
// ... full scale
950: '#172554',
},
// ... other colors
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
borderRadius: {
sm: '0.25rem',
md: '0.375rem',
lg: '0.5rem',
},
},
},
}
Related Documents¶
- Brand Voice
- Pricing & Positioning
- Visual Identity
- Generative Prompts Framework - Parameterized token system for AI asset generation
Sources¶
Design trends and color psychology research from: - Bungalow Web Design - IT Color Palettes - Webflow - Business Color Palettes - Lounge Lizard - 2026 Color Trends - Fontfabric - Typography Trends 2025 - Shakuro - Best Fonts for Web Design - Axon Garside - B2B Website Trends 2026 - Hinge Marketing - B2B Professional Services Trends
Last Updated: February 2026 Version: 2.0 Design System Spec Builder: v2.0