# Circle — Design System
> The complete community platform for creators and brands.
- **Canonical:** https://uiuxskills.com/library/circle
- **Source:** https://circle.so
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:13:32.785Z

---

---
version: alpha
name: Circle
description: The complete community platform for creators and brands.
tone: >-
  Professional, encouraging, and community-focused. The tone is authoritative yet accessible,
  positioning the platform as an essential tool for creators.
color-scheme: light
colors:
  primary: "#4262F0"
  secondary: "#0080FF"
  surface: "#FFFFFF"
  surface-container: "#F5F5F5"
  on-surface: "#0A0A0A"
  on-primary: "#FFFFFF"
  outline: "#DBDBDB"
  error: "#FF4D4D"
  success: "#22C55E"
  focus-ring: "#4262F0"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 48px
  display-md:
    fontFamily: sans-serif
    fontSize: 36px
  headline-lg:
    fontFamily: sans-serif
    fontSize: 30px
  headline-md:
    fontFamily: sans-serif
    fontSize: 24px
  headline-sm:
    fontFamily: sans-serif
    fontSize: 20px
  body-md:
    fontFamily: sans-serif
    fontSize: 16px
  body-sm:
    fontFamily: sans-serif
    fontSize: 14px
  label-md:
    fontFamily: sans-serif
    fontSize: 14px
  label-sm:
    fontFamily: sans-serif
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#334EC0"
    textColor: "#FFFFFF"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.secondary}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  nav-bar:
    backgroundColor: "{colors.surface}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-on-primary:
    backgroundColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.08)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Circle is a clean, modern, and highly functional community platform. Its visual identity is defined by a vibrant blue primary color, generous use of whitespace, and rounded, friendly UI elements that prioritize ease of use and engagement. The design language is professional yet accessible, positioning the platform as an essential tool for creators.

## Colors

The color strategy relies on a high-contrast, professional palette anchored by a vibrant primary blue. Neutrals provide the structure, allowing the primary and secondary colors to guide user attention toward interactive elements.

*   **Primary (`{colors.primary}`):** The core brand blue, used for primary call-to-action buttons and active states.
*   **Secondary (`{colors.secondary}`):** An accent blue used for secondary highlights and visual interest.
*   **Surface (inferred) (`{colors.surface}`):** The clean white background for the main application area.
*   **Surface Container (`{colors.surface-container}`):** A light gray used for section backgrounds and card containers.
*   **On Surface (`{colors.on-surface}`):** The primary text color for high readability against light backgrounds.
*   **On Primary (inferred) (`{colors.on-primary}`):** White text used specifically for contrast on primary buttons.
*   **Outline (`{colors.outline}`):** A neutral gray used for subtle borders and dividers.
*   **Error (inferred) (`{colors.error}`):** Semantic red for destructive actions or validation errors.
*   **Success (inferred) (`{colors.success}`):** Semantic green for positive status indicators.
*   **Focus Ring (inferred) (`{colors.focus-ring}`):** The primary blue ring used to indicate keyboard focus.

## Typography

Typography is set in a clean, sans-serif stack that prioritizes legibility and hierarchy. The scale is designed to create clear separation between headings and body content.

*   **Display (inferred) (`{typography.display-lg}`, `{typography.display-md}`):** Used for high-impact hero headlines.
*   **Headline (inferred) (`{typography.headline-lg}`, `{typography.headline-md}`, `{typography.headline-sm}`):** Used for section titles and card headers.
*   **Body (`{typography.body-md}`, `{typography.body-sm}`):** The standard text for long-form content and secondary descriptions.
*   **Label (inferred) (`{typography.label-md}`, `{typography.label-sm}`):** Used for button text, UI labels, and badges.

## Layout

The platform utilizes a responsive grid system with a max-width container to maintain focus. Spacing follows a strict 4px/8px base unit system, ensuring consistent rhythm. The page pattern typically follows this order: `nav` → `hero` → `social-proof` → `features` → `testimonials` → `footer`. The hero section features a centered headline and subhead with a primary CTA, accompanied by a large product visual. On smaller screens, the navigation collapses into a menu drawer.

## Elevation & Depth

Elevation is used sparingly to denote depth on cards and interactive elements, relying on subtle, single-layer shadows to separate content from the background.

*   **`{elevation.sm}` (inferred):** Subtle lift for small UI elements or hover states.
*   **`{elevation.md}` (inferred):** Standard depth for cards and dropdown menus.
*   **`{elevation.lg}` (inferred):** Deepest shadow for modal overlays or persistent drawers.

## Shapes

The design language is heavily rounded, reflecting a friendly, approachable aesthetic. Border-radius values are applied consistently across all container types.

