siterealDesign system

Eighteen modules, and any of them can be off.

Colors, type, spacing, buttons, borders, shadows, textures, themes and motion — each one block of a generated stylesheet and one screen in the rail. Everything below is drawn with this site’s own tokens.

Start the free trial Read the docs

--primary

--tertiary

--accent

--warning

--neutral

18Modules

Every block of the stylesheet has a switch.

Off means the block is not emitted and its screen leaves the rail. Nothing is deleted — the values wait in the project file for the day you switch it back on.

Icons

Colors

Typography

Spacing

Buttons

Elements

Forms

Navigation

Carousel

Popups

Consent

Layout

Borders

Shadows

Textures

Themes

Motion

Accessibility

02Colors

One hex, six shades, nine alphas.

Give a role a color and get --primary-100 through -600, where 600 is the hover, plus an alpha ramp from -10 to -90. Override one shade and the rest keep following.

100

200

300

400

500

600

03Typography

A fluid scale, not a stack of breakpoints.

Every step is a clamp() between its mobile size and its desktop size, so the type follows the screen with no media query at all. Resize the window and watch this list.

--h1Heading 1

--h2Heading 2

--h3Heading 3

--h4Heading 4

--h5Heading 5

--text-lText L

04Text styles

A text style is answered once.

Headings and running text each have one style for the whole site — the questions below are asked on the Typography screen, and every heading and paragraph follows. Select an h2 in the builder and it already reads Heading 2.

FamilyWeightColorLine heightLetter spacingCaseWrapMeasure

Real files, drawn visually.Text XXL--text-xxl

Real files, drawn visually.Text XL--text-xl

Real files, drawn visually.Text L--text-l

Real files, drawn visually.Text M--text-m

Real files, drawn visually.Text S--text-s

Real files, drawn visually.Text XS--text-xs

05Fonts

Google Fonts, or the family you bought.

From the catalogAa

Google Fonts

Search the catalog, pick the weights, and the files are downloaded into your project and served from your own domain. The visitor’s browser never asks Google for anything.

public/fonts/inter/400.woff2

Your own files

Drop a font file

woff2woffttfotf

Custom fonts

A family somebody bought arrives as a file, not as a catalog entry. Upload one weight at a time; it lands in the same folder and becomes one more @font-face in the same sheet — nothing converted, nothing hosted elsewhere.

public/fonts/<family>/<weight>.ttf

06Spacing

Six steps, fluid like the type.

A t-shirt scale for everything inside a box, a second one for the padding of a band, and two rhythms on top: what a section leaves between its blocks, and what a box leaves between its children.

--section-space-xs … xxl--container-spacing--content-spacing--site-padding

--space-xs7–11px

--space-s11–16px

--space-m16–24px

--space-l24–36px

--space-xl36–54px

--space-xxl54–81px

07Buttons

Variants stack. None of them has a rule of its own.

Shape belongs to every button; color is painted only on a variant class, and a variant does nothing but re-point --btn-* tokens. So colors, styles and sizes combine freely.

Button.btn--primary

Button.btn--primary.btn--outline

Button.btn--accent.btn--soft

Button.btn--white.btn--pill

Button.btn--tertiary.btn--s

Button.btn--warning.btn--outline.btn--l

08Textures

A texture is a named layer, worn as a class.

.texture--grid

.texture--noise

both, one element

09Icon sets

Install a set to search it. Ship only what you pick.

Add any Iconify set — Lucide here, with 1,768 icons — and its whole catalog becomes searchable in the builder. What a picked icon leaves in the page is inline SVG: no sprite, no icon font, no request, as big as the text and in the color of the text.

Lucide · 1,768TablerPhosphorMaterial SymbolsAny Iconify set

Start building the sites you’ve always wanted.

Seven days free, on your machine — and every site you build is real Astro in your own repository, yours from the first save.

Start the free trial Read the docs