Preflight

vel-src: reset.css

VeloraCSS includes an opinionated CSS reset (preflight) that normalizes browser defaults and establishes dark-surface-first defaults.

Class	Properties
box-sizing: border-box	Applied to all elements via , ::before, *::after
margin: 0	All elements start with no margin
body background	var(--vel-surface-bg) — dark surface default
body color	var(--vel-color-text) — light text default
img, video	display: block; max-width: 100%
font-family	var(--vel-font-sans)
line-height	1.5 on body
-webkit-font-smoothing	antialiased on body
button, input, select, textarea	font: inherit; margin: 0
h1–h6	font-size: inherit; font-weight: inherit
a	color: inherit; text-decoration: inherit
ol, ul	list-style: none; padding: 0

Examples

Preflight is automatic — no class needed

Clean baseline

No browser quirks to fight.

example.html

<!-- Just include velora.css and preflight is applied globally -->
<link rel="stylesheet" href="/velora.css" />

<!-- Your HTML starts with normalized, dark-surface defaults -->
<body>
  <h1>Clean baseline</h1>
  <p>No browser quirks to fight.</p>
</body>

Dark surface defaults from preflight

This matches the preflight body defaults

example.html

<!-- body background defaults to var(--vel-surface-bg) = #060b17 -->
<!-- body color defaults to var(--vel-color-text) = #e2e8f0 -->
<!-- No extra classes needed for dark theme base -->

<div style="background:#060b17;color:#e2e8f0;padding:1.5rem;border-radius:0.5rem">
  This matches the preflight body defaults
</div>

Overriding preflight for light mode

example.html

<!-- Opt out of dark defaults by setting surface explicitly -->
<body style="background:#ffffff;color:#0f172a">
  <!-- Light mode app -->
</body>

<!-- Or use theme variables to switch -->
<style>
  :root {
    --vel-surface-bg: #f8fafc;
    --vel-color-text: #0f172a;
  }
</style>