# Anchor — Design System
> Secure Infrastructure for Computer Use Agents
- **Canonical:** https://uiuxskills.com/library/anchor
- **Source:** https://anchorbrowser.io/
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:16:58.612Z

---

---
version: alpha
name: Anchor
tagline: Secure Infrastructure for Computer Use Agents
description: Secure Infrastructure for Computer Use Agents
tone: technical, secure, robust, authoritative
color-scheme: dark
colors:
  primary: "#FACC15"
  background: "#09090B"
  surface: "#18181B"
  surface-container: "#27272A"
  on-primary: "#000000"
  on-surface: "#F4F4F5"
  on-surface-variant: "#A1A1AA"
  outline: "#3F3F46"
  error: "#EF4444"
  success: "#22C55E"
typography:
  display-lg:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 3rem
    fontWeight: 700
    lineHeight: "1.15"
  display-md:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 2.25rem
    fontWeight: 700
    lineHeight: "1.2"
  headline-lg:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 1.875rem
    fontWeight: 600
    lineHeight: "1.25"
  headline-md:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 1.5rem
    fontWeight: 600
    lineHeight: "1.3"
  body-lg:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 1.125rem
    fontWeight: 400
    lineHeight: "1.5"
  body-md:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 1rem
    fontWeight: 400
    lineHeight: "1.5"
  body-sm:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: "1.4"
  label-md:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 0.875rem
    fontWeight: 500
    lineHeight: "1"
  label-sm:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 0.75rem
    fontWeight: 500
    lineHeight: "1"
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    borderColor: transparent
  button-primary-hover:
    backgroundColor: "#EAB308"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    borderColor: transparent
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.outline}"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
  link-hover:
    textColor: "#EAB308"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 12px
  badge-error:
    backgroundColor: "#450A0A"
    textColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 12px
  badge-success:
    backgroundColor: "#064E3B"
    textColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 12px
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  hero-section:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
  swatch-on-surface-variant:
    backgroundColor: "{colors.on-surface-variant}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.4)
  md: 0 4px 12px rgba(0,0,0,0.5)
  lg: 0 12px 24px rgba(0,0,0,0.6)
---

## Overview

Anchor delivers a high-performance, developer-centric interface tailored for secure agentic workflows and computer-use AI. The visual identity is highly technical and authoritative, utilizing a stark dark theme punctuated by precise yellow accents to evoke security, reliability, and cryptographic trust. The overall feel is robust, minimal, and highly structured, mirroring a terminal or advanced cloud infrastructure console.

## Colors

The color strategy relies on a high-contrast dark mode palette designed to reduce eye strain for developers while highlighting critical actions, status indicators, and system states. Dark neutrals establish depth, while a bright yellow accent commands immediate attention for primary workflows.

