Editorial Architect
Design tokens, typography, and iconography for maxghenis.com
01
Color palette
ink #0f172a Primary text, dark backgrounds
ink-soft #334155 Secondary text
ink-muted #64748b Muted text, captions
cream #fefdf8 Primary background
cream-dark #faf9f4 Secondary background
amber #f59e0b Accent, highlights
amber-dark #d97706 Accent hover, links
Navy gradient
linear-gradient(135deg, #0f172a 0%, #1e293b 100%) Amber glow
rgba(245, 158, 11, 0.15) 02
Typography
Display
Playfair Display The quick brown fox jumps over the lazy dog.
Playfair Display, Georgia, serif Body
Source Sans 3 The quick brown fox jumps over the lazy dog.
Source Sans 3, system-ui, sans-serif Mono
JetBrains Mono const x = () => 'code';
JetBrains Mono, monospace Type scale
6xl Aa 4.5rem / 72px
5xl Aa 3.5rem / 56px
4xl Aa 2.5rem / 40px
3xl Aa 2rem / 32px
2xl Aa 1.5rem / 24px
xl Aa 1.25rem / 20px
base Aa 1rem / 16px
sm Aa 0.875rem / 14px
03
Spacing
xs 0.25rem (4px)
sm 0.5rem (8px)
md 1rem (16px)
lg 2rem (32px)
xl 4rem (64px)
2xl 8rem (128px)
04
Border radius
sm 4px
md 8px
lg 12px
xl 20px
full 9999px
05
Iconography
Custom icon set with outline and duotone variants. Icons use currentColor for easy theming.
Usage
<Icon name="chart" size={24} />
<Icon name="robot" size={24} duotone />
<Icon name="laptop" class="text-amber" /> 06
Shadows
sm
md
lg
xl