Styling & Design Tokens

Scoped by default

A <style> block inside a .astro file applies only to that component. Astro scopes it automatically — no naming convention required, and no chance of leaking:

<div class="card">
  <h2>Scoped</h2>
</div>

<style>
  /* .card here cannot affect any other component */
  .card { border: 1px solid var(--rule); border-radius: 20px; }
</style>

To deliberately style something globally, use is:global:

<style is:global>
  body { margin: 0; }
</style>

Design tokens

Every theme keeps its palette, type and spacing as custom properties in one stylesheet under src/styles/. Changing the look of the whole site means editing those values, not hunting through components:

:root {
  --paper: #FBFAF6;
  --ink-900: #14140F;
  --accent: #9BA88C;

  --r-pill: 64px;
  --font-body: 'Questrial', system-ui, sans-serif;
}

Start with the tokens. Most rebrands need nothing else.