--- title: Foundations description: Your logo, colors, typography, spacing, radius, shadows and icons: the values every component, template and agent reads. --- > Source: https://www.heyarchetype.com/docs/brand/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](/docs/brand/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](/docs/workspace/states). - A history button, to see and undo earlier changes. See [History and versions](/docs/workspace/history). - 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: | Tab | What it holds | | --- | --- | | **Palette** | Color groups, each a ramp of shades (50, 100, … 900). | | **Gradients** | Linear, radial or conic gradients built from your shades. | | **Tokens** | Semantic names like `fg-primary` or `bg-canvas` that point at a shade. | | **Pairings** | Background and text combinations, with a contrast check. | ### 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](/docs/agents/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](/docs/developers/tokens). ## Next steps :::cards - [Components](/docs/brand/components): Build your UI kit on top of these values. - [Import overview](/docs/import/overview): Bring Foundations in from a website, Figma or code. - [MCP tools](/docs/agents/tools): See how agents read your tokens. :::