Base

Resets, fonts, and themes — applied once across the entire application.

Purpose

The base/ directory contains foundational styles loaded once: resets, fonts, and theme variables. These are not reusable components — they define the technical baseline everything else builds on.

_reset.sass

Normalizes browser defaults so you start from a consistent baseline. Keep it minimal — only reset what you actually override.

 base/_reset.sass 
 *,
*::before,
*::after
  box-sizing: border-box
  margin: 0
  padding: 0

html
  -webkit-font-smoothing: antialiased
  scroll-behavior: smooth

img, video, svg
  display: block
  max-width: 100%

input, button, textarea, select
  font: inherit 

_fonts.sass

Declares @font-face rules, sets the base font-family on body, and defines base typography scale.

 base/_fonts.sass 
 @font-face
  font-family: 'Inter'
  src: url('/fonts/inter.woff2') format('woff2')
  font-weight: 100 900
  font-display: swap

body
  font-family: 'Inter', -apple-system, sans-serif
  font-size: 16px
  line-height: 1.6 

_themes.sass

Defines CSS custom properties for your design tokens. Using CSS variables here (rather than Sass variables) makes runtime theming possible without recompiling.

 base/_themes.sass 
 :root
  --color-bg:         #0F172A
  --color-card:       #111827
  --color-border:     #1F2937
  --color-text:       #F8FAFC
  --color-text-muted: #94A3B8

// Optional dark/light variants
[data-theme="light"]
  --color-bg:         #F8FAFC
  --color-text:       #0F172A 