GIRL_OS // Design System | Veronika Volkov

01 / FOUNDATIONS

Color

A set of neon accents on a near-black background. Pink is used for body text and labels, cyan for links and actions, and cream for headings. All contrast ratios below are measured against --bg-base #050505. PASS = meets WCAG AA for normal text (≥4.5:1); LARGE/UI = for large text, borders, or graphics only (≥3:1).

--neon-pink #ff1493Body 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 typefaces, each with a defined role. Space Grotesk is used for display and headings, Space Mono for body and UI text, and Architects Daughter for occasional hand-written asides. Display text is uppercase with tight letter-spacing; Space 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

Spacing follows an 8-point scale for consistent rhythm. A 32px pink grid (--grid-color) sits behind the page as a background texture. Borders are either a 1px pink hairline at 25% opacity or a solid 2px pink; corners are square (radius 0).

--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	Body text

05 / GUARDRAILS

Accessibility

A high-contrast neon palette can support accessibility when it is used carefully. These are the rules that keep the design meeting 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.