Spektral Brand Guidelines · v1

Warm intent.
Cool system.

The single source of truth for everything visual and verbal about Spektral — the design-system workspace where teams describe intent and ship governed, accessible components.

01 · The mark

The spectrum arc

Nested quarter-rings — navy, teal, coral — reading from structure to signal. Pair with the lowercase logotype, or run the icon alone at small sizes. On dark surfaces the outer ring swaps to Blue Bright #2f7fd6 so it doesn't sink.

Spektral wordmark on light

Wordmark — light surfaces

logos/wordmark-light-bg.svg
Spektral wordmark on dark

Wordmark — dark surfaces

logos/wordmark-dark-bg.svg
Spektral icon

Icon

logos/icon.svg · icon-dark-bg.svg
Spektral monochrome icon

Monochrome icon

logos/icon-mono-navy.svg · icon-mono-white.svg
02 · Colour

Cool paper, deep navy, one coral action

Light surfaces are the default posture. Navy panels are where the work happens. Coral marks the single most important action in view — everything else asking to be coral isn't.

Signal Coral#ff6f59CTAs, kickers, the inner arc. One per view.
Coral Deep#f04a2ePressed states, CTA glow shadows.
Ink Navy#0a1425Text on light and the forge-panel background.
Spektral Cyan#16b8ccSystem accent; middle arc band.
Cyan Bright#1ad6e8"Live" glow — on navy only.
Amber#ffb23dCategorical accent (leaders, spec stage).
Blue Bright#2f7fd6Engineering accent; dark-bg logo ring.
Paper#f4f6faPage background — never pure white.
Ink Soft#45566cBody copy on light surfaces.
03 · Typography

Three faces, three jobs

Bricolage Grotesque for headlines, Archivo for everything human, Space Mono whenever the system speaks. Headlines are sentence case — caps belong to mono labels only.

Hero — Bricolage Grotesque 800 · -0.03em · sentence case · one coral word
Describe intent. Ship real components.
Kicker — Space Mono 700 · 0.2em · uppercase · coral dash The workflow
Lead — Archivo 500 · 20px / 1.5

Specs, tokens, code, stories, and audits — generated from one source of truth and reviewed by the whole team.

System caption — Space Mono 400 · 12px spektral.generate · resolving design tokens…
04 · Surfaces & components

Layered paper and the navy forge

Pill buttons, 18–28px radii, navy-tinted shadows, hover lifts. Generation and system output live on navy; reading and comparison live on paper.

Request Early Access → Watch the demo Read the docs one coral per view
Spektral.generate

The forge panel

Deep-navy radial glow (Navy 3 at the top-right into Ink Navy), white-alpha cards, cyan liveness, and an ArcBurst cropped into the corner.

Spec-bound · reviewed · ready to ship
05 · Usage

Do / Don't

Do

  • ✓ Start sections with the coral-dash mono kicker.
  • ✓ Keep one coral CTA per view; ghost/navy for the rest.
  • ✓ Anchor an ArcBurst to a corner of bare panels, cropped by overflow.
  • ✓ Use color-mix tints of the five accents for chips and icon wells.
  • ✓ Write headlines in sentence case with one coral word.

Don't

  • ✕ Don't set headlines in caps or body copy in coral.
  • ✕ Don't use Cyan Bright on light surfaces — it's a navy-only glow.
  • ✕ Don't use sharp corners, black shadows, or a fourth typeface.
  • ✕ Don't recolour the mark beyond the sanctioned dark-surface ring swap.
  • ✕ Don't let AI hype into the copy — no "magic", no 🚀.
06 · Voice

Plain, precise, team-first

A senior design-systems engineer presenting to the whole team. The spec is the hero; nobody gets replaced.

"Spektral is the design-system workspace where teams describe intent and ship governed, accessible components — specs, tokens, code, and audits from one source of truth."

The one-liner

Words to use

speccontracttokensource of truthgovernedconformanceauditaccessibleplatformworkspacereviewship

Words to avoid

magiceffortlessrevolutionary10xsuperchargeunleashblazingseamless🚀