Design system

Brand & UI guidelines

Internal reference for consistent, premium Blue Sea experiences.

Voice

Calm, precise, institutional. Prefer “indicated rate” over “guaranteed profit”. Lead with the brand name. Avoid hype, fake counters, and generic crypto slogans.

Typography

Syne for brand and headings. Figtree for UI body. IBM Plex Mono for labels and metadata.

Motion

Use rise-in on hero text only (2–3 staggered elements). Respect prefers-reduced-motion. No spinning earth metaphors.

Colour

Ink #081820
Sea #0c3344
Tide #1a5f78
Accent brass #b8956c
Foam #e7f0f3

Components

Buttons, forms, tables, alerts, badges, accordion, calculator, timeline, empty/loading states are defined in css/bluesea-ds.css with bs- prefixes.

Primary Accent Ghost Badge High risk
Alert example.