GIRL_OS // Design System | Veronika Volkov

01 / FOUNDATIONS

Color

Neon on near-black. The palette runs hot: pink is the system's voice, cyan is action and links, cream is for reading. Ratios below are measured against --bg-base #050505. PASS = WCAG AA for normal text (≥4.5:1); LARGE/UI = use for large text, borders, or graphics only (≥3:1).

--neon-pink #ff1493Primary voice · body text · section labels · brand rules5.6:1 · PASS

--bubblegum #ff69b4Secondary text · captions · supporting copy7.7:1 · PASS

--neon-cyan #00ffffLinks · CTAs · "LIVE" status · focus rings16.3:1 · PASS

--cream #fdf6e3Display headings · highest-emphasis text18.9:1 · PASS

--copper #b87333Index numbers · metadata · warm accents5.4:1 · PASS

--neon-violet #8a2be2Accents, borders, large display only, never body copy3.4:1 · LARGE/UI

--lipstick-red #d50000Error / offline states · destructive actions3.7:1 · LARGE/UI

--bg-panel #111111Cards, panels, raised surfaces

--bg-base #050505Page background + pink grid overlay

▸ click any swatch to copy its token name

02 / FOUNDATIONS

Typography

Three families, three jobs. Space Grotesk shouts (display), Space Mono speaks (everything readable), Architects Daughter whispers (hand-marked asides). Display is always uppercase with tight tracking; mono carries all long-form reading.

Families

Space Grotesk

Display · 700 · uppercase · tracking −2% to −5%

Space Mono

Body & UI · 400 / 700 · labels track +1–3%

Architects Daughter

Marker · accents & human asides only

Type scale

Display / H1Grotesk 700 · 100px
lh 1.0 · −0.05em

Riot Grrrl

Heading / H2Grotesk 700 · 34px
uppercase · −0.02em

Selected Work

Subhead / H3Grotesk 500 · 22px
uppercase · +1px

Enterprise Systems

Section titleMono 700 · 22px

// make the business case visible

BodyMono 400 · 15px
lh 1.7

Bridging the gap between business strategy, user experience, and code, written to be read, not skimmed.

Label / metaMono 400 · 12px
uppercase · +2px

01 / DISCOVERY & RESEARCH

MarkerArchitects Daughter · 26px

listen first.

03 / FOUNDATIONS

Space & Grid

An 8-point spacing scale keeps rhythm consistent. The signature 32px pink grid (--grid-color) sits under everything: it is the "operating system" texture. Borders are hairline pink at 25% or solid 2px pink for structure; corners stay square (radius 0) to hold the terminal feel.

--s-1 · 4px

--s-2 · 8px

--s-3 · 16px

--s-4 · 24px

--s-5 · 32px

--s-6 · 48px

--s-7 · 64px

--s-8 · 96px

04 / LIBRARY

Components

Each component below is live: hover, focus, and tab through them to see interaction states. Everything is built from the tokens above.

Buttons & CTAs

States: default (pink outline) · hover (fill) · focus-visible (cyan ring) · active (1px nudge) · disabled (40% + not-allowed)

Status & tags

Live Under Construction Offline Online & Kicking

DiscoveryRoulette UXAnti-algorithmWCAG AADesign Systems

Project card

[ PROJECT IMAGE ]

SITE_01 · LIVE

Case Study Name

One-line description of the project, the audience, and what shipped.

Access_Records →

[ PROJECT IMAGE ]

CASE_02 · GEISINGER

Medicare Redesign

End-to-end section redesign: research, IA, and a converting microsite.

Open_Case_Study →

Stat block

98

Accessibility rating contributed to (WCAG AA)

+80%

Increase in Medicare Advantage enrollments

+300%

UX team project turnaround after new processes

6+ yrs

Sole UX designer, enterprise healthcare site

Form input

// init_contact

Data table

Token	Value	Role
`--font-display`	Space Grotesk	Headlines
`--font-mono`	Space Mono	Body & UI
`--neon-pink`	#ff1493	Primary voice

05 / GUARDRAILS

Accessibility

A high-contrast neon palette is an accessibility asset when it's used with discipline. These are the non-negotiable rules: they're what let this look loud and hit WCAG AA.

Guardrail	Rule
Body text contrast	Only pink, bubblegum, cyan, cream, copper on `--bg-base` for reading, all ≥4.5:1. Violet & red are ≥3:1: large text / borders / icons only.
Focus visibility	Every interactive element shows a 3px `--neon-cyan` focus ring at 2px offset. Never remove `:focus-visible`.
Touch targets	Minimum 44×44px hit area on buttons, nav links, and cards.
Motion	`prefers-reduced-motion` disables transitions & smooth scroll. No motion is load-bearing.
Meaning ≠ color	Status always pairs color with a text label + dot glyph (Live / Offline), never color alone.
Grid contrast	The 32px grid stays ≤15% opacity so it never competes with text.