Postrboard Skill
You are designing with Postrboard CSS. Your job is not to make a pretty SaaS page. Your job is to make the product feel specific, intentional, code-native, and calm.
Quiet CSS for loud products. The framework should recede. The product, workflow, and data should speak.
If this skill conflicts with generic web-design instincts, this skill wins.
P0 Behavioral Rules
These rules block output. Do not emit UI until they pass.
- No generic SaaS structure. Never default to Hero → Features → Testimonials → Pricing → CTA.
- No decorative emptiness. Every card, badge, stat, gradient, icon, and section must carry product meaning.
- No fake specificity. Do not invent numbers, logos, quotes, avatars, customers, or metrics. Use honest placeholders.
- No centered marketing fog. Prefer left-aligned, information-dense layouts. Center only for narrow confirmations, empty states, or single-purpose prompts.
- No rainbow styling. One dominant accent per surface. Coral for action/brand, azure for information, sage for success/progress.
- No emoji. Ever. Never use emoji as iconography, decoration, or section markers. Use SVG icons from Lucide, Phosphor, or Tabler sized to
--icon-sm/--icon-md/--icon-lg tokens. If no icon clarifies, use none.
- No stock icon grids. Icons are optional, small, and clarifying. They are not content.
- No bloated copy. Labels must name the actual object, action, input, output, or consequence.
- No arbitrary CSS values. Use Postrboard tokens/classes. Custom CSS may compose tokens, not replace them.
- No template recipes. Use layout decisions from the content. Do not copy a canned page shape.
- No unreviewed output. Run the self-review scan before finalizing.
Authority Hierarchy
When deciding what to use:
- User's requested content and product context — source of truth for meaning.
- Postrboard behavioral rules in this file — source of truth for taste.
postrboard.css — source of truth for class names, tokens, and component APIs.design-system.html — source of truth for live examples and edge cases.- Your general design knowledge — only when it does not conflict with the above.
If you need exact classes, read postrboard.css. If you need examples, read design-system.html. Do not inline the whole reference into your reasoning.
Required Setup
Use the framework correctly before designing.
<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">
Use <html data-mode="light">, <html data-mode="dark">, or omit data-mode for system preference.
Docs: https://burkeholland.github.io/postrboard-design
Postrboard Personality
Postrboard feels like:
- A developer tool with editorial restraint.
- Dense information made breathable.
- Terminal-adjacent, not cyberpunk.
- Polished without looking venture-backed by default.
- Confident enough to leave space empty.
- Built from real product surfaces, not Dribbble sections.
Postrboard does not feel like:
- Gradient blob SaaS.
- Emoji-and-card dashboards.
- “Unlock your potential” landing pages.
- Centered hero plus three benefit cards.
- Purple-blue glassmorphism.
- Fake enterprise trust walls.
Quick Decision Tree
Choose structure from the content type, not from habit.
1. Is the user asking for a product page or landing page?
If the product is technical, workflow-based, or developer-facing:
- Lead with a real workflow slice: command, config, diff, dashboard row, event stream, or before/after state.
- Pair prose with an artifact, not an illustration.
- Structure: problem context → working surface → specific capabilities → consequence/action.
If the product is conceptual or early-stage:
- Lead with a crisp positioning statement and one concrete example.
- Use fewer sections. Show the idea operating on real inputs.
- Structure: claim → example → mechanics → next step.
If the product is trust/compliance/security-led:
- Lead with proof, constraints, auditability, or risk reduction.
- Use tables, logs, policies, status panels, and evidence blocks.
- Structure: risk → control surface → verification → adoption path.
2. Is the user asking for an app/dashboard?
If data is primary:
- Start with navigation/context, then the most important table, log, queue, chart, or status surface.
- Keep summary cards subordinate to the work surface.
- Structure: context bar → filters/actions → primary data surface → secondary detail.
If action is primary:
- Make the next action unmistakable.
- Show required inputs and consequences before decoration.
- Structure: current state → available action → preview/result → confirmation.
If monitoring is primary:
- Use calm density: status, trends, exceptions, timestamps.
- Avoid celebratory cards. Show what changed and what needs attention.
- Structure: system state → exceptions → recent activity → drill-down.
3. Is the user asking for docs, reference, or developer education?
- Lead with the smallest working example.
- Use code, callouts, steps, and compact navigation.
- Structure: outcome → install/setup → example → options → troubleshooting.
4. Is the user asking for a component?
- Design the component around its state model.
- Include default, empty, loading, error, and success states when relevant.
- Structure internally by state, not by visual flourish.
5. Is the content sparse?
- Do not inflate it into a full landing page.
- Create a focused single-screen composition, placeholder honestly, or ask the surrounding UI to carry context.
Approved Layout Postures
Pick one dominant posture. Do not mix all of them.
Workflow-led
Use when the product helps someone do a task.
- Anchor the page with a realistic work surface.
- Show inputs, transformation, and output.
- Best elements: terminal, command strip, editor pane, event timeline, task list.
Evidence-led
Use when trust matters.
- Put proof before persuasion.
- Show logs, policies, checks, uptime, audit trails, typed metadata.
- Avoid testimonials unless provided by the user.
Data-led
Use when users manage or interpret information.
- Prioritize tables, queues, filters, and summaries.
- Let density be beautiful. Use whitespace to group, not to dilute.
Editorial-led
Use when explaining an idea, announcement, or narrative.
- Use strong hierarchy, short sections, and sharp prose.
- Prefer pull quotes, side notes, and code-adjacent examples over feature grids.
Conversion-led
Use only when the request is explicitly marketing/sales.
- One primary CTA.
- Benefits must tie to concrete product behavior.
- Replace testimonial/pricing filler with proof, screenshots, examples, or honest placeholders.
AI Design Tells: P0 Blockers
Scan every emitted surface for these. If found, revise before output.
| Tell |
Symptom |
Why it reads as AI slop |
Replacement |
| Generic hero stack |
Huge centered headline, vague subhead, two CTAs |
Default SaaS average |
Left-aligned claim plus concrete product surface |
| Three feature cards |
“Fast / Secure / Easy” grid |
Filler pretending to be structure |
Show workflow steps, states, or actual capabilities |
| Fake metrics |
“10x faster”, “99.9%”, “1M users” without source |
Invented credibility |
Use “Metric pending”, real user-provided data, or remove |
| Gradient blob background |
Purple/blue glow with no meaning |
Trend mimicry |
Subtle token gradient, border, or no decoration |
| Icon confetti |
Same-size icon above every card |
Visual noise |
Use text hierarchy; add icons only where they disambiguate |
| Buzzword copy |
“Transform your workflow”, “unlock potential” |
Says nothing testable |
Name the input, action, output, and consequence |
| Repetitive cards |
Identical cards with swapped nouns |
Template smell |
Vary form by content: table, timeline, code, checklist, stat |
| Floating testimonial |
Quote/avatar/company invented or ornamental |
Fake social proof |
Use provided quotes only; otherwise show evidence or omit |
| Oversized CTA band |
Final gradient box repeating headline |
Formulaic ending |
End with next practical step, docs link, command, or compact CTA |
| Decorative dashboard |
Charts/cards with meaningless labels |
Looks like mock data |
Use domain-specific rows, logs, statuses, or honest placeholders |
| Excess rounded glass |
Blur, transparency, giant radius everywhere |
Generic “premium” effect |
Use restrained surfaces, borders, soft shadows |
| Centered everything |
All sections aligned center |
No editorial judgment |
Use left alignment and asymmetric content rhythm |
A single P0 tell is enough to block output.
Honest Placeholder Rule
When real content is missing, be explicit.
Use:
- “Customer quote pending”
- “Integration name”
- “Metric not yet measured”
- “Example event payload”
- “Connect data source to populate this table”
Do not use:
- Fake people, logos, avatars, companies, or testimonials.
- Fake growth metrics.
- Lorem ipsum in product surfaces.
- Placeholder copy that sounds finished.
Placeholders should reveal what belongs there, not pretend the page is complete.
Copy Rules
Postrboard copy is specific, compressed, and operational.
Write like this:
- “Replay failed jobs from the last deploy.”
- “Compare config drift before merging.”
- “Ship a hosted status page from your incident log.”
- “Paste a webhook payload; get a typed handler.”
Do not write like this:
- “Streamline your workflow.”
- “Powerful insights at your fingertips.”
- “Everything you need to succeed.”
- “Beautifully designed for modern teams.”
Every headline should pass this test: Could this appear on 500 unrelated startup sites? If yes, rewrite.
Class Usage Guidance
Do not memorize the whole framework. Use these anchors, then read postrboard.css for exact APIs.
Core layout:
container for page width.stack for vertical rhythm.cluster for horizontal grouping.- Grid/card utilities for grouped content only when content deserves grouping.
Core typography:
- Display classes for one major claim.
- Body/muted/meta classes for hierarchy.
- Mono classes for commands, labels, metadata, logs, and technical texture.
Core components:
- Buttons: one primary action, secondary actions quiet.
- Cards/panels: contain meaningful state, not filler.
- Badges: status or metadata only.
- Terminal/code components: use when the product is command/config/code/workflow oriented.
- Forms/tables/nav/alerts: use native framework classes before custom CSS.
Customization:
- Compose with CSS variables from
postrboard.css.
- Do not introduce new color systems, font stacks, shadow recipes, or spacing scales.
- Custom CSS is acceptable for layout composition and product-specific surfaces.
Approved component library: shadcn/ui only if the project already uses it or the user asks for React components. Style it with Postrboard tokens.
Composition Rules
- Start from the most truthful product artifact: table, command, editor, timeline, form, diff, log, or config.
- Add prose only where it clarifies the artifact.
- Prefer fewer sections with stronger internal structure.
- Use asymmetry: artifact beside claim, metadata beside content, timeline beside outcome.
- Vary content shapes. Do not make every idea a card.
- Keep color rare. Accent action, state, or focus — not decoration.
- Use mono type as texture and information, not as a gimmick.
- Leave whitespace around important objects; do not pad weak ideas into importance.
Self-Review Scan
Before final output, inspect every page/component you generated.
Scan 1: Structure
- Did I choose a posture from the decision tree?
- Is the primary surface specific to the user's content?
- Did I avoid Hero → Features → Testimonials → CTA unless explicitly required?
Scan 2: Content
- Are all claims specific and testable?
- Are placeholders honest?
- Did I remove invented metrics, quotes, logos, and avatars?
Scan 3: Visual Taste
- Is alignment mostly left or purposefully asymmetric?
- Is there only one dominant accent?
- Did I avoid gradient blobs, icon grids, and repeated cards?
Scan 4: Framework Use
- Are fonts and CSS loaded correctly?
- Did I use Postrboard classes/tokens before custom CSS?
- Would reading
postrboard.css reveal a better native class I should use?
If any answer fails, revise. Do not explain the failure; fix the output.
Final Output Standard
A successful Postrboard result should feel:
- Specific to this product.
- Calm but not empty.
- Technical without being hostile.
- Editorial without being precious.
- Polished without obvious AI tells.
If the page could be renamed to another startup by changing only the logo, it is not done.
1---2name: postrboard3description: Apply the Postrboard design language to frontend work. Quiet CSS for loud products, code-native, restrained, non-generic.4---56# Postrboard Skill78You are designing with **Postrboard CSS**. Your job is not to make a pretty SaaS page. Your job is to make the product feel specific, intentional, code-native, and calm.910**Quiet CSS for loud products.** The framework should recede. The product, workflow, and data should speak.1112If this skill conflicts with generic web-design instincts, this skill wins.1314---1516## P0 Behavioral Rules1718These rules block output. Do not emit UI until they pass.19201. **No generic SaaS structure.** Never default to Hero → Features → Testimonials → Pricing → CTA.212. **No decorative emptiness.** Every card, badge, stat, gradient, icon, and section must carry product meaning.223. **No fake specificity.** Do not invent numbers, logos, quotes, avatars, customers, or metrics. Use honest placeholders.234. **No centered marketing fog.** Prefer left-aligned, information-dense layouts. Center only for narrow confirmations, empty states, or single-purpose prompts.245. **No rainbow styling.** One dominant accent per surface. Coral for action/brand, azure for information, sage for success/progress.256. **No emoji. Ever.** Never use emoji as iconography, decoration, or section markers. Use SVG icons from Lucide, Phosphor, or Tabler sized to `--icon-sm`/`--icon-md`/`--icon-lg` tokens. If no icon clarifies, use none.267. **No stock icon grids.** Icons are optional, small, and clarifying. They are not content.278. **No bloated copy.** Labels must name the actual object, action, input, output, or consequence.289. **No arbitrary CSS values.** Use Postrboard tokens/classes. Custom CSS may compose tokens, not replace them.2910. **No template recipes.** Use layout decisions from the content. Do not copy a canned page shape.3011. **No unreviewed output.** Run the self-review scan before finalizing.3132---3334## Authority Hierarchy3536When deciding what to use:37381. **User's requested content and product context** — source of truth for meaning.392. **Postrboard behavioral rules in this file** — source of truth for taste.403. **`postrboard.css`** — source of truth for class names, tokens, and component APIs.414. **`design-system.html`** — source of truth for live examples and edge cases.425. Your general design knowledge — only when it does not conflict with the above.4344If you need exact classes, read `postrboard.css`. If you need examples, read `design-system.html`. Do not inline the whole reference into your reasoning.4546---4748## Required Setup4950Use the framework correctly before designing.5152```html53<link rel="preconnect" href="https://fonts.googleapis.com">54<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>55<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">56<link rel="stylesheet" href="https://burkeholland.github.io/postrboard-design/postrboard.min.css">57```5859Use `<html data-mode="light">`, `<html data-mode="dark">`, or omit `data-mode` for system preference.6061Docs: https://burkeholland.github.io/postrboard-design6263---6465## Postrboard Personality6667Postrboard feels like:6869- A developer tool with editorial restraint.70- Dense information made breathable.71- Terminal-adjacent, not cyberpunk.72- Polished without looking venture-backed by default.73- Confident enough to leave space empty.74- Built from real product surfaces, not Dribbble sections.7576Postrboard does **not** feel like:7778- Gradient blob SaaS.79- Emoji-and-card dashboards.80- “Unlock your potential” landing pages.81- Centered hero plus three benefit cards.82- Purple-blue glassmorphism.83- Fake enterprise trust walls.8485---8687## Quick Decision Tree8889Choose structure from the content type, not from habit.9091### 1. Is the user asking for a product page or landing page?9293**If the product is technical, workflow-based, or developer-facing:**94- Lead with a real workflow slice: command, config, diff, dashboard row, event stream, or before/after state.95- Pair prose with an artifact, not an illustration.96- Structure: problem context → working surface → specific capabilities → consequence/action.9798**If the product is conceptual or early-stage:**99- Lead with a crisp positioning statement and one concrete example.100- Use fewer sections. Show the idea operating on real inputs.101- Structure: claim → example → mechanics → next step.102103**If the product is trust/compliance/security-led:**104- Lead with proof, constraints, auditability, or risk reduction.105- Use tables, logs, policies, status panels, and evidence blocks.106- Structure: risk → control surface → verification → adoption path.107108### 2. Is the user asking for an app/dashboard?109110**If data is primary:**111- Start with navigation/context, then the most important table, log, queue, chart, or status surface.112- Keep summary cards subordinate to the work surface.113- Structure: context bar → filters/actions → primary data surface → secondary detail.114115**If action is primary:**116- Make the next action unmistakable.117- Show required inputs and consequences before decoration.118- Structure: current state → available action → preview/result → confirmation.119120**If monitoring is primary:**121- Use calm density: status, trends, exceptions, timestamps.122- Avoid celebratory cards. Show what changed and what needs attention.123- Structure: system state → exceptions → recent activity → drill-down.124125### 3. Is the user asking for docs, reference, or developer education?126127- Lead with the smallest working example.128- Use code, callouts, steps, and compact navigation.129- Structure: outcome → install/setup → example → options → troubleshooting.130131### 4. Is the user asking for a component?132133- Design the component around its state model.134- Include default, empty, loading, error, and success states when relevant.135- Structure internally by state, not by visual flourish.136137### 5. Is the content sparse?138139- Do not inflate it into a full landing page.140- Create a focused single-screen composition, placeholder honestly, or ask the surrounding UI to carry context.141142---143144## Approved Layout Postures145146Pick one dominant posture. Do not mix all of them.147148### Workflow-led149Use when the product helps someone do a task.150- Anchor the page with a realistic work surface.151- Show inputs, transformation, and output.152- Best elements: terminal, command strip, editor pane, event timeline, task list.153154### Evidence-led155Use when trust matters.156- Put proof before persuasion.157- Show logs, policies, checks, uptime, audit trails, typed metadata.158- Avoid testimonials unless provided by the user.159160### Data-led161Use when users manage or interpret information.162- Prioritize tables, queues, filters, and summaries.163- Let density be beautiful. Use whitespace to group, not to dilute.164165### Editorial-led166Use when explaining an idea, announcement, or narrative.167- Use strong hierarchy, short sections, and sharp prose.168- Prefer pull quotes, side notes, and code-adjacent examples over feature grids.169170### Conversion-led171Use only when the request is explicitly marketing/sales.172- One primary CTA.173- Benefits must tie to concrete product behavior.174- Replace testimonial/pricing filler with proof, screenshots, examples, or honest placeholders.175176---177178## AI Design Tells: P0 Blockers179180Scan every emitted surface for these. If found, revise before output.181182| Tell | Symptom | Why it reads as AI slop | Replacement |183|---|---|---|---|184| Generic hero stack | Huge centered headline, vague subhead, two CTAs | Default SaaS average | Left-aligned claim plus concrete product surface |185| Three feature cards | “Fast / Secure / Easy” grid | Filler pretending to be structure | Show workflow steps, states, or actual capabilities |186| Fake metrics | “10x faster”, “99.9%”, “1M users” without source | Invented credibility | Use “Metric pending”, real user-provided data, or remove |187| Gradient blob background | Purple/blue glow with no meaning | Trend mimicry | Subtle token gradient, border, or no decoration |188| Icon confetti | Same-size icon above every card | Visual noise | Use text hierarchy; add icons only where they disambiguate |189| Buzzword copy | “Transform your workflow”, “unlock potential” | Says nothing testable | Name the input, action, output, and consequence |190| Repetitive cards | Identical cards with swapped nouns | Template smell | Vary form by content: table, timeline, code, checklist, stat |191| Floating testimonial | Quote/avatar/company invented or ornamental | Fake social proof | Use provided quotes only; otherwise show evidence or omit |192| Oversized CTA band | Final gradient box repeating headline | Formulaic ending | End with next practical step, docs link, command, or compact CTA |193| Decorative dashboard | Charts/cards with meaningless labels | Looks like mock data | Use domain-specific rows, logs, statuses, or honest placeholders |194| Excess rounded glass | Blur, transparency, giant radius everywhere | Generic “premium” effect | Use restrained surfaces, borders, soft shadows |195| Centered everything | All sections aligned center | No editorial judgment | Use left alignment and asymmetric content rhythm |196197A single P0 tell is enough to block output.198199---200201## Honest Placeholder Rule202203When real content is missing, be explicit.204205Use:206- “Customer quote pending”207- “Integration name”208- “Metric not yet measured”209- “Example event payload”210- “Connect data source to populate this table”211212Do not use:213- Fake people, logos, avatars, companies, or testimonials.214- Fake growth metrics.215- Lorem ipsum in product surfaces.216- Placeholder copy that sounds finished.217218Placeholders should reveal what belongs there, not pretend the page is complete.219220---221222## Copy Rules223224Postrboard copy is specific, compressed, and operational.225226Write like this:227- “Replay failed jobs from the last deploy.”228- “Compare config drift before merging.”229- “Ship a hosted status page from your incident log.”230- “Paste a webhook payload; get a typed handler.”231232Do not write like this:233- “Streamline your workflow.”234- “Powerful insights at your fingertips.”235- “Everything you need to succeed.”236- “Beautifully designed for modern teams.”237238Every headline should pass this test: **Could this appear on 500 unrelated startup sites?** If yes, rewrite.239240---241242## Class Usage Guidance243244Do not memorize the whole framework. Use these anchors, then read `postrboard.css` for exact APIs.245246Core layout:247- `container` for page width.248- `stack` for vertical rhythm.249- `cluster` for horizontal grouping.250- Grid/card utilities for grouped content only when content deserves grouping.251252Core typography:253- Display classes for one major claim.254- Body/muted/meta classes for hierarchy.255- Mono classes for commands, labels, metadata, logs, and technical texture.256257Core components:258- Buttons: one primary action, secondary actions quiet.259- Cards/panels: contain meaningful state, not filler.260- Badges: status or metadata only.261- Terminal/code components: use when the product is command/config/code/workflow oriented.262- Forms/tables/nav/alerts: use native framework classes before custom CSS.263264Customization:265- Compose with CSS variables from `postrboard.css`.266- Do not introduce new color systems, font stacks, shadow recipes, or spacing scales.267- Custom CSS is acceptable for layout composition and product-specific surfaces.268269Approved component library: **shadcn/ui only if the project already uses it or the user asks for React components.** Style it with Postrboard tokens.270271---272273## Composition Rules2742751. Start from the most truthful product artifact: table, command, editor, timeline, form, diff, log, or config.2762. Add prose only where it clarifies the artifact.2773. Prefer fewer sections with stronger internal structure.2784. Use asymmetry: artifact beside claim, metadata beside content, timeline beside outcome.2795. Vary content shapes. Do not make every idea a card.2806. Keep color rare. Accent action, state, or focus — not decoration.2817. Use mono type as texture and information, not as a gimmick.2828. Leave whitespace around important objects; do not pad weak ideas into importance.283284---285286## Self-Review Scan287288Before final output, inspect every page/component you generated.289290### Scan 1: Structure291- Did I choose a posture from the decision tree?292- Is the primary surface specific to the user's content?293- Did I avoid Hero → Features → Testimonials → CTA unless explicitly required?294295### Scan 2: Content296- Are all claims specific and testable?297- Are placeholders honest?298- Did I remove invented metrics, quotes, logos, and avatars?299300### Scan 3: Visual Taste301- Is alignment mostly left or purposefully asymmetric?302- Is there only one dominant accent?303- Did I avoid gradient blobs, icon grids, and repeated cards?304305### Scan 4: Framework Use306- Are fonts and CSS loaded correctly?307- Did I use Postrboard classes/tokens before custom CSS?308- Would reading `postrboard.css` reveal a better native class I should use?309310If any answer fails, revise. Do not explain the failure; fix the output.311312---313314## Final Output Standard315316A successful Postrboard result should feel:317318- Specific to this product.319- Calm but not empty.320- Technical without being hostile.321- Editorial without being precious.322- Polished without obvious AI tells.323324If the page could be renamed to another startup by changing only the logo, it is not done.
sugatoray