*   `primary` (#FACC15): The signature yellow accent color used for primary actions, highlights, and brand-defining elements.
*   `background` (inferred) (#09090B): The deep dark background color establishing a modern, developer-first terminal aesthetic.
*   `surface` (inferred) (#18181B): Slightly lighter dark tone used for cards, sections, and container backgrounds.
*   `surface-container` (inferred) (#27272A): Used for elevated components, nested containers, and subtle UI blocks.
*   `on-primary` (#000000): High-contrast black text used on top of the primary yellow background.
*   `on-surface` (#F4F4F5): Off-white text color ensuring optimal readability on dark surfaces.
*   `on-surface-variant` (#A1A1AA): Muted gray text color used for secondary descriptions and captions.
*   `outline` (inferred) (#3F3F46): Subtle border color used to define component boundaries without creating visual noise.
*   `error` (inferred) (#EF4444): Standard red semantic color used for error states and critical alerts.
*   `success` (inferred) (#22C55E): Standard green semantic color used for success states and verified badges.

## Typography

The typography is built entirely on the Inter sans-serif typeface, emphasizing clean readability, technical precision, and structured hierarchy across dense data layouts.

*   `display-lg` (inferred): Used for main hero headlines to capture immediate attention.
*   `display-md` (inferred): Used for secondary hero elements and major section titles.
*   `headline-lg` (inferred): Used for key feature headers and mid-sized section titles.
*   `headline-md` (inferred): Used for sub-features and card titles.
*   `body-lg` (inferred): Used for hero subheadings and introductory paragraphs.
*   `body-md`: Standard body copy size for feature descriptions and general text.
*   `body-sm`: Used for secondary body copy, captions, and metadata.
*   `label-md` (inferred): Used for button labels and interactive controls.
*   `label-sm` (inferred): Used for small badges, tags, and micro-copy.

## Layout

*   The layout is structured around a high-density grid system optimized for technical data presentation, utilizing spacing tokens from `{spacing.xs}` up to `{spacing.2xl}` for consistent alignment.
*   The observed section order from top to bottom is: `announcement-bar`, `nav`, `hero`, `social-proof`, `features-comparison`, `feature-details-humanized`, `feature-details-authenticated`, `feature-details-secure`, and `footer`.
*   The hero composition pattern features a centered headline and subhead with dual primary CTAs (such as "Try live" with an anchor icon and "Talk to an Expert"), followed immediately by a horizontal scrolling or grid-based social proof logo wall.
*   Sections are clearly demarcated with subtle `{divider}` lines and background shifts between `{colors.background}` and `{colors.surface}`.
*   Grid structures collapse dynamically to single-column stacks on smaller viewports to maintain mobile readability.

## Elevation & Depth

Depth is primarily conveyed through color contrast and subtle borders rather than heavy shadows, utilizing low-opacity dark shadows across three inferred levels.

*   `elevation.sm` (inferred): Used for low-level card lift and subtle interactive elements.
*   `elevation.md` (inferred): Applied to dropdowns, popovers, and standard floating containers.
*   `elevation.lg` (inferred): Reserved for high-impact overlays, modals, and drawer components.
*   *Note:* Elevated components like `{card-elevated}` use a slightly lighter `{colors.surface-container}` background to stand out against `{colors.background}`.

## Shapes

The brand employs moderately rounded corners to balance a modern, approachable developer aesthetic with a clean, structured terminal feel. Interactive elements and inputs utilize `{rounded.md}` to establish a consistent, clickable appearance.

Larger structural containers, such as `{card}` and `{card-elevated}`, use `{rounded.lg}` to frame content cleanly. Badges and status indicators utilize `{rounded.full}` to create distinct pill shapes that separate metadata from structural layout blocks.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### button-primary
Composed of a `{colors.primary}` background, `{colors.on-primary}` text, and a `{rounded.md}` radius. It transitions to `{button-primary-hover}` on hover. Use this component exclusively for the main call-to-action in any section, such as "Try live" or "Talk to an Expert".

### button-secondary
Features a transparent background, `{colors.on-surface}` text, and a border styled with `{colors.outline}`. It uses `{typography.label-md}` and `{rounded.md}`. Use this for secondary actions that support the primary goal without competing for visual dominance.

### card
A structural container utilizing `{colors.surface}` background, `{rounded.lg}` corners, and a `{colors.outline}` border. It provides 24px of internal padding (`{spacing.lg}`). Use this to group related technical features, integration details, or service descriptions.

### card-elevated
An elevated variation of the standard card that uses `{colors.surface-container}` as its background to stand out against `{colors.background}`. It shares the same `{rounded.lg}` shape and `{colors.outline}` border. Use this to highlight featured services or premium integrations.

### input-field
Built with a `{colors.surface}` background, `{colors.on-surface}` text, and a `{colors.outline}` border. On focus, it transitions to `{input-field-focus}` by changing its border to `{colors.primary}`. Use this for developer inputs, search fields, or form submissions.

### link
A text-only interactive element using `{colors.primary}` and `{typography.label-md}`. It transitions to `{link-hover}` on hover. Use this for inline navigation, documentation links, or secondary action triggers.

### badge
A small pill-shaped indicator using `{colors.surface-container}` background, `{colors.primary}` text, and `{rounded.full}`. It has semantic variants `{badge-error}` (red background and text) and `{badge-success}` (green background and text). Use these to display status, verified bot protection, or official partner integrations.

### divider
A 1px tall horizontal line using `{colors.outline}`. Use this to separate dense technical sections and maintain a clean, readable layout hierarchy.

### hero-section
The primary landing section utilizing `{colors.background}` and `{colors.on-surface}` text. It anchors the page layout and houses the main value proposition, primary CTAs, and social proof.

### swatch-on-surface-variant
A small 32px square element utilizing `{colors.on-surface-variant}` background and `{rounded.sm}`. Use this as a visual swatch or placeholder indicator in technical documentation or layout previews.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-actions like `{button-primary}`. | Avoid using bright background colors other than `{colors.primary}` for interactive states. |
| Ensure all text on `{colors.background}` uses high-contrast `{colors.on-surface}` or `{colors.on-surface-variant}`. | Never use `{colors.primary}` text on light backgrounds without verifying contrast. |
| Apply `{rounded.md}` to interactive elements like `{button-primary}` and `{input-field}`. | Do not mix sharp corners with rounded elements; maintain consistent use of `{rounded.md}` and `{rounded.lg}`. |
| Use `{colors.outline}` for borders on `{card}` components to maintain clean structure. | Avoid using heavy drop shadows on `{card}` elements; rely on `{colors.surface-container}` and `{elevation.sm}` for elevation. |
| Utilize `{typography.display-lg}` exclusively for main hero headlines. | Do not use `{typography.body-sm}` for primary body copy; restrict it to captions and metadata. |
| Use `{badge-success}` to indicate verified bot protection or official partner status. | Never apply `{colors.error}` or `{badge-error}` to non-critical or informational badges. |
| Style secondary links with `{link}` and transition to `{link-hover}` on hover states. | Do not use `{colors.on-primary}` for body text on `{colors.surface}`. |
| Use `{divider}` with `{colors.outline}` to separate dense technical sections. | Do not use custom border colors that bypass `{colors.outline}` or `{colors.surface-container}`. |

## Content Style

*   **CTA Style:** Call-to-action labels are direct, action-oriented, and highly technical. They use active verbs and concise phrasing (e.g., "Try live", "Talk to an Expert", "Download brand kit") to prompt immediate developer engagement.
*   **Heading Tone:** Headlines are authoritative, technical, and benefit-driven. They focus heavily on concrete performance metrics, security guarantees, and scale (e.g., "12X faster", "80X less tokens", "Secure & Reliable by design") to build immediate technical credibility.
*   **Copy Density:** The layout demands a high density of technical specifications, comparison metrics, and partner integrations. Information is organized using structured lists, feature blocks, and clear data comparisons to respect the developer's time and need for precision.

## Imagery & Icons

The imagery style is mixed, combining high-contrast technical architecture diagrams with clean, minimal vector icons (such as the anchor and play icons). Prominent partner brand logos (such as Cloudflare, 1Password, and Coinbase) are integrated directly into the layout to establish trust and technical authority. All diagrams and icons must maintain a high-contrast, dark-mode-friendly appearance that aligns with the overall terminal aesthetic.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Anchor, a technical, authoritative infrastructure brand targeting developers. Match its stark, dark, minimal tone — precise and security-focused, never decorative. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its YAML token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.lg}` — never hardcode hex values, pixel sizes, or font weights.
2. Use only components defined under `components:`. Do not invent variants; if a needed variant is absent, surface that gap to the user before proceeding.
3. Follow the Layout section for section ordering, hero composition, and grid-collapse behavior at mobile breakpoints. Sections are demarcated with `{divider}` and background shifts between `{colors.background}` and `{colors.surface}`.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., using `{colors.primary}` as body text on a light surface), surface the conflict explicitly before applying any change.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative token file exists in the codebase, those values override the inferred ones in the spec.

## Output contract

**Must:**
- Use all color, typography, spacing, radius, and elevation values by token name only.
- Render hover, focus, and disabled states for every interactive component where the spec defines them (`{button-primary-hover}`, `{input-field-focus}`, `{link-hover}`).
- Apply `{rounded.md}` to buttons and inputs, `{rounded.lg}` to cards, `{rounded.full}` to badges — no mixing.
- Use `{typography.display-lg}` only for main hero headlines; do not promote lower-tier type to fill space.
- Write CTAs in the direct, technical register the Content Style section defines.

**Must NOT:**
- Introduce any color, font, radius, or shadow value absent from the spec.
- Use generic utility defaults (e.g., `text-gray-500`, `rounded-md` as literals) when a brand token covers the role.
- Apply `{colors.error}` or `{badge-error}` to informational or non-critical states.
- Add emoji, decorative illustration, or marketing filler copy.
- Rewrite existing page copy, heading labels, or CTAs, or alter navigation structure as a side effect of applying tokens.

## When in doubt
- If a value isn't in the spec, ask the user rather than inventing a token.
- For ambiguous backgrounds, default to `{colors.surface}` for containers and `{colors.background}` for full-bleed sections.
- For ambiguous text roles, use `{colors.on-surface}` for primary text and `{colors.on-surface-variant}` for captions and metadata.
- Prefer composing existing components over introducing new patterns; e.g., combine `{card}` and `{badge-success}` rather than creating a new highlighted card variant.
- For unspecified breakpoints, default to mobile-first with a single breakpoint at 768px, collapsing grids to single-column stacks per the Layout section.