The scale ranges from `{rounded.sm}` (4px) for small badges to `{rounded.xl}` (24px) for cards. Avoid sharp corners (0px) on any component to maintain the brand's soft, modern feel.

## 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
The primary button uses `{colors.primary}` with `{typography.label-md}` text. Secondary buttons are transparent with an `{colors.outline}` border. Use these for all user actions, ensuring the primary button is the most prominent element in any group.

### Card
Cards use `{colors.surface}` with `{rounded.xl}` corners. Use `{elevation.md}` for elevated cards to create separation from the background. These are the primary containers for feature highlights and testimonials.

### Input Field
Inputs utilize `{colors.surface}` with `{rounded.md}` corners and an `{colors.outline}` border. Upon interaction, the border should transition to `{colors.primary}` to indicate focus.

### Badge
Badges are small, rounded elements using `{colors.surface-container}` for background and `{typography.label-sm}` for text. Use them for status indicators or categories.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-action buttons. | Do not use `{colors.primary}` for background fills on large containers. |
| Apply `{rounded.xl}` to all card components for consistency. | Do not use sharp corners (0px) on cards or buttons. |
| Use `{spacing.md}` as the default gutter between grid items. | Avoid excessive use of heavy shadows on small UI elements. |
| Maintain `{typography.body-md}` for all standard paragraph content. | Never use `{typography.label-sm}` for primary body text. |
| Use `{colors.outline}` for subtle dividers between sections. | Avoid using `{colors.error}` for non-destructive actions. |
| Ensure all input fields have a `{colors.primary}` border on focus. | Do not mix font families; stick to the brand's sans-serif stack. |
| Use `{rounded.sm}` for small UI elements like badges. | Do not use `{colors.secondary}` for primary action buttons. |
| Use `{elevation.md}` for standard card depth. | Do not use `{elevation.lg}` for standard content cards. |

## Content Style

CTA labels should use imperative verbs in sentence case (e.g., "Start for free," "Learn more"). Keep labels concise to maintain button balance.

Headings should be benefit-driven and declarative, focusing on the value proposition of the platform. Avoid vague marketing fluff; prioritize clarity and directness.

Maintain a scannable rhythm in all copy. Use short paragraphs and clear headings to break up dense information. Bullet points are encouraged for feature lists or benefits.

## Imagery & Icons

The imagery style is mixed, combining high-quality product screenshots with clean, rounded-corner UI elements. Icons should be simple, consistent, and maintain a minimal aesthetic. Avoid overly complex illustrations; prioritize clarity and directness to match the platform's professional tone.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Circle, a minimal, accessible community platform with a professional yet encouraging tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.xl}` — never as hardcoded hex, px, or font-size values.
2. Only generate the component variants listed under `components:` (e.g., `button-primary`, `button-secondary`, `card`, `card-elevated`, `input-field`, `badge`, `badge-error`, `badge-success`). Do not invent variants the spec omits.
3. Apply `{rounded.xl}` to all cards, `{rounded.md}` to inputs and buttons, and `{rounded.sm}` to badges. Never use 0px corners on any component.
4. When the spec defines a component state — hover (`button-primary-hover`), focus (`input-field-focus`), interactive links (`link-hover`) — include it; do not omit states for interactive elements.
5. Before generating layout decisions, consult the Layout and Elevation & Depth sections. Use `{elevation.md}` for standard cards; reserve `{elevation.lg}` for modals and drawers only.

## Output contract

**Must:**
- Use tokens by name for every color, spacing, radius, elevation, and typography value.
- Include hover, focus, and disabled states for all interactive components where the spec defines them.
- Apply `{colors.focus-ring}` as the visible keyboard focus indicator on all interactive elements.
- Use `{spacing.md}` as the default gutter; follow the 4px/8px spacing scale throughout.
- Write CTA labels in sentence case with imperative verbs, matching the Content Style section.

**Must NOT:**
- Invent colors, radii, font families, or elevation values not present in the spec.
- Use `{colors.primary}` as a large background fill or `{colors.secondary}` on primary action buttons.
- Use `{typography.label-sm}` for body text or mix font families.
- Use `{elevation.lg}` on standard content cards.
- Rewrite, replace, or invent page copy, headings, navigation items, or routes.
- Alter information architecture as a side effect of applying design tokens.

## When in doubt
- If a value is not defined in the spec, ask the user before inventing one.
- For ambiguous backgrounds, default to `{colors.surface}` for content areas and `{colors.surface-container}` for section backgrounds.
- Tokens marked "(inferred)" are visual approximations; if an authoritative source (theme file, Storybook) exists, those values take precedence.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px; collapse navigation into a drawer below that threshold per the Layout narrative.
- Surface any conflict between a user request and the Do's and Don'ts table before proceeding.