smk-branding/palette.md

SMK Family — Color Palette

Dark-first, warm, family-friendly. Deep charcoal/navy grounds with warm amber & coral accents. No harsh neon, no cold corporate blues.

Semantic tokens

Token	Hex	Usage
smk-bg	#14161B	App background (deep warm charcoal)
smk-bg-alt	#1A1E28	Raised background / panels
smk-surface	#232838	Cards, nav, dialogs
smk-surface-2	#2A3040	Hover, input fills
smk-border	#333A4A	Hairlines, dividers
smk-text	#F5F0E6	Primary text (warm off-white)
smk-text-dim	#B9B2A6	Secondary text (warm taupe)
smk-text-faint	#8A8579	Muted / disabled text
smk-amber	#F2A65A	Primary accent — friendly warmth
smk-amber-dark	#B35A2E	Dark amber — accents on light surfaces, hover states
smk-coral	#E8755D	Secondary accent — sunset energy
smk-sage	#A3C585	Success / positive (soft green)
smk-rose	#D98A8A	Warning / destructive (warm, not red-alarm)
smk-cream	#FBF6EC	Icon fills (heart/sparkle), warm highlight
smk-white-soft	rgba(255,255,255,0.14) / #FFFFFF @ 14% opacity	Subtle inner highlight ring on the badge

Gradients

• Primary logo gradient: #F2A65A (amber) → #E8755D (coral), top-left → bottom-right.
• Background wash: #14161B → #1A1E28 → #232838, with a low-opacity amber radial glow top-right and coral blobs at low opacity for depth.

Dark-first rules

1. Default surface is always dark. Light mode is an explicit opt-in, never default.
2. Never use pure black (#000000) — #14161B reads softer and keeps warm undertone.
3. Never use pure white — #F5F0E6 keeps text warm and reduces glare.
4. Accent usage: amber for interactive/primary, coral for highlights/brand moments, sage for success states only.
5. Contrast: smk-text on smk-bg = ~12.4:1. smk-text-dim on smk-bg = ~6.3:1 (AA OK for body).
6. 3:1 minimum contrast for large text / UI components with accents.

Accessibility

• Don't rely on color alone — pair amber with icons/shapes.
• Focus rings: 2px smk-amber outline with 2px smk-bg gap.