Foundations

Foundations holds the smallest parts of your brand: the logo, colors, type, spacing, radius and shadows. Everything else in Archetype points at these values, so changing one here changes it in every component and template that uses it, and in what agents read next.

Open Foundations in the sidebar. You see seven cards: Logo, Colors, Typography, Spacing, Radius, Shadow and Icons. Each card shows a preview and a count, or Not started if the section is empty. Click a card to open that section. The Icons card opens your icon sets, which have their own page in these docs: see Icons.

How editing works#

Colors, Typography, Spacing, Radius and Shadow all work the same way. Your changes are held as a draft until you press Save in the header (or ⌘S). Cancel throws the draft away. Both buttons only appear once you've changed something.

The header also carries:

• A status for the whole section, from Draft to Complete. Agents only get work that is Complete or has no status. See Item states.
• A history button, to see and undo earlier changes. See History and versions.
• A comments toggle, for notes and @mentions on the section.

Right-click any swatch, step or card for its actions: copy its value or CSS, rename it, or delete it.

Logo#

Add each version of your logo as its own variant, like Logo Dark, Logo Light or a Favicon. Press Add, then open the new variant to give it artwork:

• Drop or paste a file on the stage (SVG, PNG or JPEG), or
• Paste SVG code on the SVG code tab and press Save SVG.

The Documentation tab is where you write the rules an agent follows:

• When to use: short tags for where the logo belongs. Pick from presets like Light background, Dark background, For photos or App icon, or add your own of up to 40 characters.
• Guidance: anything that doesn't fit a tag, such as sizes, pairings and where exactly it goes, as free text.
• Clearspace and Minimum size, in px, rem, % or pt.
• Misuse: tick rules such as Don't recolor, Don't stretch or Don't rotate, or add your own.

Each variant has its own status under Details, and its own Comments tab. Changes to the documentation are held until you press Save.

Agents get each logo as SVG or a stable file URL, together with these rules.

Colors#

Colors has four tabs, and all four save together:

Palette#

Press Add group to create a group, then open it to build the ramp. Each tile is a color picker. Press + to add a shade, drag tiles to reorder them, and set the group's Role (for example Primary, Neutral or Danger). Roles help Archetype pick sensible defaults elsewhere.

Tokens and modes#

A token is a name that points at a shade, so your code and your agents can say link instead of primary-600. Press Add token, or click one of the Suggested names under the table.

To support light and dark, press the + at the end of the table header to add a mode. Each token then gets a value per mode. Right-click a mode's column to rename it, make it the default, delete it, or Flip each ramp to start a dark mode from the light one.

Gradients and pairings#

A gradient has a type, an angle and a list of stops, each with a position and opacity. A pairing has a background (a shade or a gradient), a foreground and a usage note. Each pairing shows its contrast ratio and whether it meets WCAG AA for body text. When you have several modes, a switch beside the tabs picks which mode gradients and pairings are drawn in.

Typography#

Typography is organized by font family. Press Add family, then pick a font:

• Search more than 1,900 Google Fonts, or
• Choose Upload custom fonts… and select every weight file at once. Files must be .woff2, .woff, .ttf or .otf, up to 3 MB each.

Each family holds text styles. A style has a Role (display, heading, subheading, body, caption or mono), Weight, Size, Line height, Letter spacing, Case, Decoration and Italic.

Agents receive a stylesheet link for every family your styles use, plus the font files themselves. That lets an agent that renders images, PDFs or video load your real typeface instead of a fallback. An agent holding your font files can also upload them to a family with update_brand, when you ask it to. See MCP tools.

Spacing, radius and shadow#

• Spacing is a scale of steps in px, drawn as a ruler from smallest to largest.
• Radius is a scale of corner radii in px.
• Shadow holds elevations. Each has a position, Blur, Spread, Color and opacity.

Click a step or shadow to edit it. Steps sort themselves by size when you close the panel.

How agents use Foundations#

Over MCP, colors, gradients, typography, spacing, radius and shadows are served as W3C Design Tokens (DTCG) JSON, with each semantic color's value per mode. Components and templates reference these values as CSS custom properties, so they follow every change you save. To use the same values in your own codebase, see Tokens in code.

Next steps#