---
title: "Anything design system"
variant: extended
source: https://www.createanything.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/createanything-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Anything · Design System

> A quiet canvas for building with AI

**Theme:** light · **Industry:** ai · **Source:** https://www.createanything.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Anything presents an AI app builder through a restrained white canvas, spacious product demonstrations, and sharply contrasting charcoal feature sections. Rounded, lightly bordered cards and subtle green-blue accents keep the interface approachable without competing with the showcased apps.

## North star

Keep the page quiet and spacious, letting crisp product UI and alternating charcoal feature bands provide the visual emphasis.

## Overview

The page relies on a predominantly white canvas, with near-black sections used as deliberate pauses for feature storytelling. Charcoal text carries the main hierarchy; soft gray supports captions and secondary copy, while green and pale blue appear as restrained accents rather than broad brand-color fields. Typography combines Inter for much of the body copy with Instrument Sans for prominent headings and calls to action. The opening viewport is unusually spacious: a compact header, a large open hero area, and a wide prompt field create a calm invitation to start building. Further down, content alternates between centered introductions, product examples, and dark feature bands. Rounded cards, fine gray borders, and gentle shadows organize interface previews without making the page feel dense. Most imagery functions as product evidence—app screens and generated UI—rather than decorative photography.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas, light sections, and contrast color for dark controls. |
| Soft Graphite | `#6a6a6c` | `--color-soft-graphite` | neutral | Main muted text color for supporting copy and descriptions. |
| Night Charcoal | `#18191b` | `--color-night-charcoal` | brand | Primary text, dark feature-section backgrounds, and the main CTA. |
| Cloud Gray | `#f9f9f9` | `--color-cloud-gray` | surface | Subtle card and media surfaces, especially behind product examples. |
| Quiet Silver | `#acadae` | `--color-quiet-silver` | neutral | Low-emphasis text and muted portions of an animated accent treatment. |
| Fine Pewter | `#c4c4c4` | `--color-fine-pewter` | neutral | Thin outlines around example cards and interface panels. |
| Slate Gray | `#6b7280` | `--color-slate-gray` | semantic | Secondary gradient text stop; not a defining page color. |
| Builder Green | `#6dc078` | `--color-builder-green` | accent | Small green accent within highlighted heading text and interface examples. |
| Sky Lavender | `#99b7fa` | `--color-sky-lavender` | accent | Small pale-blue accent in gradient heading treatment. |
| Mockup Gray | `#bbbbbb` | `--color-mockup-gray` | neutral | Occasional media and card detail, not a defining brand color. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Appears in isolated card and mockup details rather than as the main dark surface. |
| Button Gray | `#7d7f80` | `--color-button-gray` | neutral | Minor text and control detail in interface examples. |
| Leaf Green | `#448f52` | `--color-leaf-green` | accent | Occasional small accent text, not a broad page background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9f9f9` (Cloud Gray) · `--color-surface-2` → `#18191b` (Night Charcoal) · `--color-surface-3` → `#000000` (Pure Black) · `--color-text` → `#18191b` (Night Charcoal) · `--color-text-muted` → `#6a6a6c` (Soft Graphite) · `--color-text-subtle` → `#acadae` (Quiet Silver) · `--color-border` → `#c4c4c4` (Fine Pewter) · `--color-accent` → `#6dc078` (Builder Green) · `--color-accent-2` → `#99b7fa` (Sky Lavender) · `--color-accent-3` → `#448f52` (Leaf Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#18191b` | `#ffffff` | 17.59:1 | AAA |
| `#18191b` | `#f9f9f9` | 16.71:1 | AAA |
| `#18191b` | `#000000` | 1.19:1 | fail |
| `#6a6a6c` | `#ffffff` | 5.4:1 | AA |
| `#6a6a6c` | `#f9f9f9` | 5.13:1 | AA |
| `#6a6a6c` | `#18191b` | 3.26:1 | AA-large |
| `#6a6a6c` | `#000000` | 3.89:1 | AA-large |
| `#acadae` | `#ffffff` | 2.25:1 | fail |
| `#acadae` | `#f9f9f9` | 2.13:1 | fail |
| `#acadae` | `#18191b` | 7.83:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgb(172, 173, 174) 0%, rgb(172, 173, 174) 30%, rgb(109, 192, 120) 35%, rgb(153, 183, 250) 40%, rgb(172, 173, 174) 45%, rgb(172, 173, 174) 100%)`
- `linear-gradient(90deg, rgb(107, 114, 128) 0%, rgb(107, 114, 128) 30%, rgb(59, 130, 246) 35%, rgb(16, 185, 129) 40%, rgb(107, 114, 128) 45%, rgb(107, 114, 128) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600, 300 | Body copy, captions, and much of the general interface text. | Inter |
| Instrument Sans | `--font-display` | webfont | 400, 600 | Prominent headings, links, and primary button labels. | Inter |
| Instrument Serif | `--font-instrument-serif` | webfont | 500 | A very minor serif detail in the measured page typography. | Lora |

- **Inter:** Use regular-weight sentence case for readable, understated supporting copy.
- **Instrument Sans:** Keep headings clean and unforced; measured heading and button styles use regular or semibold weights.
- **Instrument Serif:** Use sparingly; it is not a defining display style on this page.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1.5 | 0 | — | Inter | Large display text where the page uses oversized promotional messaging. |
| h1 | 54px | 400 | 1.4 | 0 | — | Instrument Sans | Hero-level headline and primary page statement. |
| h2 | 42px | 600 | 1.4 | 0 | — | Instrument Sans | Section titles, including centered feature introductions. |
| h3 | 29px | 300 | 0.55 | 0 | — | Inter | Small or light-weight subheadings in feature content. |
| h4 | 24px | 400 | 1.4 | 0 | — | Instrument Sans | Compact feature titles and product-example headings. |
| body | 16px | 400 | 1.5 | 0 | — | Inter | Explanatory paragraphs and standard interface copy. |
| caption | 14px | 400 | 1.5 | 0 | — | Inter | Short supporting labels and secondary descriptions. |
| button | 16px | 400 | 1.2 | 0 | — | Instrument Sans | Primary action labels such as Get started. |
| link | 16px | 400 | 1.5 | 0 | — | Instrument Sans | Navigation and inline text links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 6, 8, 12, 15, 16, 18, 20, 22, 24, 25, 27, 30, 32, 40, 50 px.
- Section rhythm 50px · element gap 22px · card padding — · max content width 855px.

The measured content max width is 855px, with a comfortable density and a spacious section rhythm. The opening composition centers a compact header and prompt field amid extensive white space. Subsequent sections mix centered headings with three-column examples, two-column dark feature content, and a card-heavy product showcase. Use a consistent centered content frame, generous separation between blocks, and restrained alignment changes to keep long product storytelling easy to scan.

## Shape & elevation

- Radius: button `50%` · card `20px` · media `20px` · xs `4px` · sm `8px` · md `12px` · lg `20px` · xl `31px` · pill `9999px`
- Shadow `md` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`
- Motion: standard transition `0.3s cubic-bezier(0.23, 1, 0.32, 1)` on interactive elements.

The visual system favors flat surfaces and fine outlines over strong depth effects. Product cards use subtle gray borders and rounded corners; a measured medium shadow exists on cards but is restrained. Use dark section bands as the main layer change, rather than stacking panels or adding dramatic shadows.

## Imagery

The page uses product UI previews and generated app examples as its main imagery, not lifestyle photography. Present them as clean interface panels and cards with light surfaces and rounded corners. The screenshots show some unavailable image assets, so avoid making broken-image placeholders part of the intended style; prioritize believable, legible product mockups. Keep imagery secondary to the open canvas and copy.

## Components

### Header

Compact centered navigation bar on a white canvas, with a wordmark area and a dark pill-shaped Get started action.

### Hero prompt field

Wide, lightly outlined prompt input with muted placeholder copy and a small circular submit control aligned at the lower right.

### Builder example cards

Light rounded cards with fine gray borders, short feature copy, and product-interface preview areas.

### Dark feature band

Full-width charcoal section with centered heading and light supporting copy, followed by contrasting white feature cards.

### Product showcase

Large, restrained product UI panel on a white background, accompanied by concise feature labels and descriptions.

### Section introduction

Centered heading and short muted subtitle with substantial open space around the content.

### Measured component styles

- **Primary button** (“Get started”): background #18191b · text #ffffff · border 1px solid · radius 9999px · padding 10px 16px · 400 16px Instrument Sans
- **Secondary button**: background #dbdbdb · text #000000 · radius 9999px · padding 0px · 400 16px Inter
- **Link** (“Pricing”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Instrument Sans
- **Input**: transparent background · text #000000 · radius 0px · padding 16px · 400 14px Inter
- **Card** (“Make a playful habit tracker app Make up”): background #f9f9f9 · text #000000 · border 1px solid #c4c4c4 · radius 20px · padding 0px · 400 16px Inter

## Do

- Preserve the white canvas as the dominant surface.
- Use charcoal sections as purposeful contrast, not as the default.
- Center the opening prompt field within a generous hero.
- Show product features inside rounded, lightly bordered cards.
- Reserve green and pale blue for small accent moments.
- Use muted gray for supporting text and captions.

## Don't

- Do not crowd the hero with extra navigation or decorative content.
- Do not use large saturated color blocks as a background.
- Do not add heavy shadows or thick card outlines.
- Do not turn product mockups into lifestyle photography.
- Do not make every section a card grid.
- Do not use green or blue as dominant text or surface colors.

## Agent prompt

Build a new page in Anything’s restrained AI-builder style. Start with a Gallery White (#ffffff) canvas, compact centered header, and a spacious hero that focuses on one clear prompt input. Use Night Charcoal (#18191b) for primary text, dark feature bands, and the main pill CTA; use Soft Graphite (#6a6a6c) for supporting copy. Present product UI in Cloud Gray (#f9f9f9) cards with Fine Pewter (#c4c4c4) hairlines and rounded corners. Keep Builder Green (#6dc078) and Sky Lavender (#99b7fa) as small accents, not broad fills. Combine Instrument Sans headings with Inter body copy. Alternate calm white showcase sections with occasional charcoal feature blocks, and maintain generous whitespace, centered content, and readable short descriptions.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered navigation above a sparse, full-width white hero with a broad prompt field. | idea prompt, primary start action, text submission | minimal header, pill CTA, outlined prompt box, circular submit control |
| 2 | gallery | Centered section title above a spread of example projects arranged in three columns. | social proof, browse examples | centered heading, project thumbnails, small labels |
| 3 | feature-grid | Charcoal feature band with centered introduction and a two-column collection of white cards. | feature discovery, capability scanning | dark section background, light rounded cards, product-preview areas |
| 4 | product-showcase | Long white product showcase with multiple interface examples and feature details. | feature exploration, product proof | large UI previews, rounded panels, short feature descriptions |
| 5 | feature-split | Full-width charcoal band with centered headline, supporting text, and product examples. | design-quality positioning, visual proof | dark canvas, centered typography, embedded UI previews |
| 6 | feature-split | Short centered white introduction with heading and concise explanatory copy. | platform overview, section transition | centered heading, muted supporting text |
| 7 | feature-split | White section with left-aligned mobile preview and adjacent heading and description. | mobile capability explanation, app-store launch | product preview, text-and-media pairing, open white canvas |

## Source CSS custom properties (selected)

```css
--radius: 0.5rem;
--background: #ffffff;
--foreground: #18191B;
--card-foreground: #18191B;
--popover-foreground: #18191B;
--primary: #18191B;
--primary-foreground: #ffffff;
--secondary: #f2f2f2;
--secondary-foreground: #18191B;
--muted-foreground: #6A6A6C;
--accent: #EAF2FF;
--accent-foreground: #4180EB;
--destructive-foreground: #ffffff;
--border: #dbdbdb;
--sidebar-foreground: #18191B;
--sidebar-primary: #18191B;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #EAF2FF;
--sidebar-accent-foreground: #4180EB;
--sidebar-border: #dbdbdb;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/createanything-com