Phase 1 · internal

SynapseAI — Design System

Brand tokens, primitives, and WCAG AA contrast proof. This page carriesnoindex and ships zero client JavaScript and zero inline styles (strict CSP: style-src 'self').

Contrast contract (WCAG 2.1, real math)

AA = 4.5:1 normal text, 3:1 large text / UI. Turquoise-500 fails as text and is reserved for fills/borders.

Pair	Ratio	Threshold	Result
`ink / white` (normal text)	11.59:1	4.5:1	PASS
`muted / white` (normal text)	5.79:1	4.5:1	PASS
`brand-text / white` (normal text)	4.98:1	4.5:1	PASS
`accent / white` (normal text)	7.37:1	4.5:1	PASS
`on-brand (ink) / brand fill` (normal text)	5.03:1	4.5:1	PASS
`on-accent (white) / accent fill` (normal text)	7.37:1	4.5:1	PASS
`brand (turquoise-500) / white` (text — RESERVED non-text)	2.30:1	4.5:1	FAIL
`white / brand fill (rejected)` (text — DO NOT USE)	2.30:1	4.5:1	FAIL

Color palette

Each swatch shows its hex and its contrast vs the surface where it would carry text.

ink#0a3f46Body & heading text11.59:1 vs white — PASS AA

muted (grey-500)#4a6b70Secondary text5.79:1 vs white — PASS AA

brand-text (turquoise-700)#0a7d78Turquoise text on white4.98:1 vs white — PASS AA

turquoise-800#076e6bDarker turquoise text6.08:1 vs white — PASS AA

accent (blue)#0e5a8aAccent text / links7.37:1 vs white — PASS AA

accent-2 (blue)#1b6fb3Accent text (lighter)5.29:1 vs white — PASS AA

brand-deep (turquoise-600)#00a7a0UI borders / fills (≥3:1 large)2.99:1 vs white — PASS (UI/large 3:1)

brand (turquoise-500)#07bfb3Fills / borders / rings — NON-TEXT2.30:1 vs white — FAIL as text

turquoise-300 (light)#7fe7e2Tints / glass glow — decorative1.46:1 vs white — FAIL as text

Typographic scale

Hero display · --fs-900Synapse — الرعاية الصحية الرقمية

H1 · --fs-800Synapse — الرعاية الصحية الرقمية

H2 · --fs-700Synapse — الرعاية الصحية الرقمية

H3 · --fs-600Synapse — الرعاية الصحية الرقمية

H4 · --fs-500Synapse — الرعاية الصحية الرقمية

Lead/H5 · --fs-400Synapse — الرعاية الصحية الرقمية

Body · --fs-300Synapse — الرعاية الصحية الرقمية

Small · --fs-200Synapse — الرعاية الصحية الرقمية

Fine · --fs-100Synapse — الرعاية الصحية الرقمية

Latin stack: --font-sans. Arabic stack: --font-arabic (self-hosted webfonts land in Phase 2).

مرحبا بكم في سينابس — صحة رقمية

Spacing scale

--space-3xs

--space-2xs

--space-xs

--space-sm

--space-md

--space-lg

--space-xl

--space-2xl

--space-3xl

Radii

--radius-sm

--radius-md

--radius-lg

--radius-xl

--radius-pill

Shadows & glow

--shadow-xs

--shadow-sm

--shadow-md

--shadow-lg

--shadow-glow

Surfaces: glass & gradient

Glass panel--glass-bg + --glass-border + blur(--glass-blur)

Gradient signature title

Buttons

Link (a)

Cards

Glass card

Frosted surface, luminous turquoise border, soft elevation.

Plain card

Opaque off-white surface, hairline border.

Section (alt background)

This whole band uses <Section alt> — off-white background, centered 1120px container, fluid padding.