Kit · Foundations

Foundations

Every visual decision on trentdigital.com resolves to one of the tokens on this page. Each token carries its usage doctrine, so sessions stop re-deciding semantics per file. Specimens below render on every surface the system allows.

Dark is the default and the only theme at launch. The token layer is theme-capable: a future light theme lands as a data-theme token block that redefines the semantic tokens with zero component refactor — which is why components consume semantic tokens only, never raw palette values.

Backgrounds — the rule of three

Guidance, not law: the system's three surfaces are Black, Chalk, and Mist — no ad-hoc greys — and how a page composes them (all-black, mixed, light sections) is a per-page design decision. Components must render correctly on every surface they support. Cobalt stays a primary color, not a background. Black is the canvas: content sits borderless on it; never stack panels or cards on the canvas.

The digital canvas — x-ray imagery merges seamlessly; content sits borderless on it.Black
#000000 · surface-page (canvas)

Majority surface. Editorial, docs, cards.Chalk
#FFFFFF · surface-light

Soft canvas. Long pages where chalk cards need to sit on something.Mist
#F5F5F5 · surface-mist

On Black canvas

Palette

One hex per color; no drift. Base palette first, derived tints (surfaces and lines only) second.

Black
#000000 · --color-black

The digital canvas. X-ray imagery merges with it; content sits borderless on it.

Chalk
#FFFFFF · --color-chalk

Primary text on dark; the light surface and the card color.

Mist
#F5F5F5 · --color-mist

The off-white canvas for long light pages; chalk cards sit on it.

Cobalt
#050E3D · --color-cobalt

Headings on light and brand moments. Never a background on trent.digital.

Aqua
#00FBF0 · --color-aqua

The primary accent: links, focus ring, the wordmark period on dark.

Coral
#FF557E · --color-coral

Expressive accent and danger. One hex everywhere — no pink drift.

Marigold
#FFB13C · --color-marigold

Warm accent for stats and highlights.

Seaglass
#BFDDDB · --color-seaglass

Soft accent for quiet tints on light surfaces.

Slate
#615B56 · --color-slate

Secondary text on light surfaces.

Ink
#1D1D1D · --color-ink

Body copy on light surfaces only. Never a surface or panel color.

Black raised
#111111 · --color-black-raised

Dialogs over scrim only — never a section background.

Chalk dim
rgba(255,255,255,.72) · --color-chalk-dim

Secondary text on dark.

Chalk faint
rgba(255,255,255,.44) · --color-chalk-faint

Muted text on dark: captions, metadata.

Line dark
rgba(255,255,255,.16) · --color-line-dark

Hairline dividers on dark surfaces.

Line light
rgba(5,14,61,.16) · --color-line-light

Hairline dividers on light surfaces.

Type scale

Display face PP Telegraf (the true brand face) at headline weight 400; body Inter. Headlines sentence case, eyebrows ALL CAPS letterspaced. The pack ships no 500/600 cuts: display-medium maps to 400 and subhead(600) maps to 700 — Bold stands in pending a possible SemiBold license; never faux weights.

Hero · Ultralight 200 (specimen cut) · --text-hero

Transform and accelerate.

Hero · --text-hero

Transform and accelerate.

H1 · --text-h1

Marketing, brand, and strategy

H2 · --text-h2

Build trust and stand out

H3 · --text-h3

Command your market

Lead · --text-lead

We're changing all of that.

Body · --text-body

Enhance your brand's reputation and make a lasting impression on your audience.

Small · --text-small

From strategy through execution.

Caption · --text-caption

OUR VISION

Spacing scale

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-5

24px

--space-6

32px

--space-7

48px

--space-8

64px

--space-9

96px

--space-10

128px

Container: 1280px max width, 24px gutters. These twelve values are the only rhythm the site uses.

Radii, borders, effects, motion

Rectilinear system: structure square, inputs 2px, media 8px. Depth comes from surface steps, not shadows.

radius-none · 0 · structure

radius-sm · 2px · inputs, buttons

