quell Base v1.0.0

A safety-first CSS baseline for the modern web. quell-base.css provides browser normalization, design tokens, and minimal visual defaults in a fully overridable cascade layered architecture.

Overview

quell-base.css is structured into five named @layer blocks. Layer priority is ascending — the last declared layer wins. Unlayered styles (your project theme) always beat every layer in quell-base.css.

@layer ghost_tokens, reset, baseline, forms, utilities;

Usage

Standalone Baseline: Use as a direct, drop-in reset to eliminate browser style inconsistencies and establish a predictable typographical foundation for simple HTML layouts.

With Your Project

<link rel="stylesheet" href="quell-base.css"> <!-- always loads first -->
<link rel="stylesheet" href="your-project-theme.css">

System Foundation: Use as the required first file in the quell loading order to declare global cascade layers and initialize fallback parameters before downstream theme or component sheets load.

System Foundation

<!-- system load order -->
 quell-base.css > quell.core.css > quell-light.css

Override Surfaces

Three ways to override quell-base.css, in ascending power:

A. Token override — Re-declare a custom property on :root outside any @layer. Unlayered properties always win, regardless of load order. No specificity required.

:root { --color-accent: #7c3aed; }

B. Layer append — Reopen a layer in your own sheet to add or modify rules within it.

@layer baseline { :where(h1) { font-size: 2.5rem; } }

C. Unlayered rule — Any selector outside a layer beats all quell-base.css layers.

h1 { font-size: 2.5rem; }

!important is never required to override quell-base.css.

Layer 1 — ghost_tokens

Purpose

Provides fully-resolved fallback values for every design token consumed by quell-base.css. Because the browser parses :root custom properties before the first paint, all var() calls are always resolved — even if a theme sheet hasn’t loaded yet. This is the FOUC firewall.

--{category}-{variant}: {value}

• Categories: font, color, space, size, radius, border, shadow, motion

Typography Tokens

Color Tokens — Neutral Scale

Color Tokens — Semantic Aliases

Color Tokens — State Palette

Spacing Tokens

4px base, geometric scale.

Size Tokens — Content Widths

Border & Radius Tokens

Layer 2 — reset

Layer 3 — baseline

Layer 2 — reset

Purpose

Erases browser inconsistencies. Zero visual opinions. Every selector is wrapped in :where() — specificity is (0,0,0), so any plain selector in a later layer or your theme wins.

What reset does NOT do: - Set colors, fonts, or spacing — that is baseline‘s job - Normalize form appearance — that is forms’ job - Apply any visual styling

Key Rules

Layer 3 — baseline

Purpose

Applies minimal, intentional visual design by consuming ghost tokens. This is what makes quell-base.css look like something beyond a bare reset.

Specificity contract: :where() throughout → (0,0,0). Exception: :focus-visible (see Focus section).

Key Rules

Focus Visible

:focus-visible is intentionally NOT wrapped in :where(). Specificity is (0,1,0).

Why: Focus rings are a critical accessibility mechanism. A slightly elevated specificity prevents them from being silently suppressed by a cascade accident in a downstream stylesheet. To override, use :focus-visible { } in your own unlayered sheet.

:focus-visible {
  outline:        2px solid var(--color-focus-ring);
  outline-offset: var(--space-1);
  border-radius:  var(--radius-sm);
  box-shadow:     var(--shadow-focus);
}

:focus:not(:focus-visible) {
  outline:    none;
  box-shadow: none;
}

Reduced Motion

@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}

quell-base.css uses no animations itself, but this query is present so downstream utilities can reference or build on it.

Layer 4 — forms

Purpose

Modern form normalization. Isolated from baseline so that headless UI libraries (Radix, Shoelace, Ark, etc.) can re-declare this entire layer without touching reset or baseline.

Specificity: :where() throughout → (0,0,0).

What normalization means here: - Inherit document font (browsers don’t do this for inputs by default) - Normalize cross-browser appearance quirks - Provide accessible defaults for interactive states - No visual opinions beyond what is required for usability

Key Rules

Layer 5 — utilities

Purpose

Reserved slot. Intentionally empty in quell-base.css core.

For downstream systems

Atomic utility classes appended to this layer automatically win over all lower quell-base.css layers, because layer priority equals declaration order. No specificity hacks needed.

@layer utilities {
  .sr-only  { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

System Configuration

color-scheme: light dark is set on :root inside ghost_tokens. This tells the browser to use the user’s OS preference for light/dark mode. Override with an unlayered rule:

:root { color-scheme: light; } /* force light mode */

Specificity Summary

Key Design Decisions

• Zero Explicit Overrides Eliminates !important from layout styling. The flag is reserved exclusively for [hidden] elements and prefers-reduced-motion states to secure accessibility barriers and browser primitives.
• FOUC firewall — ghost_tokens ensures no var() is ever empty before a theme loads.
• Zero specificity resets — :where() wrapping throughout reset and baseline means a single unstyled selector in your theme or utility sheet always wins.
• Forms are isolated — The forms layer can be fully replaced by headless UI libraries without affecting reset or baseline.
• Accessibility by default — Focus visibility, reduced motion, accent-color, :user-invalid over :invalid, and touch-action: manipulation are all built in.
• Logical properties — RTL-safe properties (text-align: start, padding-inline-start, border-inline-start, etc.) are used throughout.

© 2026 Ortiz Design Studio. | quell system documentation.