Sharp Design System for AI Agents
LightSansBrutalistSharp is a locked-down design system in the Agent Design Protocol catalog. Zero-radius brutalist editorial. Off-white canvas, ink-black accent, hard-edge offset shadows, DM Sans + Space Mono. Download the two Markdown files below, drop them into your agent rules folder, and you should get on-spec UI on the next prompt.
Published Updated
What components ship in the Sharp design system?
Browse the live showcase below. Every control uses this system's tokens, try buttons, forms, tables, and composed flows before you commit the files to your repo.
Foundation — Typography
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.
Foundation — Color Palette
Foundation — Divider / SectionLabel
This page uses SectionLabel to open every section
Badge
Variants
Use cases
Avatar
Sizes & shapes
Demo PhotoFallback InitialsStatus dots
Use cases
Profile header — large avatar + status
Card
Default card
Static container, no interaction.
Clickable card
Click me — fires a real handler.
Sharp highlights
Card with badge header for featured content.
Engineer · Online
Avatar + meta composition for people cards and directory rows.
Actions footer
Card that ends with a real action row.
Input
Textarea
Checkbox
Radio
Plan
Billing cycle
Switch
Tooltip
Select
MultiSelect
DatePicker
TimePicker
Modal
Table
With data — sortable + selection
| 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 |
Showing page 1 of 2 from 12 rows — use Pagination below.
Loading
| Status | |||
|---|---|---|---|
Empty
| Status | |||
|---|---|---|---|
| No rows to show. | |||
Pagination
Paired with table dataset
Drives the “With data” table above.
Mid-range (page 3 of 8)
Near the end (page 5 of 5)
Skeleton
Avatar + lines
Card block
Table row placeholders
Form field stack
List items
Media / thumb row
Button row placeholders
Graph
Sample dataset for Sharp — values scale relative to the highest bar in the series.
Toast
Tabs
Horizontal
Overview panel — summary copy for Sharp. Use arrow keys to move between tabs.
Vertical
Vertical tabs keep navigation beside the panel.
Composed Flow — Register a Record
A realistic product moment: open the modal, fill fields with validation, submit, and see a toast plus a new table row. Secondary paths prove confirm and info modals stay reachable from the same section.