# Statamic — Design System
> A flat-file, Laravel-powered CMS designed for developers and content teams.
- **Canonical:** https://uiuxskills.com/library/statamic
- **Source:** https://statamic.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:47.206Z

---

---
version: alpha
name: Statamic
description: A flat-file, Laravel-powered CMS designed for developers and content teams.
tone: Professional, developer-friendly, clear, and helpful.
color-scheme: light
colors:
  primary: "#FF6347"
  surface: "#FFFFFF"
  surface-dim: "#F4F4F5"
  neutral-600: "#525252"
  neutral-500: "#717171"
  outline: "#D4D4D8"
  on-surface: "#18181B"
  error: "#DC2626"
  success: "#16A34A"
  focus-ring: "#A1A1AA"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 6px
  lg: 8px
  xl: 12px
  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: "#E11D48"
    textColor: "#FFFFFF"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.neutral-600}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#E11D48"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.neutral-600}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "#DCFCE7"
    textColor: "{colors.success}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-neutral-500:
    backgroundColor: "{colors.neutral-500}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-on-surface:
    backgroundColor: "{colors.on-surface}"
    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.05)
  md: 0 4px 6px -1px rgba(0,0,0,0.1)
  lg: 0 10px 15px -3px rgba(0,0,0,0.1)
---

## Overview

Statamic is a developer-centric CMS that balances technical power with a clean, intuitive user interface. The visual language is professional and approachable, relying on a neutral palette with warm accents to ensure content clarity and ease of use for both developers and content teams.

## Colors

The color strategy centers on a clean, high-contrast foundation that prioritizes readability, using a neutral grayscale for structural elements and a singular, warm accent for primary interactions.

