Design System
Single source of truth for all visual decisions on this site. Every token, type style, component, and surface documented here.
Colour Tokens
Brand
--color-primary#2f353dHeadings, body text, dark buttons, pills, dark cards
--color-primary-hover#323e4eHover state for primary buttons
--color-cta-text#fafdffText on dark buttons
Backgrounds & Surfaces
--color-background#fafdffPage background, light section bg
--color-nav-bg#eef2fbSticky nav background (92% opacity via color-mix)
--color-surface#f4f5f6Cards, step panels, secondary button bg, tertiary border/text
--color-border#c9cecfDividers, card borders, secondary button hover
Text
--color-foregroundvar(--color-primary)Primary text — alias of --color-primary
--color-muted#5c7b99Body copy, labels, nav links, eyebrow text, form placeholders
Text on Dark
--color-on-dark-base#eef2fbBase tint for dark-section text — edit this to shift all on-dark text at once
--color-on-darkcolor-mix(in srgb, var(--color-on-dark-base) 80%, transparent)Body text on hero photo, CtaBand body — derives from --color-on-dark-base at 80%
--color-on-dark-mutedcolor-mix(in srgb, var(--color-on-dark-base) 55%, transparent)Secondary text on dark cards — derives from --color-on-dark-base at 55%
Buttons
--color-cta-bgvar(--color-primary)Primary button background — alias of --color-primary
--color-cta-hovervar(--color-primary-hover)Primary button hover — alias of --color-primary-hover
--color-cta-secondary-bgvar(--color-surface)Secondary button background — alias of --color-surface
--color-cta-secondary-hovervar(--color-border)Secondary button hover — alias of --color-border
--color-cta-secondary-textvar(--color-primary)Secondary button text — alias of --color-primary
--color-cta-tertiary-bordervar(--color-surface)Tertiary border + text — alias of --color-surface
--color-cta-tertiary-hover-bgcolor-mix(in srgb, var(--color-surface) 10%, transparent)Tertiary hover — auto-derives from --color-surface at 10%
Semantic
--color-danger#C0392BError states
--color-aws#B87000AWS badge text/accent
Typography
H1 — Hero heading
type-h1Your data never leaves your AWS account.
H2 — Section heading
type-h2Private by architecture, not by policy.
H3 — Card heading
type-h3Private Knowledge Base
H4 — List / trust heading
type-h4AWS Bedrock private inference
Body — 18px
type-body-lgFrontier AI models, inside your infrastructure. Automate knowledge work and collaborate on sensitive information.
Body — 16px
type-bodyAny organisation whose work involves confidential data, regulatory constraints, or IP that cannot be exposed to shared AI infrastructure.
Body muted — 15px
type-body-mutedEvery privacy claim is backed by the architecture — not a vendor policy statement or a terms-of-service opt-out.
Label — default
type-labelInherited through AWS Bedrock
Eyebrow text
type-eyebrowWho it's for
Nav link
type-navHow it works
Button text
type-btnRequest access
Form label — 13px
type-form-labelInput text — 14px
type-inputyou@organisation.com
Buttons
Primary — dark fill
bg: --color-cta-bg · hover: --color-cta-hover · text: --color-cta-text · radius: 6px · pad: 12/16pxSecondary — cream fill
bg: --color-cta-secondary-bg · hover: --color-cta-secondary-hover · radius: 6pxTertiary — transparent outline (shown on dark bg)
border: 1px --color-cta-tertiary-border · +1px pad compensationTags & Labels
Eyebrow Pill — section labels
bg: --color-surface · border: 1px --color-border · radius: 64px · Inter 13px/500 · color: --color-mutedCategory Tag — light bg (WhoItsFor light cards)
bg: --color-background · border: 1px --color-border · radius: 4px · Inter 11px/500 · color: --color-mutedCategory Tag — dark card variant (WhoItsFor dark cards)
bg: rgba(255,255,255,0.08) · border: rgba(255,255,255,0.12) · radius: 4px · color: --color-on-dark-mutedCategory Tag — transparent bg (TrustSignals compliance, News article tags)
bg: transparent · border: 1px --color-border · radius: 4px · Inter 12px/500 · color: --color-foregroundIcon Containers
Rounded-square icon container — TrustSignals
w-9 h-9 (36px) · rounded-lg (8px) · bg: --color-background or --color-surface · border: 1px --color-border · icon: 16×16px --color-foregroundCards & Surfaces
Light card
Card heading
Body copy inside a light surface card.
bg: --color-surface · border: --color-border · radius: 16pxDark card
Card heading
Body copy inside a dark primary card.
bg: --color-primary · radius: 16pxBorder Radius
Button / Input
6pxCard
16pxPill / Badge
64pxBorders & Dividers
1px solid --color-border (#E3D8CC) — section dividers, card borders1px solid rgba(0,0,0,0.12) — eyebrow pill border only1px solid --color-warm-dark-border — borders on dark sectionsForm Fields
label: type-form-label · input: type-input · bg: white · border: --color-border · radius: 6pxSpacing
py-[110px] (110px)max-w-[1100px] mx-autopx-10 (40px)p-10 (40px) · p-8 (32px)gap-4 (16px)gap-[60px]mb-[64px]