Rebrand visual system (September 2025)

Rebranding: visual system (September 2025)

Color System

Core palette (tokens)

• --midnight #0A0F1A · page background
• --panel #111722 · panels, nav, chips
• --text #E8EEFF · primary text on dark
• --muted #9AA6B2 · secondary text
• --accent #54D7FF · signals, data glows, small strokes
• --brandBlue #2B53FF · primary action fills
• --gold #D2B47A · rare payoff, ≤ 2% of a frame

Support neutrals

• --ink-900 #0B0F16
• --ink-800 #141A24
• --ink-700 #1C2431
• --ink-500 #3E4A59
• --ink-300 #6E7682
• --ink-100 #E1E6EE

States

• Success #3BD39D, Warning #FFB768, Error #F45B5B
• Use on text only when necessary; state badges should sit on --panel with 10 to 14% fill tints.

Usage ratios (hero)

• Background 70 to 75% --midnight
• Neutrals 20 to 25% (panels, strokes, grid)
• Accents total ≤ 5% (combined --accent + --brandBlue + --gold)
• Hard whites must be < 10% of any frame

Grade

• Apply a Gradient Map/Tritone on illustration layers:
  Shadows #070A0F → Mids #253042 → Highlights #DDE7FF

• Optional multiply wash: #0A1020 at 30 to 35% to unify.

Grid overlay

• 24 px spacing, 1 px lines, #E8EEFF at 6 to 8% opacity.
• Mask with a radial fade (70% x 70% at 60%/45%) so it “breathes” behind art.

Typography

Families

• Display Serif (headlines): Fraunces Variable (free)
  Settings: soft optical size, weight 600 to 700. Rationale: human warmth, chalk-on-paper energy without getting baroque.

• UI/Body Sans: Inter Variable
  Weights 400/500/600. Rationale: neutral, legible, Scandinavian.

• Numeric/Tech: IBM Plex Mono 400/500 for codes, small metrics.

Scale (desktop)

• H1: 64 to 72 px, Fraunces 700, tracking −1% to 0%, line-height 1.05
• H2: 40 to 48 px, Fraunces 600, LH 1.1
• Subheadline: 18 to 20 px Inter 500, LH 1.5, tracking +0.5%
• Body: 16 to 18 px Inter 400, LH 1.6
• Small: 14 px Inter 400, LH 1.5
• Numerals/labels: 12 to 14 px Plex Mono 500, LH 1.4, tracking +2%

Color & contrast

• Headlines: --text on --midnight (≥ 12.5:1 contrast)
• Sub/body: --muted for secondary copy; never drop below 4.5:1 WCAG.
• Links: Inter 500 in --accent; underline on hover only.

Illustration & Iconography

Hero illustration

• Subject: minimalist globe with meridians, longship profile, single rune mark.
• Technique: dry-brush or charcoal on black; paint highlights in, don’t fill large areas.
• Edges: feathered, not vector-clean. Keep “witness marks” of the brush.
• Accents: small cyan nodes/glows at path intersections.
• Composition: object right; copy left; negative space dominant.

Line weights (if vectorizing)

• Primary strokes 2.0 to 2.4 px @ 1x, round caps/joins.
• Cyan glow: inner stroke 2 px, outer blur 6 px at 30 to 40% opacity.

Icon set

• Monoline 1.5 px, rounded, no filled pictograms.
• Color --text at 70% for passive, --accent for active.

Prohibitions

• No coins, rockets, padlocks, or fake “matrix rain.”
• No pure white fills; highlights should carry texture.

Export

• Deliver both painterly PNG (with grain) and a clean SVG line layer for dev compositing. Align to a 24 px grid.

Motion & Interaction

Cadence

• Problem/atmosphere frames: 12 fps posterize, micro-drift 0.2 to 0.3 px/s.
• Solution/CTA moment: snap to 24/30 fps, stabilize camera.

Hero load

