.brutalSurface + control roles
Hard edges. Shared anatomy.
Reading roles remain semantic, while the family changes border, radius, depth, color, and press feedback.
Info sticker
Pure white stays bound to blue.
§ 1.0
Theme overview
Paper and Ink remain the default pair. Neo-Brutal Light and Dark are an opt-in family on the same semantic anatomy.
About semantic tokens
Semantic tokens are named values that describe intent, not appearance. They map to CSS custom properties that can be consumed directly in any project, without JavaScript or a runtime.
This paired theme provides a calm, high-contrast reading surface with disciplined spacing and type scale. It is optimized for long-form reading, documentation, and code, designed to stay out of your way.
Theme matrix
- Default family
- LightPaper
:root - DarkInk
.dark - Neo-Brutal family
- LightNeo Light
.brutal - DarkNeo Dark
.brutal.dark
.brutal.darkSame roles, dark scheme
Paper ink flips. Stickers do not.
The scheme axis changes canvas, reading, border, and focus roles without changing the component structure.
Success sticker
Fixed ink remains legible.
Reading specimen
A good design system removes decisions. It gives you a set of clear, semantic building blocks so you can focus on content and behavior. Paper is the light default; Ink is its dark companion for documentation, reference, and tools. Lines are quiet, text is steady, and the system scales with you. Write more. Ship sooner.
Interaction states
Status roles
Success
Action completed.
Warning
Check this soon.
Danger
Action required.
Info
For your information.
Token source
@import "tailwindcss";@import "@ayingott/theme";@import "@ayingott/theme/brutal.css";.dark controls scheme · .brutal opts into the family