*   Primary (inferred) (#FF6347): The brand accent used for primary CTAs and highlights.
*   Surface (#FFFFFF): The primary background color for content areas.
*   Surface-dim (inferred) (#F4F4F5): A subtle background for secondary sections and grouping.
*   Neutral-600 (#525252): Primary text color for body content.
*   Neutral-500 (#717171): Secondary text color for metadata and labels.
*   Outline (#D4D4D8): Border color for cards and input fields.
*   On-surface (inferred) (#18181B): High-contrast text for headings and titles.
*   Error (inferred) (#DC2626): Semantic color for error states.
*   Success (inferred) (#16A34A): Semantic color for success states.
*   Focus-ring (inferred) (#A1A1AA): Focus ring color for interactive elements.

## Typography

The typography system relies on a clean sans-serif family to maintain high legibility across both marketing and control panel interfaces. It uses a clear scale to differentiate between structural headings and functional UI labels.

*   Display-lg (inferred): Main hero heading.
*   Headline-lg (inferred): Primary content headings.
*   Body-md: Standard paragraph text.
*   Body-sm: Secondary text and captions.
*   Label-md (inferred): Button labels.
*   Label-sm: Small UI labels and metadata.

## Layout

The layout system utilizes a responsive grid with a max-width container, grounded in a 4px base spacing unit to ensure consistent rhythm. The page structure follows a logical flow: `nav` → `hero` → `customers` → `features` → `footer`. The hero section is characterized by a centered headline and subhead arrangement, flanked by primary and secondary CTAs. Mobile-first principles apply, with grid columns adjusting dynamically based on the viewport width.

## Elevation & Depth

Depth is used sparingly to separate content from the background, relying on subtle, single-layer shadows.

*   `elevation.sm`: Subtle lift for small UI elements.
*   `elevation.md` (inferred): Standard lift for cards and dropdowns.
*   `elevation.lg` (inferred): High-emphasis lift for modals or overlays.

## Shapes

The design system employs a rounded-corner philosophy to create a modern, approachable feel.

Use `{rounded.md}` for input fields and interactive controls to maintain a soft, accessible touch. Apply `{rounded.lg}` for card containers to provide a distinct, friendly boundary for grouped content.

## 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
The primary action component, utilizing `{colors.primary}` for high visibility. Use this for the main conversion point on a page. It should always feature `{typography.label-md}` for the label.

### Card
A container component for grouping related content, defined by `{colors.surface}` background and `{colors.outline}` borders. Always apply `{rounded.lg}` to ensure consistent corner geometry.

### Input Field
Used for form interactions. It features a `{colors.surface}` background and `{colors.outline}` border by default. On focus, the border should transition to `{colors.focus-ring}` to indicate active state.

### Badge
A small status indicator using `{colors.surface-dim}` background and `{typography.label-sm}`. Use this for tagging or status labels.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Never use `{colors.primary}` for body text. |
| Apply `{rounded.lg}` to all card components. | Avoid mixing different border-radius values on the same component. |
| Maintain consistent `{spacing.md}` between content sections. | Do not use non-standard spacing values outside the `{spacing}` scale. |
| Use `{typography.body-md}` for all standard paragraph text. | Do not use `{typography.display-lg}` for body content. |
| Ensure `{colors.outline}` is used for all card borders. | Avoid using shadows on flat UI elements like buttons. |
| Use `{typography.label-sm}` for UI labels and metadata. | Never apply `{typography.body-md}` on `{colors.surface-dim}` without sufficient contrast. |
| Use `{colors.surface-dim}` for secondary background sections. | Do not use `{elevation.sm}` on buttons or flat interactive elements. |
| Apply `{rounded.md}` to all `input-field` components. | Avoid using `{colors.primary}` for background fills on cards. |

## Content Style

CTA labels should use imperative verbs and sentence case (e.g., "Get Pro Now"). Keep labels short and direct to maintain UI clarity.

Headings should be benefit-driven and concise, focusing on the value proposition rather than descriptive fluff. 

Copy density should be managed through scannable paragraphs and clear headings. Use whitespace effectively to separate sections, ensuring the content remains readable and approachable for developers.

## Imagery & Icons

The visual language incorporates a mix of clean product screenshots, custom illustrations, and iconography. Imagery should be used to clarify complex concepts or showcase the control panel interface. Icons should maintain a consistent, clean line weight to match the minimal aesthetic.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Statamic, a minimal, developer-friendly CMS. Apply a professional, clear tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{spacing.md}`, `{rounded.lg}` — never hardcode hex values, pixel sizes, or font sizes directly.
2. Respect the exact components defined under `components:`. Do not invent variants (e.g., a `button-danger` or `card-flat`) that the spec does not list.
3. Follow the Layout narrative: page structure is `nav → hero → customers → features → footer`; hero uses a centered headline with primary and secondary CTAs. Do not reorder sections or invent new ones.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., using `{colors.primary}` as a card background fill), surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source exists (theme file, Storybook), those values take precedence.

## Output contract

**Must:**
- Use token names for all colors, spacing, radii, typography, and elevation values.
- Render all interactive components with hover, focus, and disabled states when the spec defines them (e.g., `button-primary-hover`, `input-field-focus`).
- Apply `{rounded.md}` to inputs and `{rounded.lg}` to cards consistently.
- Use `{typography.label-md}` on button labels; `{typography.body-md}` for paragraph text.
- Keep CTA copy in imperative verbs, sentence case, and concise per the Content Style section.

**Must NOT:**
- Introduce colors, font sizes, or radii outside the spec.
- Apply `{elevation.sm}` or any shadow to buttons or flat interactive elements.
- Use `{colors.primary}` for body text or card background fills.
- Rewrite, replace, or invent page copy, headings, labels, or navigation items.
- Alter the defined page structure or information architecture as a side effect of token application.

## When in doubt
- If a required token is absent from the spec, ask the user before inventing a value.
- Prefer composing existing components over introducing new tokens or variants.
- For ambiguous backgrounds, default to `{colors.surface}`; for secondary groupings, use `{colors.surface-dim}`.
- For unspecified breakpoints, apply mobile-first layout with one breakpoint at 768px, consistent with the Layout section.
- For ambiguous text roles, use `{colors.on-surface}` for headings and `{colors.neutral-600}` for body copy.