Home / Style Guide

AQ.SG.001 · INTERNAL

Design tokens.

Every option originally surfaced by the Claude Design "Tweaks" picker, now wired through src/data/theme.ts and the Base.astro props accent, bg, and density.

01 Accent colors

Five accents. Used for the hero italics, primary buttons, and links.

navy

#0a1f5c

Sample headline.

Primary CTA

accent="navy"

green

#4aa851

Sample headline.

Primary CTA

accent="green"

default

water

#2d7fc4

Sample headline.

Primary CTA

accent="water"

sand

#c9a676

Sample headline.

Primary CTA

accent="sand"

ink

#0b0d14

Sample headline.

Primary CTA

accent="ink"

02 Background palettes

Six palettes. Set per-page or globally.

paper

paper-2

line

ink

Warm cream

bg="warm"

paper

paper-2

line

ink

Pure white

default

bg="white"

paper

paper-2

line

ink

Cool slate

bg="slate"

paper

paper-2

line

ink

Deep sand

bg="sand"

paper

paper-2

line

ink

Navy tint

bg="navy"

paper

paper-2

line

ink

Ink (dark)

bg="dark"

03 Density

Two rhythms. Controls vertical padding on every section.

--section-y

spacious

density="spacious"

--section-y

dense

default

density="dense"

04 Usage

Edit defaults globally or override per page.

// Site-wide defaults — src/data/theme.ts

export const themeDefaults: {
  accent: AccentKey;
  bg: Bg;
  density: Density;
} = {
  accent: 'water',
  bg: 'white',
  density: 'dense',
};

// Per-page override — any .astro page

<Base
  title="Page Title"
  accent="green"
  bg="dark"
  density="dense"
>
  ...
</Base>