radius-media · 8px · media only

surface-raised + shadow-dialog · dialogs over scrim only

1px hairline divider — --border-hairline

border-frame · 2px currentColormotion: --dur-fast 120ms · --dur-base 200ms · --ease-brand cubic-bezier(.4,0,.2,1) · no bounce

protect-gradient under text over imagery

Focus ring

Tab through: every interactive element shows the aqua --focus-ring, on every surface. Removing it without a visible replacement is a defect.

Text link ↗

On Chalk

Palette

One hex per color; no drift. Base palette first, derived tints (surfaces and lines only) second.

Black
#000000 · --color-black

The digital canvas. X-ray imagery merges with it; content sits borderless on it.

Chalk
#FFFFFF · --color-chalk

Primary text on dark; the light surface and the card color.

Mist
#F5F5F5 · --color-mist

The off-white canvas for long light pages; chalk cards sit on it.

Cobalt
#050E3D · --color-cobalt

Headings on light and brand moments. Never a background on trent.digital.

Aqua
#00FBF0 · --color-aqua

The primary accent: links, focus ring, the wordmark period on dark.

Coral
#FF557E · --color-coral

Expressive accent and danger. One hex everywhere — no pink drift.

Marigold
#FFB13C · --color-marigold

Warm accent for stats and highlights.

Seaglass
#BFDDDB · --color-seaglass

Soft accent for quiet tints on light surfaces.

Slate
#615B56 · --color-slate

Secondary text on light surfaces.

Ink
#1D1D1D · --color-ink

Body copy on light surfaces only. Never a surface or panel color.

Black raised
#111111 · --color-black-raised

Dialogs over scrim only — never a section background.

Chalk dim
rgba(255,255,255,.72) · --color-chalk-dim

Secondary text on dark.

Chalk faint
rgba(255,255,255,.44) · --color-chalk-faint

Muted text on dark: captions, metadata.

Line dark
rgba(255,255,255,.16) · --color-line-dark

Hairline dividers on dark surfaces.

Line light
rgba(5,14,61,.16) · --color-line-light

Hairline dividers on light surfaces.

Type scale

Hero · Ultralight 200 (specimen cut) · --text-hero

Transform and accelerate.

Hero · --text-hero

Transform and accelerate.

H1 · --text-h1

Marketing, brand, and strategy

H2 · --text-h2

Build trust and stand out

H3 · --text-h3

Command your market

Lead · --text-lead

We're changing all of that.

Body · --text-body

Enhance your brand's reputation and make a lasting impression on your audience.

Small · --text-small

From strategy through execution.

Caption · --text-caption

OUR VISION

Spacing scale

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-5

24px

--space-6

32px

--space-7

48px

--space-8

64px

--space-9

96px

--space-10

128px

Container: 1280px max width, 24px gutters. These twelve values are the only rhythm the site uses.

Radii, borders, effects, motion

Rectilinear system: structure square, inputs 2px, media 8px. Depth comes from surface steps, not shadows.

radius-none · 0 · structure

radius-sm · 2px · inputs, buttons

radius-media · 8px · media only

surface-raised + shadow-dialog · dialogs over scrim only

1px hairline divider — --border-hairline-light

border-frame · 2px currentColormotion: --dur-fast 120ms · --dur-base 200ms · --ease-brand cubic-bezier(.4,0,.2,1) · no bounce

protect-gradient under text over imagery

Focus ring

Tab through: every interactive element shows the aqua --focus-ring, on every surface. Removing it without a visible replacement is a defect.

Text link ↗

On Mist

Palette

One hex per color; no drift. Base palette first, derived tints (surfaces and lines only) second.

Black
#000000 · --color-black

The digital canvas. X-ray imagery merges with it; content sits borderless on it.

Chalk
#FFFFFF · --color-chalk

Primary text on dark; the light surface and the card color.

Mist
#F5F5F5 · --color-mist

The off-white canvas for long light pages; chalk cards sit on it.

Cobalt
#050E3D · --color-cobalt

