gradient · soft · minimal · premium · creative

Prism Conic.

A slow conic gradient sweeps behind the page through desaturated lavender, sage, peach at ~22% chroma — soft prismatic light, never rainbow. Pure white cards on top, ink text, hairlines.

01 · Preview

The kitchen sink.

Prism.app

ProductPricingDocsAbout

Sign inGet started

gradient · soft · minimal

Build with Prism Conic.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational

01 · Color

Palette

primary

#191920

secondary

#6E6E78

tertiary

#8E7FC4

neutral

#F4F1EB

surface

#FFFFFF

02 · Typography

Type scale

display

The quick brown fox

h1

A major section heading

h2

A subsection title

body

Body copy in the system's body font.

03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →

Disabled

04 · Inputs

Form controls

Email

iris@studio.com

Password

••••••••••••

Bio

Designing for long-form publications. Based in Kyoto.

05 · Choices

Select & toggle

Plan

Starter

Free forever

Pro

$18 / month

Team

$48 / month

Toggles

Public profile

Require two-factor

Auto-accept invites

06 · Tags & badges

Labeling

NeutralAccentSolidWith dot

NEWBETAv2.0LIVE

07 · Cards

Cards

Feature

Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →

Metric

24,810

▲ +12.4% vs last week

08 · Navigation

Tabs & breadcrumb

Overview

Analytics

Members

Workspace/Projects/Heritage System

09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px

2px

5px

8px · base

10px

12px

14px

16px

18px

20px

21px

10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm

12px

md

18px

lg

24px

pill

9999px

11 · Elevation

Depth & elevation

00 · Flat

Elevation 00

01 · Low

Elevation 01

02 · Medium

Elevation 02

03 · High

Elevation 03

12 · Data

Charts

Weekly revenue

$48,210

M

T

W

T

F

S

S

Active sessions

2,184

02 · The file

DESIGN.md

markdown

