Styling & Design Tokens
Scoped styles, global stylesheets, and changing a theme's palette in one place.
Updated: September 2026·License: Commercial & Personal
Scoped by default
A block inside a .astro file applies only to that component. Astro scopes it automatically — no naming convention required, and no chance of leaking:
astro
<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:
astro
<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:
css
: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.
Explore production-ready themes
Hand-built Astro themes — SaaS, storefront, portfolio, and dashboard.