Internal · Design System

Style Guide

The live design-system reference for TrustScope — every colour, type step and component in situ. Dark is the base; flip Light/Dark in the header to check both. Not linked in the nav, noindex, not in the sitemap.

Source of truth: app/globals.css and config/pillars.ts (pillar hues). Components live in components/ — change them there, not here.

01 · Colour

Palette

Two grounds per token — dark (left half of each chip) and light (right half). Brand teal deepens from #2dd4bf to teal-700 #0f766e in light mode so it clears WCAG AA as text.

#090d13

#f6f7f9

Background

--background

Page ground

#0f1620

#ffffff

Surface

--surface

Cards, header, footer

#16202c

#eceef1

Surface 2

--surface-2

Insets, code chips

#223041

#dde1e6

Border

--border

Hairlines, dividers

#e6edf3

#14181d

Foreground

--foreground

Body text

#90a1b6

#5f6975

Muted

--muted

Secondary text, captions

#2dd4bf

#0f766e

Brand

--brand

Accent, links, primary button

#14b8a6

#0d9488

Brand Strong

--brand-strong

Emphasis, hover fills

Pillar accent text · dark / light

Pillar 1 · Emerald

--pillar-text-1

#6ee7b7 · #047857

Pillar 2 · Sky

--pillar-text-2

#7dd3fc · #0369a1

Pillar 3 · Amber

--pillar-text-3

#fcd34d · #b45309

CTA gradient · dual-role (adopt ↔ maintain)

teal → amber → teal · one fixed dark ink clears AA across the sweep

02 · Type

Typography

Geist Sans for everything, Geist Mono for code, versions and tokens. Tight tracking on headings; relaxed body.

h1 · text-4xl→5xl · font-semibold · tracking-tight

Open-source trust reports.

h2 · text-3xl · font-semibold

Evidence, not a single score.

h3 · text-xl · font-semibold

Backed by the OpenSSF Scorecard

Body · text-lg · leading-relaxed · text-muted

TrustScope builds on the OpenSSF Scorecard and reports the evidence per pillar — no single aggregate number to game.

Mono · font-mono

TrustScope v0.3.0 · a1b2c3d

03 · Buttons

Buttons & CTAs

Primary is a solid brand fill with dark ink. The dual-role CTA uses the teal↔amber gradient. Ghost is a plain link; brand chips carry a ring.

Ghost linkBrand chip

04 · Surfaces

Cards & Components

Two card families: neutral surface cards and brand-tinted highlight cards. Hairline borders throughout; rounded-lg is the one radius.

Surface card

border-border · bg-surface. Default content surface.

Brand highlight

border-brand/20 · bg-brand/[0.04]. Callouts, selected states.

Surface-2 inset

bg-surface-2. Insets, code blocks, quiet panels.

1brand dotpill · uppercase

05 · Layout

Spacing & Layout

Content columns at max-w-3xl, wide grids at max-w-5xl. rounded-lg everywhere. Section rhythm in 4rem (mt-16) steps.

Container: mx-auto max-w-3xl (prose) · max-w-5xl (grids)
Section rhythm: mt-16 (4rem) between major sections
Radius: rounded-lg — one radius, no pills except tags
Border: border-border / border-border/70 hairlines
Focus: native focus-visible ring (color-scheme aware)
Selection: ::selection teal (brand @ 25%)

← Back to TrustScope