Reboot

Opinionated baseline styles applied to raw HTML elements in a dedicated CSS layer — Chassis's starting point before components and utilities build on top.

@layer reboot

Overview

Reboot normalizes HTML elements with a minimal, opinionated set of styles applied through element selectors only — no classes. It is a maintained fork of Normalize.css with changes that align with Chassis's token-driven architecture and design principles. Additional styling beyond these baselines comes from higher-layer rules (.table, form components, utilities, and so on).

The principles behind Reboot's choices:

Avoid margin-top. Vertical margins can collapse in unexpected ways; a single direction of margin is a simpler mental model.
Block elements use token-based spacing rather than fixed em values, so spacing responds to the active token scale.
Typography on <body> — family, size, weight, line-height — reads from CSS custom properties, making it overridable at runtime without recompiling.
Colors for body text, background, and link states read from CSS custom properties tied to the Chassis color system, enabling light/dark mode switching without recompiling.
Font-related declarations on inherited elements use inherit wherever possible to keep the cascade simple.

CSS layer

All Reboot rules are wrapped in @layer reboot. The full layer order, declared in scss/_root.scss, is:

@layer colors, theme, config, root, reboot, layout, content, components, custom, helpers, utilities;

This means any unlayered rule (or a rule in a later layer) automatically wins over Reboot without needing increased specificity. Overriding element baselines in a project stylesheet does not require targeting the same selectors or adding !important.

Page defaults

The <html> and <body> elements establish page-wide baselines.

box-sizing: border-box is set on every element — including *::before and *::after — so declared widths are never exceeded by padding or border.

*,
*::before,
*::after {
  box-sizing: border-box;
}

The <body> element receives the following compiled rules:

