Brand & press kit

One brand. Every surface.

Everything you need to write about, link to, or design alongside Spektral — logos, colours, typography, and voice. Use them as-is; no permission needed for editorial coverage.

Download full kit (.zip · 10 MB)Open guidelines ↗
01 · The brand

In one paragraph

Spektral is the design-system workspace where teams describe intent and ship governed, accessible components. The visual language iscool paper, deep navy: light layouts set in Bricolage Grotesque, one Signal Coral (#ff6f59) action per view, pill buttons, soft navy-tinted shadows, and deep-navy "forge" panels where generation visibly happens. Space Mono is the machine's voice. The signature mark is the spectrum arc — nested quarter-rings in navy, teal, and coral. Warm intent, cool system.

02 · Logos

The spectrum arc

SVG only — they scale to any size and stay crisp. Right-click any logo or use the download button to grab the file.

Wordmark — light surfaces — Spektral

Wordmark — light surfaces

Arc mark + navy logotype. The default lockup.

wordmark-light-bg.svg
SVG ↓
Wordmark — dark surfaces — Spektral

Wordmark — dark surfaces

White logotype; the outer ring swaps to Blue Bright so it reads on navy.

wordmark-dark-bg.svg
SVG ↓
Icon — Spektral

Icon

The spectrum arc alone — favicons, avatars, small sizes.

icon.svg
SVG ↓
Icon — dark surfaces — Spektral

Icon — dark surfaces

Blue outer ring for navy and other dark backgrounds.

icon-dark-bg.svg
SVG ↓
Monogram — navy — Spektral

Monogram — navy

Single-colour arc for light surfaces, stamps, and embossing.

icon-mono-navy.svg
SVG ↓
Monogram — white — Spektral

Monogram — white

Single-colour arc for dark surfaces and watermarks.

icon-mono-white.svg
SVG ↓
Clear space

Leave whitespace around the lockup equal to the height of the inner coral disk — on every side. Don't crowd the mark with copy or other logos.

Minimum size

The wordmark renders cleanly down to 140px wide. Below that, switch to the arc icon on its own.

03 · Colour

Cool paper, deep navy, one coral action

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

Brand core

Signal Coral

#ff6f59

Primary accent. CTAs, kickers, the inner arc. One per view.

Coral Deep

#f04a2e

Pressed states and the CTA glow shadow.

Ink Navy

#0a1425

Text on light and the forge-panel background.

Spektral Cyan

#16b8cc

System accent; the middle arc band.

Cyan Bright

#1ad6e8

“Live” glow — status dots and stamps, on navy only.

Amber

#ffb23d

Categorical accent — leaders, the spec stage.

Blue Bright

#2f7fd6

Engineering accent; dark-surface logo ring.

Blue

#1f5fa6

Third arc-burst band, deep engineering accent.

Surfaces & ink

Paper

#f4f6fa

Default page background — never pure white.

Paper 2

#ffffff

Cards, menus, elevated panels.

Paper 3

#e9edf4

Hover fills, inset wells.

Line

#d7deea

Borders, hairlines, dividers.

Ink Soft

#45566c

Body copy on light surfaces.

Ink Mute

#8493a8

Captions, meta, fine print.

Full palette sheet → palette.svg

04 · 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 · one coral word

Describe intent. Ship real components.

Kicker — Space Mono 700 · 0.2em tracking · coral dashThe 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 400spektral.generate · resolving design tokens…
05 · Usage

Do / Don't

Do

  • ✓Start sections with the coral-dash kicker — 30px coral bar + Space Mono caps.
  • ✓Keep one coral CTA per view; use ghost or navy buttons for the rest.
  • ✓Put generation and system output on navy panels; reading and comparison on paper.
  • ✓Crop an ArcBurst into the corner of any large panel that feels bare.
  • ✓Write headlines in sentence case with one coral accent word.

Don't

  • ✕Don't set headlines in ALL CAPS — caps belong to Space Mono labels only.
  • ✕Don't use Cyan Bright on light surfaces; it's a navy-only glow colour.
  • ✕Don't use sharp corners, black drop 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 “10x”, 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 truthgenerategovernedconformanceauditaccessibleplatformworkspacereviewship

Words to avoid

magiceffortlessrevolutionary10xsuperchargeunleashblazingseamless🚀
07 · Wallpapers

The spectrum arc, desk-sized

The ArcBurst cropped into the corner, with hairline rings carrying its rhythm across the field. Rendered at native pixel size — set them to Fill Screen, no scaling needed.

Forge

Ink Navy with the Navy 3 glow top-right, coral heat behind the arc, cyan whisper bottom-left.

MBP 14" ↓MBP 16" ↓21:9 ↓32:9 ↓

Paper

The default light posture — Paper with a white bloom top-right and the same spectrum sweep.

MBP 14" ↓MBP 16" ↓21:9 ↓32:9 ↓

The 21:9 and 32:9 compositions widen the arc so the field doesn't read as dead space. On macOS, turn off “Show as tint colour” in Wallpaper settings or the arc gets washed out.

Writing about Spektral?

Need a quote, a custom asset, or context on a story? Email us — a real human reads it.

support@spektral.designDownload kit