DESIGN SYSTEM
The visual language behind Developers Digest. Gumroad-inspired - cream backgrounds, pink accents, pill buttons, and offset-layer cards. Everything you need to build with the brand.
Logo & Assets
Wordmark - Light
Wordmark - Dark
Wordmark - Accent
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.
Extended Palette
Typography
Font stack: ABC Favorit, Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif.
Weight 400 for most text - size creates hierarchy, not boldness.
Aa
Heading One
Heading Two
Heading Three
Large body text
Regular body copy for paragraphs and general content.
Labels, metadata, captions
Footnotes and tiny annotations
Buttons
100% pill-shaped. border-radius: 9999px. Padding: 8px 24px. No exceptions.
Variants
Sizes
Code
<!-- Primary (black pill) -->
<button class="btn-pill btn-pill-primary">Click Me</button>
<!-- Secondary (white pill with border) -->
<button class="btn-pill btn-pill-secondary">Learn More</button>
<!-- Pink accent -->
<button class="btn-pill btn-pill-pink">Featured Action</button>
<!-- With Tailwind directly -->
<button class="bg-black text-white px-6 py-2 rounded-full text-lg
hover:bg-gray-800 transition-colors">
Start Selling
</button>Cards
Offset-layer cards are the signature pattern. A background layer peeks out behind the card to create depth without shadows.
Standard
Card Title
Gray offset layer. 2px border, 16px radius.
Featured
Featured
Pink offset at 30% opacity.
Interactive
Hover me
Card shifts, offset turns pink.
Code
<!-- Standard offset-layer card -->
<div class="relative">
<div class="absolute top-2 left-2 right-[-8px] bottom-[-8px]
bg-offset-layer rounded-2xl -z-10" />
<div class="bg-white border-2 border-black rounded-2xl p-6">
Content
</div>
</div>
<!-- Featured (pink offset) -->
<div class="gumroad-card gumroad-card-featured
bg-white border-2 border-black rounded-2xl p-6">
Featured content
</div>
<!-- Interactive (hover effects) -->
<div class="relative group">
<div class="absolute top-2 left-2 right-[-8px] bottom-[-8px]
bg-offset-layer rounded-2xl -z-10
group-hover:bg-pink/20 transition-colors" />
<div class="bg-white border-2 border-black rounded-2xl p-6
hover:translate-x-[-2px] hover:translate-y-[-2px]
transition-transform">
Hover content
</div>
</div>Spacing
8px base unit. All spacing derives from this.
Border Radius
Forms
<input
class="bg-white border border-black rounded px-3 py-2
focus:border-pink focus:outline-none"
placeholder="Enter email"
/>Rules
Do
- Pill buttons for all buttons (9999px)
- Offset layers on cards, not shadows
- Pink for accents and CTAs
- Weight 400 for most text
- Solid colors only
- 2px black borders on cards
- Cream background throughout
Don't
- No box-shadows - use offset layers
- No gradients - solid colors only
- No emojis - use SVG icons or text
- No square buttons - always pills
- No heavy font weights - 400 is primary
- No dark mode - cream theme only
Design Tokens
Click any token value to copy it.
| Token | CSS Variable | Tailwind | Value |
|---|---|---|---|
| Background | --background | ||
| Surface | -- | ||
| Text | --foreground | ||
| Accent | --pink | ||
| Accent Hover | --pink-hover | ||
| Offset | --offset-layer | ||
| Yellow | --yellow | ||
| Pill Radius | -- | ||
| Card Radius | -- | ||
| Button Padding | -- | ||
| Card Padding | -- |
Infographics
Two art styles - hand-drawn (editorial/Substack vibe) and clean (design-system aligned). Used as hero images for articles and inline visuals for blog posts and videos.
Hand-drawn / Editorial
Warm cream backgrounds, cartoon characters, marker-style lettering, whimsical arrows.
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
Clean / Design-System Aligned
Cream backgrounds, white cards with black borders, pill badges, bar charts.
AI Coding Models Comparison
CSS Utilities
Pre-built utility classes available globally via globals.css.
.btn-pill /* Base pill button */
.btn-pill-primary /* Black pill */
.btn-pill-secondary /* White pill with border */
.btn-pill-pink /* Pink pill */
.gumroad-card /* Card with gray offset layer (::before) */
.gumroad-card-featured /* Card with pink offset layer */
.animate-fade-in /* Fade in from below */
.animate-fade-in-blur /* Fade in with blur */
.animate-fade-in-blur-up /* Fade + blur from below */Copy for AI
Copy this prompt and paste it into any AI tool to replicate this design system.
DEVELOPERS DIGEST DESIGN SYSTEM
Colors: Cream #F4F4F0 (background), White #FFFFFF (cards), Black #000000 (text), Pink #FF90E8 (accent), Offset #F0F0F0 (card shadows)
Pink Hover: #E070D0, Yellow: #FFC900, Dark Gray: #242423
Font: ABC Favorit, Avenir, Montserrat, sans-serif
Weights: 400 (primary), 500 (medium), 700 (bold/rare)
Scale: Hero 96px, H1 72px, H2 48px, H3 36px, Large 24px, Body XL 20px, Body 18px, Body SM 16px, Small 14px, Caption 12px
Buttons: 100% pill-shaped (border-radius: 9999px)
- Primary: bg-black text-white px-6 py-2 rounded-full
- Secondary: bg-white text-black border-2 border-black px-6 py-2 rounded-full
- Pink: bg-pink text-black px-6 py-2 rounded-full
- Padding: 8px 24px (exact)
Cards: Offset-layer pattern (no shadows!)
- Offset div: absolute top-2 left-2 right-[-8px] bottom-[-8px] bg-offset-layer rounded-2xl -z-10
- Card: bg-white border-2 border-black rounded-2xl p-6
- Featured: offset uses bg-pink/30 instead of bg-offset-layer
- Hover: card translates -2px/-2px, offset becomes bg-pink/20
Spacing: 8px base unit
Border radius: 4px (sm), 16px (md/cards), 24px (lg), 9999px (pill/buttons)
Rules: No shadows, no gradients, no emojis, no dark mode. Solid colors only.Get Smarter About AI Dev
New tutorials, open-source projects, and deep dives on coding agents - delivered weekly.