body {
  margin: 0;
  font: var(--cx-font-weight) var(--cx-font-size)/var(--cx-line-height) var(--cx-font-family);
  color: var(--cx-fg-color);
  text-align: var(--cx-text-align);
  background-color: var(--cx-bg-color);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: oklch(from #000000 l c h / 0);
}

margin: 0 removes the default browser margin. Font properties and colors are applied from CSS custom properties so they can be overridden at runtime:

<body style="--cx-font-family: 'Georgia', serif;">
  <!-- ... -->
</body>

The body-level CSS custom properties are declared at :root alongside all other token-derived variables.

Typography

Reboot establishes typographic baselines for heading elements, paragraph text, and semantic inline elements. All typographic sizing is driven by Chassis Tokens, so changes to the active token set propagate automatically without modifying Reboot's source.

Headings

All <h1>–<h6> elements have margin-top removed and a consistent bottom margin applied. Font family and weight come from Chassis Typography Tokens. Font size and line-height scale responsively across viewport sizes. Headings inherit color from the surrounding document context.

Heading	Example
`<h1></h1>`	h1. Chassis heading
`<h2></h2>`	h2. Chassis heading
`<h3></h3>`	h3. Chassis heading
`<h4></h4>`	h4. Chassis heading
`<h5></h5>`	h5. Chassis heading
`<h6></h6>`	h6. Chassis heading

Paragraphs

All <p> elements have margin-top removed and margin-bottom: 1rem set for consistent vertical spacing.

This is an example paragraph.

<p>This is an example paragraph.</p>

Links

Links receive color and text-decoration from the active Chassis color context. Default, hover, active, and visited states each use a distinct color. Visited link styling is enabled by default and is controlled by $enable-visited-links.

This is an example link

<a href="#">This is an example link</a>

Link color opacity is adjustable via --cx-link-opacity. All link states share the same opacity value, so a single assignment affects the full interaction spectrum:

This is an example link

<a href="#" style="--cx-link-opacity: .5">This is an example link</a>

Placeholder links — <a> elements without an href attribute — are targeted by the more-specific a:not([href]):not([class]) selector and have color and text-decoration reset to their inherited values.

This is a placeholder link

<a>This is a placeholder link</a>

Lists

All lists — <ul>, <ol>, and <dl> — have margin-top removed and margin-bottom: 1rem set. Nested lists have margin-bottom set to zero so inner lists don't add extra spacing between items. <ul> and <ol> receive padding-inline-start: 2rem to establish indent on the logical inline-start axis.

All lists have their top margin removed
And their bottom margin normalized
Nested lists have no bottom margin
- This way they have a more even appearance
- Particularly when followed by more list items
The inline-start padding is set to 2rem

Here's an ordered list
With a few list items
It has the same overall look
As the previous unordered list

Description lists have updated margins for clear hierarchy. <dd> elements reset margin-inline-start to 0 and add margin-bottom: .5rem. <dt> elements are bolded.

Description lists: A description list is perfect for defining terms.
Term: Definition for the term.; A second definition for the same term.
Another term: Definition for this other term.

Code elements

Reboot applies consistent baselines to all four semantic code elements. <pre>, <code>, <kbd>, and <samp> share a monospace font from the Chassis code typography token, with size and line-height set from the same token source.

Inline code

Wrap inline snippets of code with <code>. Escape HTML angle brackets when embedding literal markup.

For example, <section> should be wrapped as inline.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Code blocks

Use <pre> for multi-line code. The element has margin-top removed and margin-bottom: 1rem applied. Nested <code> inside <pre> inherits the element's color and resets word-break to normal.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Variables

Use <var> to indicate mathematical or programming variables.

y = mx + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

User input

Use <kbd> to indicate input typically entered via keyboard. Nested <kbd> elements (for key combinations) lose their padding so the combination reads as a single unit.

To switch directories, type cd followed by the name of the directory.
To edit settings, press Ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd>Ctrl</kbd> + <kbd>,</kbd>

Sample output

Use <samp> to indicate sample output from a program.

This text is meant to be treated as sample output from a computer program.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Horizontal rules

The <hr> element receives consistent margin, border, and opacity values. The border is applied on the logical block axis via border-block-start, with border: 0 clearing any inherited shorthand first. Color, width, margin, and opacity come from Chassis Tokens and are configurable before compiling:

<hr>

Tables

Tables receive minimal resets to establish a clean baseline before the .table component applies its own styling. caption-side: bottom moves captions below the table. border-spacing: 0 removes the default gap between cells. All table section and cell elements have border-width: 0 and border-color: inherit set, making borders invisible by default while still responding to any color set by a parent. Additional borders, padding, and variants come from the .table class.

This is an example table, and this is its caption to describe the contents.
Table heading	Table heading	Table heading	Table heading
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

Form elements

Form elements receive targeted resets for a simpler baseline. The most notable changes:

<fieldset> elements have min-width, padding, margin, and border all reset to 0 so they behave like standard block containers without the browser's default shrink-to-content sizing.
<legend> uses float: left so the fieldset border wraps around it correctly; a + * clear rule clears the float for subsequent content.
<label> is set to display: inline-block to allow margin.
<input>, <select>, <textarea>, <button>, and <optgroup> have margin removed and font-family, font-size, and line-height set to inherit.
<textarea> is restricted to resize: vertical so horizontal resizing cannot break page layout.
<button> and <input> button types receive cursor: pointer when :not(:disabled). This is controlled by $enable-button-pointers, which is true by default.
<button> has border-radius: 0 to remove the macOS Chrome default rounding.

Some date inputs types are not fully supported by the latest versions of Safari and Firefox.

Example legend

Example input

Example email

Example telephone

Example url

Example number

Example search

Example range

Example file input

Example select

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form inputs. Option three is disabled

Example textarea

Example date

Example time

Example password

Example datetime-local

Example week

Example month

Example color

Example output 100

Pointers on buttons

The [role="button"] selector sets cursor: pointer on non-button elements that act as interactive controls. This is separate from $enable-button-pointers, which applies only to actual <button> and <input> button elements.

Non-button element button

<span role="button" tabindex="0">Non-button element button</span>

Misc elements

A handful of miscellaneous elements receive targeted resets that browsers often handle inconsistently.

Address

The <address> element resets font-style from the browser default italic to normal, inherits line-height from the parent, and adds margin-block-end: 1rem. End lines with <br> to preserve the formatting of postal or contact addresses.

ACME Corporation
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

Blockquote

The bare <blockquote> element has its default margin (1em 40px) replaced with 0 0 1rem to match the bottom-only margin pattern used across Reboot. The .blockquote class (defined in the Typography layer) adds font scaling and additional styling for designed quote contexts.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

Abbreviations

The <abbr> element receives text-decoration: underline dotted and cursor: help to signal that a title tooltip is available. text-decoration-skip-ink: none prevents ink skipping from breaking the dotted underline.

The HTML abbreviation element.

Summary

The <summary> element receives display: list-item to preserve the disclosure triangle and cursor: pointer to indicate interactivity.

Some details

More info about the details.

Even more details

Here are even more details about the details.

Hidden attribute

The [hidden] HTML attribute hides elements with display: none. Reboot strengthens this with !important to prevent accidental overrides from display utilities or component rules:

<input type="text" hidden>

To toggle visibility without removing an element from layout flow, use the .invisible class instead — it sets visibility: hidden and leaves the element's space intact.

Feature flags

Several Reboot behaviors are controlled by SCSS settings variables that can be overridden before compiling. All default to true.

Variable	Default	Effect
`$enable-dark-mode`	`true`	Adds `color-scheme: light dark` to `:root` and wires up `data-cx-theme` attribute switching.
`$enable-visited-links`	`true`	Applies visited-state color to `a:visited`.
`$enable-smooth-scroll`	`true`	Applies `scroll-behavior: smooth` at `:root` when `prefers-reduced-motion: no-preference` is active.
`$enable-button-pointers`	`true`	Applies `cursor: pointer` to `<button>` and `<input>` button types when `:not(:disabled)`.

CSS

Reboot source lives in scss/_reboot.scss. Body typography and color custom properties are declared in scss/_root.scss. The body rules and :root custom properties are shown in Page defaults.

Sass variables

Reboot exposes compile-time Sass variables for code elements, keyboard input, and horizontal rules.

<code> element defaults — font family reads from the code typography token, while size, line-height, and color inherit from the parent:

$code-font-family:          var(--font-family-code);
$code-font-size:            inherit;
$code-line-height:          inherit;
$code-color:                inherit;

<pre> has a single color variable, unset by default so the element inherits color from the surrounding context:

$pre-color:                         null;

<kbd> variables control padding, font size, line-height, foreground and background colors, and the font weight of nested <kbd> elements:

$kbd-padding-y:             .125rem;
$kbd-padding-x:             .25rem;
$kbd-font-size:             var(--font-size-code-small);
$kbd-line-height:           var(--line-height-code-small);
$kbd-color:                 var(--fg-main);
$kbd-bg:                    var(--bg-evident);
$nested-kbd-font-weight:    null;

Horizontal rule variables set margin, border width, color, and opacity — all sourced from Chassis Tokens:

$hr-color:                  var(--border-subtle);
$hr-size:                   var(--border-width-medium);
$hr-margin:                 var(--space-medium);
$hr-opacity:                var(--opacity-solid);