This is a test page that renders every foundation component. It verifies the CSS design system works before building real content. All sections, typography, grids, buttons, cards, and form inputs are shown below.
Body text at 1rem (16px). The default line-height is 1.6 for comfortable reading. This paragraph demonstrates the text-wrap: pretty property that avoids orphans.
Small text at 0.875rem (14px)
Extra-small text at 0.75rem (12px)
Grid items stack on mobile, become 2 columns at 768px.
Each card uses container-type: inline-size for future container queries.
Stacks on mobile, 2-col at tablet, 3-col at desktop.
Cards have subtle box-shadow and rounded corners.
Padding uses the spacing scale token --space-md.
Dark sections invert text colors automatically. Headings become white, links become orange, and focus rings use the orange accent color. This is a link in a dark section.
Uses the JSMD cream brand color as background. Good for testimonials, callouts, or softer content blocks.
Links use the gold brand color with a thin underline. On hover they transition to navy. The underline offset keeps text readable.
The .prose class caps line length at 65ch for readability. It's scoped — only applied where needed, not globally on all paragraphs.
The .flow utility adds consistent vertical spacing between child elements.
Each child gets margin-top: var(--space-md) (24px).
This creates a clean, even rhythm without manual margin on each element.