The hard-edged neutral system
The visual language behind Developers Digest: white surfaces, hairline borders, square corners, mono uppercase eyebrows, at most one accent, and no gradients. Inspired by tools like Vercel and Linear. Everything you need to build with the brand.
This replaced the retired cream-and-pink "Gumroad" system in July 2026. See the redesign write-up for the full story.
Copy the current design contract and hand it to an agent, or preview it.
Logo & Assets
Wordmark - Light
Wordmark - Dark
Avatar
Lockup
Clearspace
Maintain at least 1x the avatar height as clearspace around the logo on all sides.
Colors
Click any swatch to copy the hex value.
Neutral scale
There is no brand hue. Default to black; at most one accent color appears on one element, never a spread of colored states.
Typography
Headings: Geist with tight tracking. Section labels: monospaced, uppercase, wide tracking.
Size and weight create hierarchy. Semibold for headings, regular for body.
Aa
Heading One
Heading Two
Heading Three
Large body text
Regular body copy for paragraphs and general content.
Labels, metadata, captions
SECTION LABEL
Buttons
Square corners, no pills. Solid black primary or hairline secondary. One accent at most.
Variants
Sizes
Code
<!-- Primary (solid black, square) -->
<button class="inline-flex h-11 items-center border border-black bg-black
px-6 text-sm font-medium text-white hover:bg-neutral-800
transition-colors">
Get Started
</button>
<!-- Secondary (hairline, square) -->
<button class="inline-flex h-11 items-center border border-black/15 bg-white
px-6 text-sm font-medium text-black hover:bg-neutral-50
transition-colors">
Learn More
</button>Cards
A white surface with a hairline border. Structure comes from the border, not shadows or offset layers. Square corners throughout.
Standard
Card Title
White surface, hairline border-black/10, square corners.
Emphasis
Emphasis
A slightly stronger hairline (border-black/15) is the only emphasis needed.
Interactive
Hover me
Hover shifts the surface to neutral-50. No lift, no shadow.
Code
<!-- Standard card -->
<div class="border border-black/10 bg-white p-6">
Content
</div>
<!-- Interactive card -->
<div class="border border-black/10 bg-white p-6
hover:bg-neutral-50 transition-colors cursor-pointer">
Hover content
</div>Spacing
8px base unit. All spacing derives from this.
Corners
Square, everywhere. globals.css forces border-radius: 0 and sets the radius token to zero, so no component can quietly reintroduce curves. Hard edges are the single most recognizable signal of the system.
Forms
<input
class="border border-black/15 bg-white px-3 py-2
focus:border-black focus:outline-hidden"
placeholder="Enter email"
/>Rules
Do
- Square corners everywhere
- Hairline borders (border-black/10) for structure
- Mono uppercase eyebrows on section labels
- One accent at most, default black
- Let type and spacing carry hierarchy
- Solid neutrals only
Don't
- No gradients, anywhere
- No rounded pills or curved corners
- No offset-layer or heavy-shadow cards
- No cream surfaces or pink accents (retired)
- No emojis, no em dashes
- No rainbow of colored states
Design Tokens
Click any token value to copy it.
| Token | CSS Variable | Tailwind | Value |
|---|---|---|---|
| Background | --background | ||
| Foreground | --foreground | ||
| Secondary text | -- | ||
| Hairline border | -- | ||
| Emphasis border | -- | ||
| Muted surface | -- | ||
| Radius | --radius | ||
| Button height | -- | ||
| Card padding | -- | ||
| Section padding | -- |
Infographics
Editorial illustration assets used as hero images and inline visuals. These are drawn in a warm, hand-made style on purpose - the illustration language is intentionally distinct from the hard-edged neutral UI chrome, which stays reserved for the interface itself.
Multi-Agent Coordination Architecture
The Agentic Development Stack
Context Window Management
AI Code Review Pipeline
Claude Code vs Cursor vs Codex
The RAG Pipeline Explained
Prompt Engineering Patterns
MCP (Model Context Protocol) Architecture
AI Agent Memory Systems
The Fine-Tuning Decision Tree
Vibe Coding vs Traditional Coding
Token Economics for AI Models
The AI Testing Pyramid
LLM Hallucination Detection
The AI Deployment Pipeline
Embedding Models Explained
AI Guardrails and Safety for LLM Applications
The LLM Orchestration Layer
Structured Output Parsing for LLMs
The AI Developer Workflow Loop
The Model Distillation Pipeline
The AI Coding Benchmark Landscape
The Semantic Search Stack
AI Code Generation Patterns
Mercury 2: The Diffusion Language Model
Claude Code + Chrome Browser Automation
Continual Learning: Memory That Compounds
The AI Agent Loop
How LLMs Use Tools: Function Calling
The Evolution of AI Coding
The Inference Stack: From Prompt to GPU
Component Patterns
The system leans on Tailwind utilities rather than bespoke classes. These are the canonical class strings to copy.
<!-- Section eyebrow -->
font-mono text-xs uppercase tracking-[0.18em] text-neutral-500
<!-- Primary button -->
inline-flex h-11 items-center border border-black bg-black px-6
text-sm font-medium text-white hover:bg-neutral-800 transition-colors
<!-- Secondary button -->
inline-flex h-11 items-center border border-black/15 bg-white px-6
text-sm font-medium text-black hover:bg-neutral-50 transition-colors
<!-- Card -->
border border-black/10 bg-white p-6
<!-- Card category tag (inverted chip) -->
inline-block bg-black text-white text-micro font-mono px-2 py-1
uppercase tracking-[0.12em]Retired 2026-07: the legacy btn-pill* and gumroad-card utilities have been removed from globals.css.
Get Smarter About AI Dev
New tutorials, open-source projects, and deep dives on coding agents - delivered weekly.