Spectr Design System Reference

Premium Dark-First Design System

Spectr Design System

Sharp, precise, and electrifying — tokens and components built for serious builders who demand clarity, efficiency, and purposeful design.

17 Color tokens 21 Type styles 2 Shadow levels 1 Border radius (sharp) Inter + JetBrains Mono

Foundation

Color Tokens

The full color palette extracted from Spectr's design system, including brand primaries, interactive states, neutrals, and surfaces.

Primary

#894DEF

CTA fills · Active states · Brand accent

Canvas

#0D0D0D

Page background · Primary container

Surface

#171717

Cards · Panels · Elevated content

On Primary

#FAFAFA

Headings · Primary text · Button text

Body

#B8B8B8

Body copy · Secondary text

Hairline

#2E2E2E

Borders · Dividers · Edge definitions

Neutral-1

#6B6B6B

Tertiary text · Disabled · Muted

Neutral-3

#262626

Secondary surface · Border fills

Accent-1

#A273F2

Decorative · No functional role

Accent-5

#4ADE80

Decorative · Success indication

Typography

Type Scale

Inter and JetBrains Mono drive Spectr's voice — aggressive tracking on display sizes, weight-based hierarchy, and authoritative presence for technical precision.

Primary Inter UI · Headings · Body · Buttons

Monospace JetBrains Mono Code · Token values · Technical text

Display XXL Build Matters 288px · 900 · −11.52px

Display XL Build Matters 200px · 900 · −8px

Display LG Build what matters 132px · 800 · −2.64px

Display MD The quick brown fox 72px · 800 · −2.52px

Heading XL The quick brown fox 30px · 700 · −0.6px

Heading LG The quick brown fox jumps 24px · 700 · −0.48px

Body Lg The quick brown fox jumps over 18px · 600 · 1.56

Body MD The quick brown fox jumps over the lazy dog 16px · 500 · 1.6

Body SM The quick brown fox jumps over the lazy dog 15px · 500 · 1.55

Body XS The quick brown fox jumps over the lazy dog 14px · 500 · 1.43

Code MD const token = value 13px · 600 · +1.82px

Layout

Spacing & Shapes

4px base grid — every spacing token is a multiple of 4. All components use sharp corners (0px radius) for rectilinear, modern precision.

Spacing Scale

4px xxs

8px xs

12px sm

16px md

24px lg

28px xl

32px xxl

48px band

Border Radius

None 0px

Border Widths

Thin 1px

Medium 2px

Opacity

Full 100%

Disabled 70%

Overlay 36%

Z-index / Layering

Base 1

Dropdown 10

Modal 1000

Elevation

Depth & Surfaces

Three dark surface levels create spatial hierarchy. Canvas (L0) → Surface (L1) → Raised (L2) — each step lifts from the base plane through color blocking.

Canvas

Page background — the canvas everything sits on

L0 · #0D0D0D

Surface

Cards · panels · primary containers

L1 · #171717

Raised

Secondary surfaces · nested containers

L2 · #262626

Canvas #0D0D0D

Surface #171717

Raised #262626

Primary #894DEF

Shadows

Level 0 Flat · no elevation

Level 1 Floating UI · Dropdowns · Modals

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — colors, radii, shadows, and states.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #894DEF bg · #FAFAFA text · 0px radius · 0px 28px padding · 56px height · 2px border. Secondary: #262626 bg · #6B6B6B border · 0px radius. Ghost: transparent bg · no border.

Text Input

Form control — Default and Focused states

.input

Default: #171717 bg · #2E2E2E border · 0px radius · 32px height. Focus: #894DEF border · 2px · sharp corners.

Card

Content container — elevated surface with subtle shadow

.card

Component name

A brief description of this component. Sharp corners and purposeful hierarchy.

#262626 bg · #2E2E2E border · 0px radius · L1 shadow. Title: 14px/600/#FAFAFA. Body: 13px/#B8B8B8. CTA: primary purple button.

Badges

Status indicators — Success, Error, Info

.badge

Success Error Info

12px/600 · 4px 8px padding · 0px radius. Success: #4ADE80. Error: #CF222E. Info: #894DEF.

Guidelines

Do's & Don'ts

Principles for consistent application of the Spectr design language across surfaces and contexts.

Do — Embrace

Use Primary Purple (#894DEF) as the sole CTA and brand accent
Maintain the three-level dark surface hierarchy (Canvas→Surface→Raised)
Apply sharp corners (0px radius) on all components—it is core identity
Use aggressive negative tracking on display sizes for visual punch
Rely on color blocking for depth; reserve shadows for floating UI only
Space sections generously with the band unit (48px) and above

Don't — Avoid

Avoid rounded corners or pill-shaped buttons; the system is sharp and modern
Do not layer multiple shadows for depth; use color blocking instead
Never invent colors outside the measured palette; stick to the 17 core tokens
Avoid positive (rightward) letter-spacing on display headlines
Do not use decorative accents (Accent-1 through Accent-7) for functional UI
Never reduce line-height below 1.0 on body text; legibility is measured

spectr.pm

Preview