Headings on light and brand moments. Never a background on trent.digital.

Aqua
#00FBF0 · --color-aqua

The primary accent: links, focus ring, the wordmark period on dark.

Coral
#FF557E · --color-coral

Expressive accent and danger. One hex everywhere — no pink drift.

Marigold
#FFB13C · --color-marigold

Warm accent for stats and highlights.

Seaglass
#BFDDDB · --color-seaglass

Soft accent for quiet tints on light surfaces.

Slate
#615B56 · --color-slate

Secondary text on light surfaces.

Ink
#1D1D1D · --color-ink

Body copy on light surfaces only. Never a surface or panel color.

Black raised
#111111 · --color-black-raised

Dialogs over scrim only — never a section background.

Chalk dim
rgba(255,255,255,.72) · --color-chalk-dim

Secondary text on dark.

Chalk faint
rgba(255,255,255,.44) · --color-chalk-faint

Muted text on dark: captions, metadata.

Line dark
rgba(255,255,255,.16) · --color-line-dark

Hairline dividers on dark surfaces.

Line light
rgba(5,14,61,.16) · --color-line-light

Hairline dividers on light surfaces.

Type scale

Hero · Ultralight 200 (specimen cut) · --text-hero

Transform and accelerate.

Hero · --text-hero

Transform and accelerate.

H1 · --text-h1

Marketing, brand, and strategy

H2 · --text-h2

Build trust and stand out

H3 · --text-h3

Command your market

Lead · --text-lead

We're changing all of that.

Body · --text-body

Enhance your brand's reputation and make a lasting impression on your audience.

Small · --text-small

From strategy through execution.

Caption · --text-caption

OUR VISION

Spacing scale

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-5

24px

--space-6

32px

--space-7

48px

--space-8

64px

--space-9

96px

--space-10

128px

Container: 1280px max width, 24px gutters. These twelve values are the only rhythm the site uses.

Radii, borders, effects, motion

Rectilinear system: structure square, inputs 2px, media 8px. Depth comes from surface steps, not shadows.

radius-none · 0 · structure

radius-sm · 2px · inputs, buttons

radius-media · 8px · media only

surface-raised + shadow-dialog · dialogs over scrim only

1px hairline divider — --border-hairline-light

border-frame · 2px currentColormotion: --dur-fast 120ms · --dur-base 200ms · --ease-brand cubic-bezier(.4,0,.2,1) · no bounce

protect-gradient under text over imagery

Focus ring

Tab through: every interactive element shows the aqua --focus-ring, on every surface. Removing it without a visible replacement is a defect.

Text link ↗

App extensions — pending upstream adoption

Vocabulary gaps the kit surfaced, minted only from existing palette values and held in a labeled block in tokens.css until Claude Design adopts them: the muted text tier on light surfaces and the solid primary button fills.

Default--button-fill

Hover--button-fill-hover

Pressed--button-fill-pressed

Muted text on Chalk — captions, metadata.

--text-muted-on-light

Muted text on Mist — captions, metadata.

--text-muted-on-light

Token doctrine

The whole vocabulary, one line of doctrine each. No second name for the same role, ever.

Surfaces — the background rule of three

--surface-page black: The dark canvas. Sections sit directly on it — never stack panels or cards on the canvas.
--surface-light chalk: Light sections: editorial, docs, forms.
--surface-mist mist: Soft canvas for long light pages where chalk cards need something to sit on.
--surface-card chalk: The card color. Cards are Chalk on Mist — never on the black canvas.
--surface-raised black raised: Dialogs over scrim only.

Text

--text-primary chalk: Default text on dark.
--text-secondary chalk dim: Supporting text on dark.
--text-muted chalk faint: Captions and metadata on dark.
--text-on-light cobalt: Headings on Chalk and Mist.
--text-body-on-light ink: Body copy on Chalk and Mist.

Accents

