The AraSites design tokens.
Every color, font size, spacing unit, and shadow — defined in CSS variables. Change once, ripples everywhere.
Brand colors
The primary palette + a semantic set for status colors.
Primary
#6366f1Accent
#ec4899Gradient
--gradient-primaryText
#0f172aMuted
#64748bBorder
#e2e8f0Bg soft
#f8fafcBg
#ffffffSemantic / status
Success
#10b981Info
#3b82f6Warning
#f59e0bDanger
#ef4444Color presets
AraSites ships with 5 ready-made palettes. Switch with one class on <body>.
.theme-arasites.theme-ocean.theme-sunset.theme-forestTypography
Inter variable, 7 sizes, 5 weights. All sized in rem against a 16px base.
h1 / 3remThe quick brown fox
h2 / 2.25remThe quick brown fox
h3 / 1.75remThe quick brown fox
h4 / 1.375remThe quick brown fox
h5 / 1.125remThe quick brown fox
body / 1remThe quick brown fox jumps over the lazy dog.
small / 0.875remThe quick brown fox jumps over the lazy dog.
Weights
400 · Regular — the quick brown fox
500 · Medium — the quick brown fox
600 · Semibold — the quick brown fox
700 · Bold — the quick brown fox
800 · ExtraBold — the quick brown fox
Spacing scale
8px-based scale. Use .mt-N, .mb-N, .p-N utilities.
1
4px2
8px3
12px4
16px5
24px6
32px7
48px8
64px9
96pxBorder radii
--radius-sm · 0.25rem
--radius-md · 0.5rem
--radius-lg · 1rem
--radius-full · 9999px
Elevation / shadows
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl
Breakpoints
| Prefix | Min width | Use case |
|---|---|---|
(default) | 0 | Mobile first |
sm | 576px | Large phones |
md | 768px | Tablets |
lg | 992px | Laptops |
xl | 1200px | Desktops |
Iconography
1,800+ icons from Bootstrap Icons v1.11 (MIT licensed). Use <i class="bi bi-NAME">.
Logo
Wordmark
Mark + wordmark
On dark