Skip to main content
Styling is where you set the concrete visual choices Archie applies across your app — color palette, typography, the UI framework powering your components, and the icon set. Four sections.

​
Theme

Pick a color palette from Archie’s curated themes or supply your own brand colors. The chosen palette generates the full set of design tokens — primary, secondary, accent, neutrals, success, warning, danger — used by every generated component. Themes flow into:
  • Component backgrounds, borders, and accents
  • Email template backgrounds
  • Charts and dashboards (a default chart palette is derived from the theme)

​
Typography

  • Font Family — the typeface for the app. Archie picks from Google Fonts and a curated list of system stacks; uploading a custom font is supported on Enterprise.
  • Font Size — base size from which the type scale is generated.
  • Font Weight — default weight for body copy.
The chosen typography generates a full type scale (display, headings, body, caption) used across the generated frontend.

​
UI Framework

The component library underlying the generated frontend. Options:
  • Tailwind — utility-first CSS framework with custom-styled primitives. Most flexible.
  • Material — Google’s Material Design implementation in React.
  • Chakra — modular, accessible component library.
  • Bootstrap — responsive, mobile-first framework with prebuilt components.
This is one of the most load-bearing visual choices — switching frameworks after generation requires Archie to regenerate the entire frontend.

​
Iconography

Pick the icon set used throughout the app:
  • Lucide — community-maintained icon set; default
  • Heroicons — by the makers of Tailwind CSS
  • Material — Google’s Material icons
  • Font Awesome — large catalog covering most common needs
The icon set is used in navigation, buttons, empty states, and anywhere a glyph is needed. Switching icon sets after generation re-keys icon references across the codebase.

​
FAQ

Yes. The theme defines defaults; the visual editor and IDE let you override component-by-component. Component overrides survive code regeneration unless you regenerate that specific component.
Provide custom hex values when picking the palette. Archie generates the rest of the token set (lighter/darker shades, hover states, focus rings) from the colors you supply.
No — pick one. Mixing frameworks creates conflicting style systems and inflates bundle size. Archie generates a single consistent UI framework across the whole frontend.
Drop the SVG into the generated /icons directory and import it like a component. The icon set choice doesn’t restrict you from adding custom one-offs.
Archie regenerates the frontend on the next code generation pass. Custom edits in the visual editor that depend on framework-specific classes may not migrate cleanly — review the diff before merging.