A Agency Astro Base

Mobile navigation

A Agency Astro Base
Boilerplate manual

Style guide for building client landing pages faster.

This home page is a living guide for the base system. Use it to see the primitives, tokens, patterns and project structure available before creating client-specific sections.

View components View tokens Project map
Abstract preview of the Agency Astro Base design system
Project map

What this base gives you.

The boilerplate is intentionally small. Start by editing config and tokens, then add only the sections a real client project needs.

UI primitives

  • Button
  • Container
  • Section
  • Card
  • Badge
  • Heading
  • AppImage
  • Lucide icons

Layout and system

  • Header
  • Sticky Header
  • Mobile menu
  • Footer
  • BaseLayout
  • LegalLayout
  • Google Fonts config
  • Scroll reveal
  • CookieBanner

SEO helpers

  • SEO
  • JsonLd
  • canonical
  • buildTitle
  • schema helpers
Components

UI primitives and variants.

These are the reusable building blocks. Their visual values come from tokens, while layout composition can still use Tailwind utilities.

Badge

Small label component with variants.

Badge
Default Inverted

Heading

Semantic heading levels with visual sizes.

Heading

Heading xl

Heading lg

Heading md

Heading sm

Card and AppImage

Content surface plus Astro Assets wrapper.

Media
Astro Assets placeholder used by AppImage
Tokens

Visual decisions live in tokens.

Customize real projects mainly in src/styles/tokens.css, src/config/brand.ts and a future project-specific DESIGN.md.

Color tokens

Background --color-background
Surface --color-surface
Muted surface --color-surface-muted
Inverted --color-surface-inverted
Text --color-text
Muted text --color-text-muted
Primary --color-primary
Accent --color-accent

Typography tokens

--text-xs The quick brown fox
--text-sm The quick brown fox
--text-base The quick brown fox
--text-lg The quick brown fox
--text-xl The quick brown fox
--text-2xl The quick brown fox
--text-3xl The quick brown fox
--text-hero The quick brown fox

Spacing tokens

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

Tailwind token utilities

`theme.css` maps token values so components can use clean utility names instead of arbitrary var classes.

gap-lgmt-mdpy-xlspace-y-smtext-lginset-x-containermin-h-header
Patterns

Shared patterns for future sections.

`patterns.css` is for reusable cross-component patterns, not for styles owned by a single component.

Brand and nav patterns

A Agency Astro Base Tokens Components

Panel pattern

Use `.panel` with a tone class such as `.panel-inverted` when a future section needs a reusable framed surface.