Skip to content

Instantly share code, notes, and snippets.

@burkeholland

burkeholland/SKILL.MD

Created May 11, 2026 21:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save burkeholland/fc6b58d450576022d7610f8485bc0cae to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save burkeholland/fc6b58d450576022d7610f8485bc0cae to your computer and use it in GitHub Desktop.
Download ZIP
Raw
SKILL.MD
Description 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, or web app. Use this skill whenever the user asks to design, style, or build a site and wants it to feel polished, modern, and developer-native. Trigger on phrases like "build me a site", "design a landing page", "make it look like postrboard", "use my design language", "create a new site", etc.

Postrboard 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:

  1. Choose a mode — light (glassmorphic, airy) or dark (terminal, atmospheric)
  2. Choose a font pair from the table above
  3. Pick a layout personality — spacious gallery (Max), compact utility (CPM/CPT), editorial (blog), or band-based (Paper)
  4. Apply the accent trio at one or two focal points only
  5. Build one code motif into the hero or feature section if the audience is developer-facing
  6. Write the CSS tokens using the values in this spec as your starting point
  7. Let typography and spacing carry the design — resist adding decorative elements
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment