postrboard

A refined, airy, code-native design language. Type and whitespace carry the design; color is precious.

00 / Setup

Getting Started

Install the Copilot skill
terminal
npx skills add burkeholland/postrboard-design/skill
Link the stylesheet
html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://burkeholland.github.io/postrboard-design/postrboard.min.css">
01 / Tokens

Color

Signature Trio
#ff7f50 --coral
#0ea5e9 --azure
#84cc16 --sage
Light Palette
#f8fcff --bg
#ffffff --surface
#111827 --text
#6b7280 --text-muted
#6b7280 --text-meta
#e2e8f0 --border
Dark Palette
#0b0f14 --bg (dark)
#111820 --surface (dark)
#e2e8f0 --text (dark)
#94a3b8 --text-muted (dark)
#7d8fa3 --text-meta (dark)
Soft Tints
#fff0eb --coral-tint
#e8f7fe --azure-tint
#f2fde0 --sage-tint
02 / Tokens

Typography

Ship with confidence
Display clamp(2.5rem,6vw,3.5rem) / 800 / -0.06em
Ship with confidence
Hero H1 56–64px / 800 / -2px
Ship with confidence
Section H2 clamp(2rem,4vw,3rem) / 700 / tight
Ship with confidence
Card Title 24px / 700
Type and whitespace carry the design; components only earn their place when needed.
Body 16–17px / 400 / 1.7–1.85
UPDATED 2 HOURS AGO
Meta / Label 12–14px / 600 / uppercase / 0.7px
$ npx postrboard init
Mono 13–14px / 400 / JetBrains Mono
max.
Mono Display clamp(2rem,5vw,3.5rem) / 700 / Space Mono
Font Pairing Guide — when to use each mono
Space Mono

Use for: Wordmarks, hero display text, numbered section labels (01/02/03), large CTAs, brand moments.
Personality: Geometric, impactful, programmer-native. Wider and bolder.

JetBrains Mono

Use for: Code blocks, terminal output, command pills, meta labels, small annotations, inline code.
Personality: Precise, readable, functional. Optimized for code at small sizes.

Rule: Space Mono owns the billboard; JetBrains Mono owns the terminal. Never mix them at the same scale on one surface.
Blockquote, kbd, and styled lists
Type and whitespace carry the design; components only earn their place when needed.Postrboard principle / typography

Open the command palette with ⌘ K or Ctrl K.

  • Use mono for metadata and commands.
  • Keep accent color rare.
  • Let body copy breathe.
  1. Frame the job.
  2. Choose one focal point.
  3. Ship the quiet version.
03 / Tokens

Spacing

4--sp-1
8--sp-2
12--sp-3
16--sp-4
24--sp-5
32--sp-6
48--sp-7
64--sp-8
04 / Tokens

Foundations

Z-index

--z-base0
--z-dropdown10
--z-sticky20
--z-modal30
--z-toast40

Breakpoints

--bp-sm640px
--bp-md768px
--bp-lg1024px
--bp-xl1280px

Motion

--duration-fast100ms
--duration-normal200ms
--duration-slow300ms
--ease-outcubic-bezier(0.16, 1, 0.3, 1)
--ease-in-outcubic-bezier(0.65, 0, 0.35, 1)

Density

--opacity-dim0.5
--opacity-muted0.7
--border-thin1px
--border-normal1.5px
--border-thick2px

Icon sizes

--icon-sm16px
--icon-md20px
--icon-lg24px
--icon-xl32px
05 / Tokens

Shape

Border Radius
pill--r-pill / 9999px
soft--r-soft / 16px
compact--r-compact / 8px
sharp--r-sharp / 4px
Elevation
Subtle--shadow-subtle
Medium--shadow-medium
High--shadow-high
Terminal--shadow-terminal
06 / Components

Core Components

<Button /> — variants
<Card /> — glass surface with hover lift
Deploy anywhere
Push to your repo and watch it go live. Zero config, maximum confidence.
Built for devs
Terminal-first workflow. No GUIs standing between you and shipping.
<Input /> — states
<Checkbox />
<Badge /> — soft tints
Draft In review Deployed Stable
<Terminal /> — always dark
~ npx postrboard init my-site
✓ Scaffolded in ./my-site
✓ Installed 3 dependencies
~ cd my-site && npm run dev
→ http://localhost:3000
Code Motifs — command pills & version badges
$ npm install postrboard $ pnpm add postrboard v2.4.0 latest
<Nav /> — fixed sidebar (see left rail)

The navigation on the left of this page is the Nav component — fixed, scrollable, with parent anchors and quieter nested labels.

<nav class="side-nav"><a class="nav-logo">…</a><ul class="side-nav-links">…</ul><button class="nav-toggle">…</button></nav>
07 / Components

Forms

Form label, helper text, validation

Use lowercase letters and hyphens. This becomes the deployment slug.

Enter a valid URL.

DNS verified.

Textarea and select
Radio group, switch, input group
Visibility
https:// .postrboard.com
Button group and segmented control
Combobox / autocomplete
  • postrboard.com production
  • postrboard-design system
  • paperwalls-mac gallery
Slider / range and file upload
Glow intensity62%
FAB (Floating Action Button)

Fixed to the staged viewport: bottom 32px, right 32px.

Date Picker
Time Picker
OTP / PIN input

Six single-character boxes for verification flows.

Floating labels
08 / Components

Data Display

Table — header, zebra rows, badges
ProjectStatusRegionUpdated
postrboard.comLiveiad2m ago
urlistPreviewsfo14m ago
paperwalls-macReviewfra1h ago
List group and stat cards
  • Design audit
    Components checked against tokens
    Done
  • Dark mode pass
    Glow, grain, and terminal surfaces
    Queued
  • Release notes
    Editorial copy polish
    Draft
266
WALLPAPERS
↗ 12 this week
32
PROJECTS
↗ 4 shipped
0
DATA COLLECTED
↘ unchanged
Avatar, removable tag, tooltip, inline code, link
PB BH MAX
design-system Tiny contextual copy, never a paragraph. Use --coral only when it earns focus. View color tokens
Data table — sortable headers
Page ↑↓Owner ↑↓Score ↓Status
/maxStudio98Sharp
/paperwalls-macGallery94Quiet
/urlistUtility91Review
Description list / key-value
Branch
main
Preview
postrboard-design.vercel.app
Runtime
Static HTML, no client bundle
Accent
Coral primary, azure links
Timeline / activity feed
Design tokens audited
09:12 / system
Light and dark palettes matched the reference contract.
P1 components shipped
10:48 / components
Core buttons, cards, forms, navigation, and feedback are documented.
P2 queue opened
now / should-have
Patterns and utility examples move from notes into the system.
Empty state

No saved boards

Create a first board when there is real content to arrange. Empty chrome should stay quiet.

Calendar
June 2026
SunMonTueWedThuFriSat 31123456 78910111213 14151617181920 21222324252627 2829301234
Chart placeholder
Component coverage
CSS-only placeholder for analytics surfaces
+18%
Figure — image and caption
Figure captions stay quiet: enough context, no decorative flourish.
Video embed
10 / Components

Feedback

Alerts — info, success, warning, danger
Preview ready

Your branch has a shareable preview URL.

Deploy succeeded

The production site was updated without errors.

Quota almost full

Artifacts older than 30 days will be compacted tonight.

Build failed

One required environment variable is missing.

Toast, progress, spinner, skeleton
Saved
Design tokens synced to the reference.
Modal, alert dialog, drawer / sheet
Open modal Open alert dialog

These modal and drawer examples are CSS-only visual approximations; production implementations should use full focus management.

Popover — focus-within
Banner
Aspect ratio container
16:9
4:3
1:1
11 / Components

Utilities

Accordion — details / summary disclosure
When should coral be used?
Use coral for the primary action or one editorial focal point. If everything is coral, nothing is.
Do terminals change in dark mode?
No. Terminal blocks stay dark in every page mode for authenticity and contrast.
How much motion is allowed?
Keep interaction motion at or under 200ms and lifts under 4px.
Divider / Separator
Release channel
Icon buttons and close button
Icon system — 16 / 20 / 24 / 32px

Priority taxonomy: P1 covers must-have primitives, P2 covers common product patterns, and P3 captures extended utilities that round out the reference.

P3 / Extended
P3 / Extended — spacer utility
Logo cloud
Trusted by quiet product teams
Pricing table

Basic

$12 / mo
  • One workspace
  • Shared component notes
  • Email support
Popular

Pro

$29 / mo
  • Five workspaces
  • Review-ready previews
  • Priority support

Enterprise

Custom
  • Unlimited systems
  • Security review
  • Dedicated migration
Testimonial
“The system finally made restraint feel concrete. We stopped adding chrome to compensate for unclear copy.”
NR
Nia ReyesDesign systems lead
Newsletter signup
Scroll area

01 Keep accent scarce.

02 Let type and whitespace carry the first read.

03 Use mono for meta, never body prose.

04 Dark mode needs atmosphere, not inversion.

05 Motion stops at four pixels of lift.

06 Sharp edges are allowed when the content earns them.

Portal pattern

Portal

Render floating UI outside the local DOM hierarchy so modals, toasts, and command palettes can escape clipping and stacking contexts.

<Portal target="body">...modal content...</Portal>
Aspect ratio utility
aspect-ratio: 16 / 9
aspect-ratio: 4 / 3
aspect-ratio: 1 / 1
12 / Patterns

Patterns

Hero section pattern

Launch the quiet version first.

A full-width hero with one sharp sentence, one supporting paragraph, and one action. No decoration unless it earns the viewport.

Feature section — 3-column cards

Token first

Every component maps to the same color, radius, type, and motion contract.

Composable

Cards, forms, and nav patterns scale without adding new visual noise.

Editorial

Copy and whitespace carry the page before chrome gets involved.

FAQ pattern
How many accents per viewport?

One or two. Coral can carry a primary CTA or a key marker; azure stays mostly for links.

Should dark mode just invert colors?

No. Dark pages need depth from restrained glows, grain, and terminal-native surfaces.

Can patterns use existing components?

Yes. Patterns are assemblies, not a reason to invent new primitives.

CTA band

Make fewer, better screens.

Use the system when the product needs confidence instead of decoration.

Stats row
4.2kUSERS
99.9%UPTIME
50msEDGE LATENCY
Auth form — login

Welcome back

Sign in to continue editing boards.

Reset passwordCreate account
Responsive image
Visually hidden (a11y) and focus trap note

Screen reader only text

The hidden span below remains available to assistive tech.

This text is visually hidden but announced by screen readers..sr-only

Focus trap pattern

For real dialogs, cycle focus inside the modal, return focus to the trigger on close, and keep Escape available. This static card documents full focus return expectations; the demo adds lightweight Escape handling for target modals.

Truncation / clamp
Single-line truncation keeps a long branch name like feature/postrboard-component-library-expansion from breaking dense rows.
Multi-line clamp is for summaries that need a little room but not the whole page. Keep the original content available in detail views, and use this only when the surrounding layout needs a predictable height.
13 / Atmosphere

Dark-mode Ambient

Glow + Grain

Radial coral & azure blurs at 18% opacity. SVG noise at 2.5%. Never flat black.

14 / Layout

Layout Patterns

Auto-fit Grid — fills available columns responsively
Card slot
Card slot
Card slot
Card slot
Split — equal halves for editorial + artifact
Copy block
Visual / code
Asymmetric — weighted 2:1 for content + aside
Primary content
Metadata
Thirds — three equal columns for feature grids
Feature
Feature
Feature
Sidebar — fixed rail + fluid main
Nav
Main content area
Holy Grail — header, footer, three-column body
Header
Left
Content
Right
Footer
Masonry — variable-height items in columns
Tall item
Short
Taller
Short
Medium
Tall
Stack + Rail — stacked content with a pinned aside
Post
Sticky sidebar
Post
Centered Prose — max-width content column
Article body at comfortable reading width