--accent-primary aqua: Links, focus, the wordmark period on dark. The identity color.
--accent-highlight aqua: Inline highlights. Same aqua — never a second highlight color.
--accent-warm marigold: Stats and warm moments.
--accent-expressive coral: Expressive moments; the wordmark dot on light.
--accent-soft seaglass: Quiet tints on light surfaces.

Borders, focus, feedback

--border-dark line dark: Hairlines on dark. 1px, never heavier.
--border-light line light: Hairlines on light. 1px, never heavier.
--focus-ring aqua: Visible keyboard focus on every interactive element. Never removed without replacement.
--success aqua: Form success feedback only.
--danger coral: Form error feedback only.

Type

--font-display PP Telegraf: Headlines and the wordmark. The true brand face, self-hosted via next/font; system-ui fallback.
--font-body Inter: Everything that is not a headline. Loaded via next/font.
--text-hero clamp(44px, 6vw, 76px): One per page — the opening statement.
--text-h1 48px: Page headline below the hero.
--text-h2 34px: Section headline.
--text-h3 24px: Card and subsection headline.
--text-lead 20px: Standfirst under a headline.
--text-body 16px: Default body size.
--text-small 14px: Supporting UI text.
--text-caption 12px: Eyebrows and labels, ALL CAPS with subhead tracking.
--weight-headline 400: Display headlines are Regular — never bold the display face.
--weight-display-medium 400 (mapped from 500): The Telegraf pack has no 500 cut — mapped explicitly to Regular, never faux weights.
--weight-subhead 700 (mapped from 600): Eyebrows and subheads. No 600 cut — Bold stands in pending a possible SemiBold license.
--weight-body 400: Body copy.
--weight-emphasis 700: Inline emphasis in body copy.
--leading-display 1.08: Display leading — tight.
--leading-body 1.55: Body leading.
--tracking-subhead .14em: Letterspacing for ALL CAPS eyebrows/subheads.
--tracking-display -.01em: Display tracking — slightly tight.

Spacing & layout

--space-1 … --space-10 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128: The only rhythm values. No ad-hoc pixel gaps.
--container-max 1280px: One container width. Nothing else sets page width.
--gutter 24px: Horizontal page gutter.

App extensions — pending upstream adoption in Claude Design

--text-muted-on-light rgba(5,14,61,.62): Muted text tier on Chalk and Mist — cobalt faded the way the dark tiers fade chalk. 5.34:1 on Chalk, 5.18:1 on Mist.
--button-fill chalk: Solid primary button fill on the dark canvas (mirrors the reference Button, tone dark).
--button-fill-hover rgba(255,255,255,.85): Hover fill — the reference fades the whole button to 85%.
--button-fill-pressed rgba(255,255,255,.85): Pressed fill — brightness(.85) in the reference; equals hover on the canvas today, kept distinct so themes can split them without renames.
--weight-ui 500: Inter Medium for UI labels: nav links, link rows, button labels. Never the display face — Telegraf has no 500 cut.
--shadow-card-hover 0 4px 24px cobalt 10%: The chalk-card hover lift — the one soft cobalt-tinted shadow. Light surfaces only; the canvas has nothing to lift.
--surface-media black: The imagery letterbox behind full-frame x-ray media. Masters are black-backed — stays black under any future theme.

Radii, effects, motion

--radius-none 0: Structural elements are square.
--radius-sm 2px: Inputs and buttons only.
--radius-media 8px: Media and image cards only.
--border-hairline 1px line dark: The dark-surface divider.
--border-hairline-light 1px line light: The light-surface divider.
--border-frame 2px currentColor: Bracket frames echoing the wordmark. Never for dividers.
--shadow-card inset hairline: Depth comes from surface steps, not shadows.
--shadow-dialog 0 24px 64px: Dialogs only — the one large soft shadow.
--ease-brand cubic-bezier(.4,0,.2,1): Every transition. No bounce.
--dur-fast 120ms: Hovers and small state changes.
--dur-base 200ms: Reveals, accordions, dialogs.
--protect-gradient black 0 → 72%: Under text over photography. The only gradient in the system.