1---
2name: "Prism Conic"
3description: "A slow conic gradient sweeps behind the page through desaturated lavender, sage, peach at ~22% chroma — soft prismatic light, never rainbow. Pure white cards on top, ink text, hairlines."
4tags: [gradient, soft, minimal, premium, creative]
5colors:
6  primary:   "#191920"
7  secondary: "#6E6E78"
8  tertiary:  "#8E7FC4"
9  neutral:   "#F4F1EB"
10  surface:   "#FFFFFF"
11typography:
12  display: "Inter Tight"
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4.5rem / 1.05 / 600 / -0.035em"
17    h1:   "2.625rem / 1.1 / 600 / -0.028em"
18    h2:   "1.5rem / 1.3 / 600 / -0.015em"
19    body: "1.0625rem / 1.7 / 400 / -0.003em"
20radius:
21  sm: 12px
22  md: 18px
23  lg: 24px
24  pill: 9999px
25shadows:
26  card:   "0 16px 40px -20px rgba(40, 35, 60, 0.12), 0 1px 3px rgba(40, 35, 60, 0.04)"
27  button: "0 6px 16px -8px rgba(25, 25, 32, 0.22)"
28borders:
29  card:    "1px solid rgba(25, 25, 32, 0.06)"
30  divider: "rgba(25, 25, 32, 0.08)"
31glass:
32  surface: "#FFFFFF"
33  blur:    0px
34  border:  "1px solid rgba(25, 25, 32, 0.06)"
35  shadow:  "0 16px 40px -20px rgba(40, 35, 60, 0.12)"
36  backdrop: "conic-gradient(from 210deg at 50% 50%, rgba(190, 175, 220, 0.45) 0deg, rgba(195, 220, 200, 0.40) 110deg, rgba(245, 215, 195, 0.42) 220deg, rgba(190, 175, 220, 0.45) 360deg)"
37buttons:
38  primary:
39    background: #191920
40    color: #FFFFFF
41    border: 1px solid #191920
42    shape: pill
43    padding: 13px 26px
44    font: 600 / 0.9375rem / -0.005em
45    shadow: 0 6px 16px -8px rgba(25, 25, 32, 0.22)
46  secondary:
47    background: #FFFFFF
48    color: #191920
49    border: 1px solid rgba(25, 25, 32, 0.10)
50    shape: pill
51    padding: 13px 26px
52    font: 500 / 0.9375rem / -0.005em
53  outline:
54    background: transparent
55    color: #191920
56    border: 1px solid rgba(25, 25, 32, 0.16)
57    shape: pill
58    padding: 12px 25px
59    font: 500 / 0.9375rem / -0.005em
60  ghost:
61    background: transparent
62    color: #6E6E78
63    border: none
64    shape: pill
65    padding: 12px 6px
66    font: 500 / 0.9375rem / -0.005em
67    hover: underline
68charts:
69  variant: area
70  stroke_width: 2
71  fill_opacity: 0.18
72  gridlines: false
73  highlight: last
74  dot_marker: true
75  axis_color: "#6E6E78"
76  palette: ["#8E7FC4", "#B8AED9", "#DAD3EB"]
77fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap"
78dependencies: ["lucide-react"]
79---
80 
81# Prism Conic
82 
83## AI Build Instructions
84 
85> **Read this section before writing any code.** The rules below
86> are non-negotiable. Every value used in the UI must come from this
87> file's frontmatter — never substitute, approximate, or invent new
88> colors, fonts, radii, or shadows. If a value is missing, ask the
89> user before adding one.
90 
91### 1 · Your role
92 
93You are building UI for a project that has adopted **Prism Conic** as its
94design system. Treat `DESIGN.md` as the single source of truth.
95Your job is to translate the user's product requirements into
96components and pages that look like they were designed by the same
97person who authored this file.
98 
99### 2 · Token compliance
100 
101- Pull every color, font family, radius, shadow, and spacing value
102  from the frontmatter at the top of this file.
103- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
104  hard-code hex values that bypass the system.
105- When a token can be expressed as a CSS variable, declare it once
106  in your global stylesheet and reference it everywhere downstream.
107- The Google Fonts `<link>` is provided in the Typography section.
108  Add it to `<head>` before any component renders.
109 
110### 3 · Component recipes
111 
112Use these recipes verbatim when building the corresponding component.
113 
114#### Buttons
115 
116Four variants are defined. Pick one — never blend variants or invent a fifth.
117 
118- **Primary** — pill shape, bg `#191920`, text `#FFFFFF`, border `1px solid #191920`, padding `13px 26px`, weight `600`, shadow `0 6px 16px -8px rgba(25, 25, 32, 0.22)`.
119- **Secondary** — pill shape, bg `#FFFFFF`, text `#191920`, border `1px solid rgba(25, 25, 32, 0.10)`, padding `13px 26px`, weight `500`.
120- **Outline** — pill shape, text `#191920`, border `1px solid rgba(25, 25, 32, 0.16)`, padding `12px 25px`, weight `500`.
121- **Ghost** — pill shape, text `#6E6E78`, padding `12px 6px`, weight `500`.
122 
123Reach for **primary** as the single dominant CTA per screen.
124**Secondary** for the supporting action. **Outline** for tertiary
125actions in toolbars. **Ghost** for inline links and table actions.
126 
127#### Cards
128 
129- Background: `#FFFFFF`
130- Border: `1px solid rgba(25, 25, 32, 0.06)`
131- Shadow: `0 16px 40px -20px rgba(40, 35, 60, 0.12), 0 1px 3px rgba(40, 35, 60, 0.04)`
132- Radius: `radius.lg` (`24px`)
133- Internal padding: `20px` for compact cards, `24–28px` for content cards.
134 
135> This system ships a **glass treatment** — see the Glass token table.
136> Apply `backdrop-filter: blur(0px)` to translucent panes.
137> The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract.
138 
139#### Charts
140 
141- Bar/line variant: `area`
142- No gridlines — let the bars/lines carry the data.
143- Highlight strategy: `last` — emphasize a single bar/point per chart.
144- Use the declared palette in order: `#8E7FC4`, `#B8AED9`, `#DAD3EB`.
145 
146#### Typography pairings
147 
148- **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks.
149- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
150- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
151 
152### 4 · Hard constraints
153 
154Never do any of the following without explicit instruction from the user:
155 
156- Introduce a new color, font, radius, or shadow that isn't declared above.
157- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
158- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
159- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
160- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
161 
162### 5 · Before you finish — verify
163 
164Run through this checklist for every screen you produce:
165 
166- [ ] Every color used appears in the Colors table above.
167- [ ] Headlines use the display font; body copy uses the body font.
168- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
169- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
170- [ ] Cards and dividers use the declared border + shadow tokens.
171- [ ] No values were invented; if you needed something missing, you stopped and asked.
172 
173---
174 
175## Overview
176Prism Conic is built on one decision: a slow conic gradient sits behind the entire page, sweeping through three desaturated tints — soft lavender, sage, peach — every stop held at ~22% chroma. The page reads as soft prismatic light, never rainbow. Cards sit on top in pure white. The contrast between the soft prismatic backdrop and the bright white cards is the entire design.
177 
178For creative tools, design platforms, generative-art adjacent products, AI image tools, anything where "soft prismatic light" is the brand mood.
179 
180## The Conic Recipe
181The conic gradient sweeps from 210deg with three desaturated stops, looping back to the start hue so the seam is invisible:
182 
183```css
184body {
185  background:
186    conic-gradient(
187      from 210deg at 50% 50%,
188      rgba(190, 175, 220, 0.45) 0deg,
189      rgba(195, 220, 200, 0.40) 110deg,
190      rgba(245, 215, 195, 0.42) 220deg,
191      rgba(190, 175, 220, 0.45) 360deg
192    ),
193    #F4F1EB;
194}
195```
196 
197The 22% chroma cap is non-negotiable. Pushing any stop higher tips the system into "rainbow vibe gradient." For larger pages, blur the conic layer subtly (`filter: blur(20px)`) and apply it via a fixed pseudo-element so the page content stays crisp.
198 
199## Color
200- **Ink #191920** — primary text and primary CTA.
201- **Graphite #6E6E78** — secondary text, axis labels.
202- **Lavender #8E7FC4** — chromatic accent (active state, chart line). Sits inside the conic family.
203- **Cream #F4F1EB** — page canvas base under the conic.
204- **Paper #FFFFFF** — pure white card surface. The contrast is the design.
205 
206## Typography
207- **Display: Inter Tight 600** at 4.5rem with -3.5% tracking.
208- **Body: Inter 400** at 1.0625rem with 1.7 leading.
209 
210| Role | Font | Size | Weight | Tracking |
211|------|------|------|--------|----------|
212| Hero | Inter Tight | 4.5rem | 600 | -0.035em |
213| H1 | Inter Tight | 2.625rem | 600 | -0.028em |
214| H2 | Inter Tight | 1.5rem | 600 | -0.015em |
215| Body | Inter | 1.0625rem | 400 | -0.003em / 1.7 |
216 
217## Geometry
218- **Radii: 12 / 18 / 24, plus pill.** Generous and soft throughout.
219- **Section gap: 128px** desktop, 80px mobile. The conic needs room to breathe.
220- **12-column grid** with 28px gutters.
221 
222## Buttons
223- **Primary** — solid ink pill. The conic is the protagonist; the CTA stays quiet.
224- **Secondary** — pure white pill with a hairline.
225- **Outline** — bare hairline pill.
226- **Ghost** — bare graphite label, hover underline.
227 
228## Cards
229**Pure white surface** on the conic — no translucency, no glass. The contrast is the entire point. 18px corner radius, 1px ink hairline at 6%, single soft pillowy shadow. Padding 32px minimum.
230 
231## Charts & Data
232Lavender area chart at 2px stroke and 18% fill opacity, no gridlines, end-of-line dot marker. The chart sits inside a white card so the conic stays in the background.
233 
234## Do's and Don'ts
235- ✅ The conic is mandatory. The whole identity rests on it.
236- ✅ Hold every conic stop at ~22% chroma. Desaturation is what makes it premium.
237- ✅ Cards are pure white — never tinted, never glass.
238- ✅ One chromatic accent — lavender. It sits inside the conic's family.
239- ❌ No high-chroma conic stops. Saturated stops kill the system instantly.
240- ❌ No translucent or tinted cards. White only.
241- ❌ No second chromatic accent beyond lavender.
242- ❌ No second light source — the conic is the only background treatment.
243 
244---
245 
246## Tokens
247 
248> Generated from the same source the live preview renders from.
249> Treat the values below as the contract — never substitute approximations.
250 
251### Colors
252 
253| Role      | Value |
254|-----------|-------|
255| primary   | `#191920` |
256| secondary | `#6E6E78` |
257| tertiary  | `#8E7FC4` |
258| neutral   | `#F4F1EB` |
259| surface   | `#FFFFFF` |
260 
261### Typography
262 
263- **Display:** Inter Tight
264- **Body:** Inter
265- **Mono:** JetBrains Mono
266 
267| Role | size / leading / weight / tracking |
268|------|------------------------------------|
269| Hero | 4.5rem / 1.05 / 600 / -0.035em |
270| H1   | 2.625rem / 1.1 / 600 / -0.028em |
271| H2   | 1.5rem / 1.3 / 600 / -0.015em |
272| Body | 1.0625rem / 1.7 / 400 / -0.003em |
273 
274### Radius
275 
276- sm: `12px`
277- md: `18px`
278- lg: `24px`
279- pill: `9999px`
280 
281### Shadows
282 
283- **card:** `0 16px 40px -20px rgba(40, 35, 60, 0.12), 0 1px 3px rgba(40, 35, 60, 0.04)`
284- **button:** `0 6px 16px -8px rgba(25, 25, 32, 0.22)`
285 
286### Borders
287 
288- **card:** `1px solid rgba(25, 25, 32, 0.06)`
289- **divider:** `rgba(25, 25, 32, 0.08)`
290 
291### Glass
292 
293Translucent panes with backdrop-filter — the preview renders cards from these exact values.
294 
295| Property | Value |
296|----------|-------|
297| surface | `#FFFFFF` |
298| blur | `0px` |
299| border | `1px solid rgba(25, 25, 32, 0.06)` |
300| shadow | `0 16px 40px -20px rgba(40, 35, 60, 0.12)` |
301| backdrop | `conic-gradient(from 210deg at 50% 50%, rgba(190, 175, 220, 0.45) 0deg, rgba(195, 220, 200, 0.40) 110deg, rgba(245, 215, 195, 0.42) 220deg, rgba(190, 175, 220, 0.45) 360deg)` |
302 
303### Buttons
304 
305Four variants, each fully tokenized. The preview renders from these exact values.
306 
307#### Primary
308 
309| Property | Value |
310|----------|-------|
311| shape | `pill` |
312| background | `#191920` |
313| color | `#FFFFFF` |
314| border | `1px solid #191920` |
315| padding | `13px 26px` |
316| fontWeight | `600` |
317| fontSize | `0.9375rem` |
318| tracking | `-0.005em` |
319| shadow | `0 6px 16px -8px rgba(25, 25, 32, 0.22)` |
320 
321#### Secondary
322 
323| Property | Value |
324|----------|-------|
325| shape | `pill` |
326| background | `#FFFFFF` |
327| color | `#191920` |
328| border | `1px solid rgba(25, 25, 32, 0.10)` |
329| padding | `13px 26px` |
330| fontWeight | `500` |
331| fontSize | `0.9375rem` |
332| tracking | `-0.005em` |
333 
334#### Outline
335 
336| Property | Value |
337|----------|-------|
338| shape | `pill` |
339| background | `transparent` |
340| color | `#191920` |
341| border | `1px solid rgba(25, 25, 32, 0.16)` |
342| padding | `12px 25px` |
343| fontWeight | `500` |
344| fontSize | `0.9375rem` |
345| tracking | `-0.005em` |
346 
347#### Ghost
348 
349| Property | Value |
350|----------|-------|
351| shape | `pill` |
352| background | `transparent` |
353| color | `#6E6E78` |
354| border | `none` |
355| padding | `12px 6px` |
356| fontWeight | `500` |
357| fontSize | `0.9375rem` |
358| tracking | `-0.005em` |
359| hoverHint | `underline` |
360 
361### Charts
362 
363| Property | Value |
364|----------|-------|
365| variant | `area` |
366| strokeWidth | `2` |
367| fillOpacity | `0.18` |
368| gridlines | `false` |
369| highlight | `last` |
370| dotMarker | `true` |
371| axisColor | `#6E6E78` |
372| palette | `#8E7FC4`, `#B8AED9`, `#DAD3EB` |
373

03 · How to use it

Wire it into your agent.

markdown

# CLAUDE.md
 
Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.

04 · Required setup

Three snippets.

Google Fonts link

html

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" />

Install dependencies

bash

npm install lucide-react

Tailwind config

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Inter Tight"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#191920',
        secondary: '#6E6E78',
        accent:    '#8E7FC4',
        neutral:   '#F4F1EB',
        surface:   '#FFFFFF',
      },
      borderRadius: {
        sm: '12px',
        md: '18px',
        lg: '24px',
      },
    },
  },
};

05 · Keep browsing

Try another system.

Arcade Night

Esports broadcast in dark mode. Near-black surfaces, sharp display serif paired with a square mono, knife-edge corners, a single high-voltage lime accent. Built for tournaments and launch events.

darkgamingeventboldpremium

Arcade.app

ProductPricingDocsAbout

Sign inGet started