Astrobase

Framework style guide

Tokens & primitives

Every value below is read live from CSS custom properties emitted by framework.scss. Change them in override.scss and this page reflects the update. For reusable layout blocks (hero, CTA, cards), see Components.

Colors

10 families × 8 shades. Families inherit base chroma; semantics override for consistent vibrance. Hover tokens are derived at runtime via oklch(from var(--X-medium) …).

primary

ultra-light --primary-ultra-light
light --primary-light
semi-light --primary-semi-light
medium --primary-medium
semi-dark --primary-semi-dark
dark --primary-dark
ultra-dark --primary-ultra-dark
hover --primary-hover

secondary

ultra-light --secondary-ultra-light
light --secondary-light
semi-light --secondary-semi-light
medium --secondary-medium
semi-dark --secondary-semi-dark
dark --secondary-dark
ultra-dark --secondary-ultra-dark
hover --secondary-hover

tertiary

ultra-light --tertiary-ultra-light
light --tertiary-light
semi-light --tertiary-semi-light
medium --tertiary-medium
semi-dark --tertiary-semi-dark
dark --tertiary-dark
ultra-dark --tertiary-ultra-dark
hover --tertiary-hover

accent

ultra-light --accent-ultra-light
light --accent-light
semi-light --accent-semi-light
medium --accent-medium
semi-dark --accent-semi-dark
dark --accent-dark
ultra-dark --accent-ultra-dark
hover --accent-hover

base

ultra-light --base-ultra-light
light --base-light
semi-light --base-semi-light
medium --base-medium
semi-dark --base-semi-dark
dark --base-dark
ultra-dark --base-ultra-dark
hover --base-hover

neutral

ultra-light --neutral-ultra-light
light --neutral-light
semi-light --neutral-semi-light
medium --neutral-medium
semi-dark --neutral-semi-dark
dark --neutral-dark
ultra-dark --neutral-ultra-dark
hover --neutral-hover

success

ultra-light --success-ultra-light
light --success-light
semi-light --success-semi-light
medium --success-medium
semi-dark --success-semi-dark
dark --success-dark
ultra-dark --success-ultra-dark
hover --success-hover

warning

ultra-light --warning-ultra-light
light --warning-light
semi-light --warning-semi-light
medium --warning-medium
semi-dark --warning-semi-dark
dark --warning-dark
ultra-dark --warning-ultra-dark
hover --warning-hover

info

ultra-light --info-ultra-light
light --info-light
semi-light --info-semi-light
medium --info-medium
semi-dark --info-semi-dark
dark --info-dark
ultra-dark --info-ultra-dark
hover --info-hover

danger

ultra-light --danger-ultra-light
light --danger-light
semi-light --danger-semi-light
medium --danger-medium
semi-dark --danger-semi-dark
dark --danger-dark
ultra-dark --danger-ultra-dark
hover --danger-hover

Spacing

Fluid between mobile and desktop via clamp(). Resize the window to see tokens recompute.

--space-3xs
--space-2xs
--space-xs
--space-sm
--space-md
--space-lg
--space-xl
--space-2xl
--space-3xl

Section spacing

Larger vertical rhythm for hero areas and major layout blocks. Desktop ×3, mobile ×2 of the standard spacing scale.

--section-space-3xs
--section-space-2xs
--section-space-xs
--section-space-sm
--section-space-md
--section-space-lg
--section-space-xl
--section-space-2xl
--section-space-3xl

Typography

7 fluid type steps. Base 18px desktop / 16px mobile; scale ratio 1.25 / 1.2.

--text-2xs The quick brown fox
--text-xs The quick brown fox
--text-sm The quick brown fox
--text-md The quick brown fox
--text-lg The quick brown fox
--text-xl The quick brown fox
--text-2xl The quick brown fox

Border radius

--radius-sm
--radius-md
--radius-lg
--radius-xl
--radius-2xl
--radius-full

Primitive elements

Styled by base.scss — safe defaults for h1–h6, paragraphs, links, forms.

Headings

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading
h6 heading

Text

A short paragraph of body copy. Line height and margin come from base.scss. Inline links inherit the primary color and switch to the semi-dark shade on hover.

Monospace via code: var(--primary-medium).

Form controls

Buttons