Foundations

The @paperstack/foundations package provides the lowest-level stylesheet layer: a CSS reset, sensible element defaults, the prose system for long-form content, and accessibility helpers.

CSS Reset

The reset is an opinionated modern reset that normalises box-sizing, removes default margins and padding, and sets sensible typographic defaults. It deliberately avoids overriding properties that conflict with the token system.

@use "@paperstack/foundations/src/reset/index.scss";

What the reset does:

• Sets box-sizing: border-box on all elements
• Removes default margin and padding from block elements
• Sets font-family: inherit and line-height: inherit
• Normalises media elements (img, video) to display: block
• Respects prefers-reduced-motion for animations

Base Styles

Base styles apply token values to plain HTML elements so that unstyled semantic HTML looks correct out of the box.

@use "@paperstack/foundations/src/base/index.scss";

• body — background, text color, font-family from tokens
• h1–h6 — size, weight, line-height from type scale
• a — color, underline style, focus ring
• code, pre — mono font, background tint
• Form elements — basic font inheritance

Prose

The prose system wraps long-form content with optimal reading typography. Apply the .ps-prose class to any container to enable it.

@use "@paperstack/foundations/src/prose/index.scss";

<article class="ps-prose">
  <h1>Article Title</h1>
  <p>Paragraph text flows at the reading width...</p>
  <ul><li>List items</li></ul>
</article>

Prose sets max-width to --content-width-reading (720px), uses the reading font stack, and applies generous line-height for legibility.

Accessibility

Accessibility helpers include focus ring styles, skip link styles, live region helpers, and screen-reader utility classes.

@use "@paperstack/foundations/src/accessibility/index.scss";

• Focus rings — All interactive elements get a visible, high-contrast focus ring using :focus-visible. The ring color uses --color-focus-ring.
• Skip links — .ps-skip-link is visually hidden until focused, then appears at the top of the viewport.
• Screen-reader text — .ps-sr-only / .ps-visually-hidden hide content visually without removing it from the accessibility tree.
• Reduced motion — A global prefers-reduced-motion override collapses all --duration-* tokens to 1ms.

Globals Entry

The recommended import is the single globals.scss entry point, which combines reset, base, prose, and accessibility into one import:

@use "@paperstack/foundations/src/globals.scss";

This is the only import most projects need from foundations.