Internal · UI library

    Cobalt design system components.

    A hidden working library for charts, surfaces, buttons and patterns. Built with the wash gradients, cobalt blues and silvers used across the marketing site and docs.

    01 · Data viz

    Charts

    Recharts · cobalt palette

    Area · gradient

    Revenue vs cost

    JanFebMarAprMayJunJulAug0306090120

    Line · forecast

    Pipeline forecast

    JanFebMarAprMayJunJulAug0306090120

    Bar · phase

    Hours by phase

    AuditStrategyBuildAdoptScale0255075100

    Donut · mix

    Workload distribution

    • Automation42%
    • Analysis26%
    • Integrations18%
    • Other14%

    Sparkline · 24h

    Activity (last 24 hours)

    Wash & chart pigments

    Cobalt

    #3DB4FF

    #2E72F0

    #1B54D6

    #1A56FF

    Silver

    #E3E7ED

    #C7CCD4

    #AEB4BE

    #9097A2

    Steel

    #5A6068

    #4A4F58

    #3A3E45

    Ember

    #E07A2E

    #C9560F

    #A8440C

    Black

    #101013

    #0A0A0C

    #060606

    These pigments live inside the washes and charts only. UI surfaces stay monochrome; the five accent dots are a separate palette.

    02 · Surfaces

    Grey hierarchy

    HSL · 0 0% L

    Four near-black steps form the surface ladder. Nested containers climb the ladder; each level adds a 1px hairline border. No shadows, no tints.

    bg-base · 0%

    bg-surface · 4%

    bg-surface-2 · 7%

    bg-surface-3 · 10%

    Innermost surface. Cards, tooltips and pinned panels live here.

    bg-base

    --bg-base · L 0%

    bg-surface

    --bg-surface · L 4%

    bg-surface-2

    --bg-surface-2 · L 7%

    bg-surface-3

    --bg-surface-3 · L 10%

    Hairline borders

    border-subtle

    --border-subtle · L 10%

    border

    --border · L 15%

    border-strong

    --border-strong · L 25%

    03 · Typography

    Fonts & headings

    Two fonts · sentence case

    Two typefaces, no exceptions. Hanken Grotesk carries every display and body line. Chivo Mono is the system voice, reserved for eyebrows, pills, numerals and metadata. Headlines emphasise one keyword in italic via <em>.

    Display + body

    font-sans

    Hanken

    Grotesk · italic emphasis

    Weights 400 · 500 · letter-spacing -0.02em

    System voice

    font-mono

    CHIVO MONO

    Eyebrows · pills · numerals

    12px UPPERCASE · tracking 0.12em (0.14em on pills)

    Heading scale

    Hanken · font-medium · tracking-tightest
    H1

    A clear three-step process.

    H2

    Built to compound, not impress.

    H3

    Discovery, strategy, implementation.

    H4

    Phase one — audit and map.

    Body

    A proper look at how your business runs today — your tools, your workflows, and where your team's time is going.

    Caption

    Updated 10 Jun 2026

    Italic emphasis

    Built to compound, not impress.

    Wrap exactly one keyword in <em>. The italic carries Hanken's true italic cut. Never bold, never underline, never colour — italic alone.

    Section anatomy

    1. 01.eyebrow — Chivo Mono 12px
    2. 02H2 — Hanken medium, tracking tightest, one italic keyword
    3. 03Body — 15px / 1.55, text-text-secondary, max 640px
    4. 04CTA — single CobaltButton

    Copy rules

    Sentence case

    Built to compound, not impress.

    Built To Compound, Not Impress.

    British English

    Specialise · optimise · centre

    Specialize · optimize · center

    No em dashes

    A practical roadmap, not a deck.

    A practical roadmap — not a deck.

    One italic word

    A clear three-step process.

    A clear three-step process.

    No emoji, no hype

    Results measured against the goals we set.

    🚀 Game-changing AI results!

    Mono for numerals

    01 · 02 · 03

    1. 2. 3.

    04 · Pills

    Eyebrow pills

    Chivo Mono · 12px · 0.14em

    Pills sit above a heading or beside an avatar. Always 12px Chivo Mono, uppercase, with a 2px accent dot. One per section, sentence-case label.

    Founder noteAvailable · Jun 2026DiscoveryStrategyShippedLiveDraft010203

    Founder pill — bg-base/70, backdrop-blur, cobalt dot. Used for the hero note.

    Surface pill — bg-surface-3 + subtle hairline. Section eyebrows that need a status dot.

    Numbered pill — 28px circle, hairline border, mono numeral. Sequenced steps.

    05 · Glyphs

    Custom div glyphs

    Section & doc visuals

    Bars, dots and signal stacks built from styled divs. Use these as the visual for any section card, deliverable or process step. Lucide stays for inline UI only.

    Stacked bars

    Documents · audits

    Accent dots

    Phases · status

    Signal bars

    Outcomes · scale

    Mono dots

    Neutral lists

    Grid

    Systems · diagrams

    Ladder

    Roadmap · steps

    Pulse

    Activity · live

    Crosshair

    Focus · targets

    On light background

    Docs · exports · slides

    When the glyphs travel outside the dark site (PDFs, decks, light docs), invert the mono scale to the steel/silver pigments. Accent dots stay unchanged.

    Stacked bars

    Documents · audits

    Accent dots

    Phases · status

    Signal bars

    Outcomes · scale

    Mono dots

    Neutral lists

    Grid

    Systems · diagrams

    Ladder

    Roadmap · steps

    Pulse

    Activity · live

    Crosshair

    Focus · targets

    Primary — #0A0A0C (black/2)

    Secondary — #3A3E45 (steel/3)

    Muted — #9097A2 (silver/4)

    06 · Washes

    Cobalt wash gradients

    Canvas · seeded · noise overlay

    One gradient system across the whole brand. The CobaltWash canvas renders seeded blue, silver and ember blobs over a near-black base, then a noise overlay. Tune via seed, spread, blur, black, silver, ember.

    Default

    Hero · primary CTA

    spread wide
    blur 62 · black 0.55
    silver 0.6 · ember 0.3

    Deep night

    Quiet sections · footers

    spread tight
    blur 90 · black 0.85
    silver 0.35 · ember 0

    Silver mist

    Testimonial · founder note

    spread wide
    blur 80 · black 0.4
    silver 0.95 · ember 0

    Ember flare

    Audit · accent moments

    spread wide
    blur 70 · black 0.5
    silver 0.45 · ember 0.85

    Wild spread

    Charts · backdrops

    spread wild
    blur 100 · black 0.5
    silver 0.65 · ember 0.2

    Cobalt focus

    Single primary CTA

    spread tight
    blur 55 · black 0.45
    silver 0.3 · ember 0

    seed — any string. Same seed always renders the same wash.

    spread — tight · wide · wild. Controls blob jitter.

    black/silver/ember — 0 to 1 weight per pigment family.

    grain — 0 to 1 noise overlay opacity. Always wrap in .noise.

    07 · Icons

    Lucide · inline UI

    strokeWidth 1.75 · 14–18px

    Lucide is reserved for inline UI inside buttons, links, inputs and menus. Always strokeWidth 1.75, sized 14–18px, opacity 90, paired with text. Never as a standalone visual for a section.

    ArrowRight
    ArrowUpRight
    ChevronRight
    ChevronDown
    Check
    X
    Plus
    Minus
    Search
    Filter
    Mail
    Download
    ExternalLink
    Settings
    Clock
    Compass
    Layers
    Sparkles
    Circle

    Size scale

    14px
    16px
    18px

    Tone scale

    Primary
    Secondary
    Muted

    08 · Document

    Cover template

    A4 portrait · HTML

    A reusable document cover. Wash backdrop, logo top-left, status pill top-right, italic-emphasis headline, three-column detail row, footer meta. Pure HTML and Tailwind — drop into any export.

    CobaltEngagement brief

    Cobalt · AI consultancy

    AI roadmap,
    delivered.

    A working plan for where AI fits in your business. Audit, prioritise, build. Sequenced so the early wins fund the longer projects, measured against the goals we set on day one.

    Engagement

    4–6 weeks

    Audit through to delivery

    Format

    Hybrid

    Workshops · async · build

    Outcome

    Live system

    Documented · team trained

    Produced by Cobalt

    Prepared for

    Northwind Industries

    AI roadmap · Jun 2026

    Wash — seeded CobaltWash inside a .noise wrapper.

    Logo — top-left, 24px, opacity 95.

    Pill — top-right glass, cobalt dot.

    Detail row — three glass columns, divided by hairlines.