Mattress Types Guide
First implemented parent page using the reusable guide template.
design_services Source of truth
Nappedia Design Guidelines
This page defines the reusable design system for Nappedia: global chrome, tokens, components, table behavior, long-form layouts, and the first parent/child article template. New pages should reuse these patterns before adding page-specific CSS.
Source of truth
Shared CSS first
Use base, layout, components, reading, and guide-template styles before adding page CSS.
Reusable template
Parent and child guides
One implemented pattern now covers the mattress-types hub and memory-foam child page.
Validation standard
Browser plus checks
Confirm desktop, mobile, table scrolling, header behavior, and CSS/JS file-size limits.
foundation Core principles
The design system exists to keep pages useful, dense, and maintainable.
Every page should help users make a mattress decision without relearning the interface. Shared components carry the visual system; page-specific CSS handles only truly local behavior.
| Principle | Rule | Why it matters |
|---|---|---|
| Evidence first | Use decision framing, comparison tables, evidence limits, details, and takeaway in that order for dense content. | Readers can scan before committing to a long section. |
| Reusable by default | Use shared stylesheets before page CSS. | Prevents one-off layouts and keeps future pages predictable. |
| Crawlable content | Keep indexable article content in static HTML. | Maintains the strongest SEO baseline for a static site. |
| Compact clarity | Favor readable density over decoration. | Mattress research pages need trust and speed, not spectacle. |
| Explicit limits | Claims must state mechanism, evidence type, uncertainty, implication, and edge case. | Makes editorial judgment auditable. |
palette Design tokens
Tokens live in styles-base.css and should be reused everywhere.
| Token group | Source | Required use |
|---|---|---|
| Color | :root in styles-base.css | Use semantic tokens such as --text, --muted, --line, and --accent. |
| Spacing | --space-1 through --space-8, --section-gap | Use spacing tokens for padding, gaps, and major section rhythm. |
| Radius | --radius-xs through --radius-xl | Cards and controls generally use 6-16px radius. |
| Width | --shell, --shell-wide | Page content uses --shell; top navigation uses --shell-wide. |
| Typography | Plus Jakarta Sans and Outfit | Keep letter spacing at 0. Do not use viewport-based font scaling. |
web_asset Global page chrome
Header, breadcrumbs, and footer must behave the same across tabs.
| Element | Standard |
|---|---|
| Header | Sticky at the top of the viewport, 56px tall, defined in styles-base.css. |
| Top navigation | Primary tabs: Reviews, Scoring, Buying Guide, Size Guide, Quiz, Design Guidelines, Settings. |
| Header actions | One primary action maximum in the top-right action area; secondary action only when it helps orientation. |
| Breadcrumbs | Use the shared .breadcrumbs pattern below the header and above <main>. |
| Footer | No placeholder links. Footer links must point to existing pages only. |
| Scroll offset | Anchor targets use the shared top offset from styles-base.css. |
widgets Shared components
Use component classes before inventing local styles.
| Need | Component |
|---|---|
| Primary action | .button |
| Secondary action | .button-secondary |
| Tertiary action | .button-tertiary |
| Content panel | .section-card or .footer-card |
| Section header | .section-head, .section-tag, .section-title, .section-blurb |
| Long-form table | .table-wrap or .table-scroll containing .data-table or .guide-table |
| Sidebar TOC | .sidebar, .toc-card, .toc-list, #toc-progress |
| Evidence note | .evidence-note, optionally .warning or .success |
table_chart Tables
Tables are the default for real comparisons.
Use tables for three or more comparable options, criteria, claims, or rules. Wrap wide tables so mobile users scroll the table, not the whole page.
Table columns must be parallel. Do not mix construction type, material, feature, certification, and marketing claim in the same taxonomy column unless the section explicitly explains the distinction.
account_tree Parent / child template
Use one reusable structure for article families.
Add guide-template-page reading-page to the body and load styles-guide-template.css for parent hubs and child detail pages.
| Page role | Required pattern |
|---|---|
| Parent hub | Hero, summary band, table of contents, quick answer, comparison matrix, taxonomy rules, child-link section, fit/quality guidance, FAQ, sources. |
| Child detail page | Hero, summary band, table of contents, quick answer, how it works, variants/details, best for/avoid, quality checklist, risks, buying checklist, FAQ, sources. |
| Internal links | Parent hubs link down to live child pages. Child pages link up to the parent hub in the breadcrumb and first meaningful content area. |
| Planned pages | Mention planned child pages as text only until the URL exists. Never create placeholder href="#" links. |
Memory Foam Mattress Guide
First implemented child page using the same structure.
dashboard_customize Page types
Each page type has a clear layout role.
| Page type | Design standard |
|---|---|
| Review page | Score, price, trial/returns, and main CTA stay visible above the fold. Scope review-specific styles to .review-page. |
| Reviews index | Dense review cards, clear reviewed vs coming-soon states, no placeholder links. |
| Long-form buying/scoring guide | Use .reading-page, shared TOC, shared table wrappers, and evidence-first section order. |
| Parent/child guides | Use .guide-template-page and the parent/child template above. |
| Quiz/tool pages | Tool appears in the first viewport; supporting science follows below. |
| Info/policy pages | Use .info-page reading-page; no TOC unless the page is long enough to need one. |
code CSS ownership
Global rules belong in shared stylesheets, not page files.
| File | Ownership |
|---|---|
styles-base.css | Tokens, resets, typography basics, global header, navigation, buttons, labels. |
styles-layout.css | Page shell, hero primitives, breadcrumbs, layout grid, sidebar, TOC, footer. |
styles-components.css | Reusable content components, cards, lists, score displays, FAQs, sources. |
styles-reading.css | Long-form typography, article metadata, table wrappers, reading-page spacing. |
styles-guide-template.css | Parent/child guide page shell and reusable guide-specific blocks. |
| Page CSS | Only page-specific behavior that cannot be expressed with shared components. |
format_line_spacing Spacing
Spacing should come from tokens and shared layout classes.
| Area | Rule |
|---|---|
| Major page sections | Use var(--section-gap). |
| Content stacks | Use .content-stack and shared grid gaps. |
| Adjacent content blocks | Long-form cards need at least var(--space-5) between sibling callouts, fact cards, key takeaways, and comparable blocks. |
| Footer gap | Let .site-footer own the pre-footer gap. |
| Mobile tables | Parent containers must allow shrinking and table wrappers must scroll horizontally. |
fact_check Validation
Design changes need browser checks and code hygiene checks.
Code checks
- No CSS or JS file exceeds 500 lines; target under 400.
- Run available syntax, lint, type, build, or smoke checks.
- Update this page and
DESIGN_GUIDELINES.mdwhen reusable rules change.
Browser checks
- Verify desktop and mobile layouts.
- Check header, breadcrumbs, TOC, tables, footer, and sticky elements.
- Confirm text does not overlap or overflow buttons/cards.
Content checks
- Ensure tables compare parallel criteria.
- Confirm child pages link to parent hubs.
- Confirm no placeholder links ship on indexable pages.