Sharp
LightSansBrutalistZero-radius brutalist editorial. Off-white canvas, ink-black accent, hard-edge offset shadows, DM Sans + Space Mono.
This system uses the following font families. Every sample below is rendered live — not a screenshot.
Headings, hero titles, UI emphasis
Body copy, buttons, form fields
Section labels, metadata, eyebrows
Base body copy at large size for lead paragraphs and introductory content blocks.
Standard body text for descriptions, helper copy, and long-form content within cards and panels.
Captions, timestamps, and supplementary metadata rendered at reduced size.
This page uses SectionLabel to open every section
Broken ImageSquare ShapeAda LovelaceGrace HopperAlan TuringMargaret Hamilton+1Default card
Static container, no interaction.
Clickable card
Click me — fires a real handler.
| Status | |||
|---|---|---|---|
| Ada Lovelace | Design Lead | Active | |
| Grace Hopper | Engineer | Active | |
| Alan Turing | Researcher | Pending | |
| Margaret Hamilton | Engineer | Active | |
| Katherine Johnson | Analyst | Idle | |
| Radia Perlman | Architect | Active |
Page 1 of 2 — paired with the table dataset above.
Sample dataset for Sharp — values scale relative to the highest bar in the series.
Overview panel content.
A realistic product moment: open the modal, fill fields with validation, submit, and see a toast plus a new table row.