@vibe-labs/design-reset

Baseline CSS reset for the Vibe Design System. Sits at the bottom of the cascade as the vibe.reset layer, ensuring every downstream package starts from a consistent, opinionless base.

Installation

@import "@vibe-labs/design-reset";

This must be the first import in any application entry point, before tokens, utilities, or components.

What It Does

Normalises browser defaults across elements:

• Box model set to border-box globally
• Margins, padding, and list styles stripped from typographic and list elements
• Headings reset to inherit font size and weight — styling comes from tokens and components
• Media elements (img, svg, video, etc.) set to block / max-width: 100%
• Form controls inherit font and colour from their context
• Buttons reset to bare interactive elements (no background, border, or padding)
• text-size-adjust disabled; font smoothing enabled; stable scrollbar gutter

Layer

All rules are wrapped in @layer vibe.reset — the lowest-priority layer in the Vibe cascade order:

@layer vibe.reset, vibe.tokens, vibe.utilities, vibe.components, vibe.theme, vibe.accessibility;

No tokens are defined and no utility classes are generated by this package.

Tokens

None.

Utilities / Generated Classes

None. This package applies styles only via element selectors within the vibe.reset layer.

Dist Structure

File	Description
index.css	Complete reset styles

Dependencies

None — this package is self-contained and has no upstream token requirements.

Build

npm run build

---

Usage Guide

Establishes a consistent, opinionless CSS baseline so all downstream packages start from a predictable state.

Import

@import "@vibe-labs/design-reset";

Import this first — before any tokens, utilities, or component styles.

Common Patterns

1. Application entry point order

/* Entry point: main.css */
@import "@vibe-labs/design-reset";
@import "@vibe-labs/design-colors";
@import "@vibe-labs/design-typography";
@import "@vibe-labs/design-spacing";
/* ... other packages */

2. Headings receive no visual styling from reset

After the reset, headings inherit body font size and weight. Apply tokens explicitly:

h1 {
  font-size: var(--text-display-lg);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

3. Images are block by default

img, svg, and video elements are set to display: block; max-width: 100%, so they fill their container without unwanted inline gaps:

<!-- No extra wrapper needed to remove bottom gap -->
<figure>
  <img src="photo.jpg" alt="..." />
</figure>

4. Buttons are reset to bare interactive elements

Reset removes button background, border, and padding. Apply your own component styles:

.btn-primary {
  height: var(--btn-height-md);
  padding-inline: var(--btn-px-md);
  background: var(--color-accent);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-font-weight);
}

5. Form controls inherit font

After the reset, input, select, and textarea use font: inherit, so they match surrounding text automatically:

<form>
  <input type="text" placeholder="No more Times New Roman in inputs" />
</form>

6. Scrollbar gutter is stable

The reset sets scrollbar-gutter: stable on the root, preventing layout shift when content becomes scrollable.

Token Reference

This package defines no tokens. It interacts with the following system layers:

Layer	Priority
vibe.reset	Lowest
vibe.tokens	2
vibe.utilities	3
vibe.components	4
vibe.theme	5
vibe.accessibility	Highest