DivaFans · Design system v0.1
Charcoal first. Gold for the brand, pink for personality.
The rules that make every DivaFans screen feel like one product. Tokens live in src/styles/tokens.css; components in src/components/ui.
Principles
Charcoal carries the page
Black and charcoal dominate. Warm white carries the words. Fill less; highlight what matters.
Gold and pink, sparingly
Gold marks the primary action, the active place and VIP. Pink adds personality to one word or detail. Never every border.
Editorial outside, efficient inside
Marketing pages use serif display and generous space. Dashboards, forms and messages favour clear sans-serif headings and density.
One hand
Every action reachable by thumb. 44px minimum targets. Sheets over modals on phones.
Motion with meaning
Arrivals ease out, state changes ease in-out, drags use springs. All of it yields to reduced-motion.
Honest privacy
Promise what we can enforce: server-side entitlements, signed links. Never “screenshot-proof”.
Brand marks
Full logo. The approved artwork, on pure black, with its empty margin trimmed. Use it at 88px tall or more: footers, sign-in screens, splash moments.
Monogram + wordmark. The DF monogram is cropped from the logo; headers pair it with the Bodoni text wordmark so the name stays readable. Both art files sit on black and use logo-art.
Colour
Ink
#050505
--mk-ink
Page background. Most of every screen.
1.0:1 on Ink
Ink 2
#121217
--mk-ink-2
Raised surface: alternating sections, cards.
1.1:1 on Ink
Ink 3
#1a1921
--mk-ink-3
Elevated surface: inputs, menus, sheets.
1.2:1 on Ink
Ink 4
#24232c
--mk-ink-4
Hover and pressed states on elevated surfaces.
1.3:1 on Ink
Gold
#d4af37
--mk-gold
The brand: primary action, active place, VIP.
9.7:1 on Ink
Soft gold
#f5d58a
--mk-gold-soft
Hover, focus rings, highlighted words.
14.3:1 on Ink
Muted gold
#a88b45
--mk-gold-muted
Quiet ornament only.
6.3:1 on Ink
Pink
#ff2d96
--mk-pink
Personality: a highlighted word, a sent message, a small accent.
5.9:1 on Ink
Soft pink
#ff8bc8
--mk-pink-soft
Small pink text and hover on pink.
9.5:1 on Ink
Ivory
#f8f5f0
--mk-ivory
Primary text.
18.7:1 on Ink
Stone
#b9b4c0
--mk-stone
Secondary text.
10.0:1 on Ink
Ash
#948f9c
--mk-ash
Meta text, captions (AA minimum).
6.5:1 on Ink
Metal — text wordmark only
Typography
Display
Bodoni Moda · 44 → 80 · −2% · hero and section titles only
A closer connection.
Title
Bodoni Moda · 28–40
A closer connection.
Heading
Jost 500 · 17–20 · cards, dashboards
A closer connection.
Body L
Jost 400 · 17 / 1.65
A closer connection.
Body
Jost 400 · 14–15 / 1.6
A closer connection.
Eyebrow
Jost 500 · 12 · +22% · caps
Creator memberships
Motion
Arrival
--mk-ease-out · 800ms
State change
--mk-ease-in-out · 520ms
Drag / throw
spring 260 / 32
Durations: press 140 · hover 260 · sheet 520 · reveal 900 · hero 1400ms. Reduced motion removes movement; opacity fades remain.
Components
Button
One gold button per view. Outline for secondary; quiet for tertiary.
Field
Underline inputs. Label lights gold on focus; errors announce via role=alert.
Shown to creators. Change it anytime.
Segmented
A radiogroup with a gliding indicator. Arrow keys move selection.
Bottom sheet
Drag to dismiss, Escape to close, focus is trapped and restored.
Loading
Champagne shimmer at 7s — calm, never a grey flash. Static under reduced motion.
Imagery
Creators without a photo get an abstract cover in the palette — never a figure or a made-up person. Arched plates for people, rounded rectangles for content. <Portrait src> swaps in a real photo without layout changes.