1. Grid fades in (300 ms, opacity 0 → 8%).
2. Globe arcs draw on (1.6 to 2.0 s, easeInOut) with cyan nodes pulsing once (900 ms).
3. Longship keel and sail sketch on (1.2 to 1.6 s).
4. Headline rises 8 px, 300 ms, 20 ms stagger.
5. CTA glow ramps 200 ms on hover; focus ring 2 px --accent.

Hovers

• Primary button: lift −2 px; shadow 0 10px 24px rgba(43,83,255,0.35); internal sheen linear-gradient(180deg, #2B53FF 0%, #2847E6 100%).
• Secondary button: background white/4%, border white/20% → white/28% on hover.

Sound (optional)

• Low room-tone bed, 60 to 120 Hz roll-off; one quiet “tick” per node pulse. No cinematic whooshes.

Components (Hero)

Primary CTA

• Fill --brandBlue; text #FFFFFF; radius 16 to 20 px; padding 14/20; font Inter 500 15 to 16 px.
• Focus: 2 px outline --accent outside border; maintain ≥ 3:1 contrast in all states.

Secondary CTA

• Border 1 px #FFFFFF26; text --text; bg #FFFFFF0A; same radius/padding as primary.

Feature chips

• Radius 9999; bg #FFFFFF0C; border 1 px #FFFFFF1A; text Inter 500 12 to 13 px --muted.

Safe area

• Max-width container 1200 to 1280 px; 64 px gutters desktop; 20 to 24 px mobile.
• Hero height 680 to 760 px desktop; 520 to 580 px tablet; content first on mobile.

Texture, Grain, and Vignette

• Paper grain overlay: 8 to 12% opacity, blend Overlay or Soft Light.
• Vignette: −20 to −30 exposure at edges, 40 to 60% feather.
• Add subtle gate-weave jitter (±0.5 px) to the illustration group only.

Accessibility

• Minimum body size 16 px.
• Interactive targets ≥ 44×44 px.
• All decorative SVGs marked aria-hidden="true".
• Provide alt for the hero illustration: “Stylized globe and longship representing global settlement rails.”

Layout & Spacing Tokens

• Base spacing unit 8 px.
• Tokens: s-1=4, s-2=8, s-3=12, s-4=16, s-5=24, s-6=32, s-8=48, s-10=80.
• Vertical rhythm: 8 px baseline; text blocks align to baseline grid; chips tuck to s-4 from CTAs.

Figma/CSS Tokens (ready to paste)

:root{
  --midnight:#0A0F1A; --panel:#111722;
  --text:#E8EEFF; --muted:#9AA6B2;
  --accent:#54D7FF; --brandBlue:#2B53FF; --gold:#D2B47A;
  --ink-900:#0B0F16; --ink-800:#141A24; --ink-700:#1C2431;
  --ink-500:#3E4A59; --ink-300:#6E7682; --ink-100:#E1E6EE;
  --radius-lg:20px; --radius-pill:9999px;
  --shadow-cta:0 10px 24px rgba(43,83,255,.35);
}

Figma styles

• Color styles: “BG/Midnight”, “Text/Primary”, “Accent/Cyan”, “Action/BrandBlue”, “Accent/Gold”.
• Text styles: “H1/Fraunces/700/64”, “Sub/Inter/500/20”, “Body/Inter/400/16”, “Label/Mono/12”.
• Effects: “Grain/12%”, “Vignette/−25”, “Grid/24px/6%”.

Art Direction Rules of Thumb

• Leave black to do most of the storytelling.
• Use cyan only where data flows or paths connect.
• The rune/longship appears once in a frame; never as wallpaper.
• If anything looks perfectly clean, roughen the edge by 1 to 2 px and add paper tooth.

Deliverables (for the designer)

1. Hero illustration source in layered PSD/Procreate with separate: paper, strokes, grid, glow nodes, ship/globe linework.
2. Clean SVG of linework plus a transparent PNG of texture/grade.
3. Figma component for hero with variants (with/without chips, left/right art).
4. Exported 1×/2× assets, max 1800 px width, ≤ 300 KB hero layer if possible.
5. AE file (if animating) with posterize time and grid mask.

That’s the system. Follow it and the site looks like finance that actually knows what a balance sheet is, not a casino with a CSS budget.