postrboard-design
Apply the Postrboard design language — a refined, airy, code-native aesthetic used across postrboard.com and burkeholland.github.io — when designing or building any website, landing page, UI component
SKILL.mdskills/postrboard-design/SKILL.md
GitHubPostrboard Design Language
This skill defines the visual design language used across postrboard.com and the burkeholland.github.io family of sites. It is a refined, airy, code-native aesthetic — editorial restraint meets developer credibility.
Use this spec as a creative framework, not a rigid template. Every new site should feel fresh within these constraints — different font pairings, different color mode (light vs dark), different layout rhythm — but always recognizable as part of this family.
Core Philosophy
"Editorial restraint meets code-native credibility."
- Type-led design: let typography do the heavy lifting
- Whitespace is a first-class design element
- Components earn their place — no decorative noise
- Code motifs (terminals, monospace, pills) signal technical authenticity
- Motion is ambient and gentle, never performative
- Color is precious — use the signature palette sparingly and intentionally
Color System
Signature Accent Trio
This coral → azure → sage progression is the cross-site brand signature. It appears as gradients, individual accents, or subtle ambient glows.
Coral: #ff7f50 (warm, energetic, primary attention)
Azure: #0ea5e9 (cool, trustworthy, secondary accent)
Sage: #84cc16 (fresh, natural, tertiary or completion state)
The Core Gradient
When using the trio as a gradient:
linear-gradient(135deg, #ff7f50, #0ea5e9) /* two-stop, most common */
linear-gradient(to right, #ff7f50, #0ea5e9, #84cc16) /* three-stop, signature */
Use gradients on:
- Hero highlighted words or wordmarks
- CTA buttons
- Logo marks or decorative periods
- Ambient background glows (heavily blurred)
Avoid gradients on: body text, large background washes (unless very subtle), navigation.
Light Mode Palette
Page background: #f0f4f8 (cool gray-blue mist) or
linear-gradient(to bottom right, #ffffff, #f0f9ff, #f6fff8)
Card/surface: #ffffff or rgba(255,255,255,0.7) for glass
Primary text: #111827 or #0f172a
Secondary text: #4b5563 or #475569
Tertiary/meta: #94a3b8
Border: #e2e8f0 or rgba(255,255,255,0.5) for glass
Dark Mode Palette
Page background: #0b0f14 (near-black with blue cast)
Surface/panel: #111820
Text: #e2e8f0
Dim text: #64748b
Muted text: #334155
Border: rgba(255,255,255,0.06)
Ambient glow: coral top-right, azure bottom-left (blurred blobs, opacity 0.15–0.25)
Grain texture: subtle noise overlay, opacity 0.02
Soft-tone Tints (for badges, chips, highlights)
Coral soft: #fff0eb
Azure soft: #e8f7fe
Sage soft: #f2fde0
Typography
The Two-Font Pattern
Almost every site pairs a humanist/geometric sans with a monospace face for technical credibility. Pick one pair per project:
| Sans | Mono | Best for |
|---|---|---|
| Inter | Space Mono | Premium AI/SaaS landing |
| DM Sans | IBM Plex Mono | CLI utility microsites |
| Outfit | JetBrains Mono | Dark terminal-native sites |
| Space Grotesk | (mono optional) | Editorial/gallery |
Never use more than two font families. The sans handles UI and body; the mono handles code, commands, and large display wordmarks.
Typographic Scale
Display/wordmark: clamp(3.5rem, 10vw, 18rem) weight 700–800 tracking -0.06em to -0.07em
Hero H1: 56px–64px weight 800 tracking -1.5px to -2.5px
Section H2: clamp(3.5rem, 6vw, 7rem) weight 700–800 tracking tight
Card title: 24px weight 700
Body: 16px–17.6px weight 400 line-height 1.7–1.85
Meta/label: 12px–14px weight 500–600 uppercase, tracking 0.7px
Mono command: 13px–14px weight 400
Typographic Principles
- Negative letter-spacing on large display text is essential
- Body copy should breathe — line-height never below 1.6
- Mono text signals "this is a real tool"
- Uppercase labels are used only for meta/category, never for body
- Gradient text-fill on key words creates focal emphasis without adding UI elements
Layout & Spacing
Max Widths
Full editorial layout: 1200px–1400px
Article/utility layout: 880px
Compact/terminal: 680px
Rhythm Vocabulary
Section vertical padding: 5rem–7rem (spacious gallery rhythm)
Hero padding: 7rem top, 5rem bottom
Card internal: 24px–32px
Grid gap: 1.25rem–2rem
Container horizontal: 1.5rem–3rem padding
Grid Patterns
- 3-column card grid:
repeat(auto-fit, minmax(300px, 1fr)) - Gallery grid:
repeat(5, 1fr)with tight 8px gaps - Two-column hero: left editorial, right visual artifact (terminal, mockup)
- Single-column utility: centered, max-width 680–880px
Surface & Depth
Glassmorphism (Light Mode)
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 16px;
backdrop-filter: blur(8px) saturate(1.4);
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
Use glass surfaces for: sticky navigation, cards over gradient backgrounds.
Elevation Scale
Subtle (body cards): 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06)
Medium (interactive): 0 4px 8px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.10)
High (terminal/demo): 0 32px 80px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.04)
Dark terminal: 0 24px 60px -12px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.02)
Colored button shadows use the accent color:
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3); /* azure-keyed */
Border Radius
There are three distinct corner languages — use one consistently within a surface type:
Pill (CTAs, filter pills, tags): border-radius: 9999px or 100px
Soft (cards, panels, terminals): border-radius: 16px–18px
Compact (utility, code blocks): border-radius: 6px–12px
Sharp (gallery tiles): border-radius: 4px–5px
Mix pill buttons with soft cards. Never mix sharp and pill on the same surface tier.
Components
Navigation
- Sticky, translucent
- Light:
rgba(255,255,255,0.5–0.85)+blur(8px–12px) saturate(1.6) - Dark:
rgba(11,15,20,0.8)+blur(12px) - Compact padding, minimal links
- Logo on left, single CTA on right
Primary CTA Button
background: linear-gradient(to right, #ff7f50, #0ea5e9, #84cc16);
border-radius: 9999px;
padding: 12px 24px;
font-weight: 600;
color: white;
box-shadow: 0 4px 12px rgba(14,165,233,0.3);
transition: all 0.2s ease;
Hover: translateY(-2px), shadow spreads.
Cards
background: rgba(255,255,255,0.7);
border: 1px solid rgba(255,255,255,0.5);
border-radius: 16px;
padding: 32px;
backdrop-filter: blur(8px);
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
transition: transform 0.2s ease;
Hover: translateY(-4px).
Pill Tags / Badges
background: rgba(255,255,255,0.5);
border: 1px solid rgba(0,0,0,0.05);
border-radius: 9999px;
padding: 4px 12px;
font-size: 12px;
Use soft tints (#fff0eb, #e8f7fe, #f2fde0) for categorized/themed badges.
Terminal / Code Block
Dark mode, regardless of site mode:
background: #0d1117 or #0c0e14;
border-radius: 10px–18px;
padding: 20px 24px;
font-family: monospace;
font-size: 13px;
box-shadow: 0 24px 60px -12px rgba(0,0,0,0.45);
Include macOS traffic-light dots (#ef4444, #f59e0b, #22c55e) for realism.
Ambient Background Glows (Dark Mode)
/* Two blurred color blobs for atmospheric depth */
.glow-coral {
position: absolute;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(255,127,80,0.2) 0%, transparent 70%);
top: -200px; right: -200px;
filter: blur(80px);
}
.glow-azure {
background: radial-gradient(circle, rgba(14,165,233,0.15) 0%, transparent 70%);
bottom: -200px; left: -200px;
}
Add grain overlay (SVG or CSS noise filter) at opacity: 0.02 for texture.
Motion
All transitions are ambient and micro — never distracting.
Duration: 0.15s–0.2s ease
Hover lift: translateY(-2px) to translateY(-4px)
Hover scale: 1.02–1.05 (images only)
Pulse/float: subtle keyframe animation for ambient glows only
Cursor blink: for terminal UI chrome
Never use: parallax, scroll-triggered animations, entrance animations on primary content, dramatic scale transforms.
Code-Native Visual Motifs
These elements signal authenticity to a developer audience:
- Terminal windows with traffic-light dots and a dark shell environment
- Monospace wordmarks — using the mono font at huge display sizes
- Command pill CTAs — styled like shell commands:
$ npm install @tool - Install tab selectors — npm / pnpm / yarn segmented tabs
- Version/status badges — pill chips with soft tints
- Gradient text on key technical terms
- Blinking cursor in terminal chrome
Use at least one code motif on any developer-facing product site.
Light vs Dark Mode Selection
| Use Light Mode when… | Use Dark Mode when… |
|---|---|
| The product is approachable/broad audience | The product is terminal/CLI/code-native |
| The site has editorial or blog content | The aesthetic is "hacker-friendly" |
| You want warmth and energy | You want focused, immersive, premium-dark |
| Site targets non-developers | Site targets power users / devs |
Both modes share the same accent trio, motion rules, and component language. The mode affects the background, surface colors, and glow strategy.
Do / Don't
| ✅ Do | ❌ Don't |
|---|---|
| Use negative letter-spacing on large headings | Use flat, untracked display type |
| Pair one sans with one mono | Use three or more font families |
| Use the coral/azure/sage trio as accents | Use generic blue/gray brand colors |
| Keep hover motion subtle (2–4px lift) | Add slide-in, bounce, or parallax |
| Use terminal mockups for CLI products | Add stock photography |
| Use pill or soft-corner CTAs | Use square buttons |
| Breathe — use generous vertical spacing | Cram sections together |
| Key shadows to the accent color | Use generic rgba(0,0,0,0.5) on buttons |
| Add subtle grain/glow texture in dark mode | Use dark mode without atmospheric depth |
| Limit gradient use to focal points | Gradient entire page backgrounds |
Applying This Skill
When designing a new site:
- Choose a mode — light (glassmorphic, airy) or dark (terminal, atmospheric)
- Choose a font pair from the table above
- Pick a layout personality — spacious gallery (Max), compact utility (CPM/CPT), editorial (blog), or band-based (Paper)
- Apply the accent trio at one or two focal points only
- Build one code motif into the hero or feature section if the audience is developer-facing
- Write the CSS tokens using the values in this spec as your starting point
- Let typography and spacing carry the design — resist adding decorative elements