Skip to main content

Documentation Index

Fetch the complete documentation index at: https://archie.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

Theming controls the visual identity of your app: colors, typography, spacing, border radii, and dark mode. Theme values are defined once and applied across every component automatically.

​
Where theme lives

Your theme is defined in app/theme.ts (or your stack’s equivalent). It is a single source of truth: components, pages, and generated UI all reference theme tokens rather than hard-coded values. The default theme uses Tailwind’s design tokens with values from your blueprint’s brand section.

​
What you can configure

​
Colors

Colors are defined as semantic tokens, not raw hex values:
  • Brand — primary, secondary, accent
  • Surface — background, surface, surface-elevated
  • Content — primary, secondary, tertiary, inverse
  • Status — success, warning, error, info
Each token has a light-mode and dark-mode value. Update one token, the change cascades.

​
Typography

  • Font families — primary, monospace
  • Font sizes — xs through 4xl, with consistent line heights
  • Font weights — normal, medium, semibold, bold

​
Spacing and sizing

  • Spacing scale — 0 through 24, in consistent increments
  • Border radii — none, sm, md, lg, full
  • Shadows — none, sm, md, lg

​
How to update the theme

Three ways:
  • Visual editor — open the theme panel, change colors and typography with a UI. Useful for visual tuning.
  • Talking to Archie — describe a change (“brand color to #5C7CFA, primary font to Inter”).
  • IDE — edit app/theme.ts directly.
Changes apply live to the preview. Saved theme values travel with the project to GitHub.

​
Dark mode

Dark mode is on by default. Each color token has a light and dark value. Users toggle their preference; the app responds. To customize dark mode:
  • Edit the dark values for each color token
  • Test by switching the preview’s mode in the visual editor
  • For component-specific dark mode behavior, use Tailwind’s dark: modifier in the component code

​
Brand assets

Logos, favicons, and OG images live in public/. The blueprint’s brand section is where you upload them initially; you can swap them anytime by replacing the file in public/ or through the Assets surface.

​
When to put a change in theme vs. a component

  • In theme — used in many places, expected to apply consistently (brand color, body font, success state color)
  • In a component — specific to one element type and not reused (a special button variant, a unique card style)
Putting one-off styles in theme creates noise. Putting reusable styles in components creates inconsistency. Use the right scope.

​
Multi-brand setups

If you build multiple white-labeled apps from a single project (Enterprise feature), the theme can be parameterized by tenant. Each tenant’s theme overrides the base. See Enterprise overview for the agency capabilities.