Themes
Token sets that define every Circle surface. Hover a swatch to see its CSS variable and Tailwind token.
Berlin
berlin
The default Circle product palette with warm sand surfaces and blue actions.
76 colors
69 other tokens
145 total
Color Grid
Hover a swatch to see the CSS variable and Tailwind token.
Supporting tokens69 hidden by default
Typography
59--font-mono
ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace
--font-sans
"Be Vietnam Pro", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif
--font-tiempos
"Tiempos Text", Georgia, "Times New Roman", serif
--text-body-14
0.875rem
--text-body-14--font-weight
400
--text-body-14--letter-spacing
-0.01em
--text-body-14--line-height
1.5rem
--text-body-14-medium
0.875rem
--text-body-14-medium--font-weight
500
--text-body-14-medium--letter-spacing
-0.02em
--text-body-14-medium--line-height
1.5rem
--text-body-16
1rem
--text-body-16--font-weight
400
--text-body-16--letter-spacing
-0.01em
--text-body-16--line-height
1.5rem
--text-body-16-medium
1rem
--text-body-16-medium--font-weight
500
--text-body-16-medium--letter-spacing
-0.02em
--text-body-16-medium--line-height
1.5rem
--text-body-20
1.25rem
--text-body-20--font-weight
400
--text-body-20--letter-spacing
-0.01em
--text-body-20--line-height
2rem
--text-body-20-medium
1.25rem
--text-body-20-medium--font-weight
500
--text-body-20-medium--letter-spacing
-0.02em
--text-body-20-medium--line-height
2rem
--text-body-28-medium
1.75rem
--text-body-28-medium--font-weight
500
--text-body-28-medium--letter-spacing
-0.03em
--text-body-28-medium--line-height
2.25rem
--text-display-28
1.75rem
--text-display-28--font-weight
400
--text-display-28--letter-spacing
-0.02em
--text-display-28--line-height
2.25rem
--text-display-36
2.25rem
--text-display-36--font-weight
400
--text-display-36--letter-spacing
-0.02em
--text-display-36--line-height
3rem
--text-display-48
3rem
--text-display-48--font-weight
400
--text-display-48--letter-spacing
-0.02em
--text-display-48--line-height
4rem
--text-display-56
3.5rem
--text-display-56--font-weight
400
--text-display-56--letter-spacing
-0.02em
--text-display-56--line-height
4.5rem
--text-heading
0.75rem
--text-heading--font-weight
600
--text-heading--letter-spacing
0.12em
--text-heading--line-height
0.75rem
--text-label
0.6875rem
--text-label--font-weight
600
--text-label--letter-spacing
0.06em
--text-label--line-height
0.75rem
--text-small
0.6875rem
--text-small--font-weight
400
--text-small--letter-spacing
0
--text-small--line-height
1rem
Shape
9--border-radius
12px
--radius
0.75rem
--radius-control
1rem
--radius-dialog
1rem
--radius-field
0.5rem
--radius-media
var(--border-radius)
--shadow-elevated
0 20px 60px rgba(0, 0, 0, 0.16)
--shadow-focus
0 0 0 2px var(--White), 0 0 0 4px var(--Black)
--shadow-soft
0 4px 12px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.04)
Misc
1--max-width
1100px
Linen
linen
A brighter editorial variant with softer neutrals and a greener accent.
76 colors
69 other tokens
145 total
Color Grid
Hover a swatch to see the CSS variable and Tailwind token.
Supporting tokens69 hidden by default
Typography
59--font-mono
ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace
--font-sans
"Be Vietnam Pro", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif
--font-tiempos
"Tiempos Text", Georgia, "Times New Roman", serif
--text-body-14
0.875rem
--text-body-14--font-weight
400
--text-body-14--letter-spacing
-0.01em
--text-body-14--line-height
1.5rem
--text-body-14-medium
0.875rem
--text-body-14-medium--font-weight
500
--text-body-14-medium--letter-spacing
-0.02em
--text-body-14-medium--line-height
1.5rem
--text-body-16
1rem
--text-body-16--font-weight
400
--text-body-16--letter-spacing
-0.01em
--text-body-16--line-height
1.5rem
--text-body-16-medium
1rem
--text-body-16-medium--font-weight
500
--text-body-16-medium--letter-spacing
-0.02em
--text-body-16-medium--line-height
1.5rem
--text-body-20
1.25rem
--text-body-20--font-weight
400
--text-body-20--letter-spacing
-0.01em
--text-body-20--line-height
2rem
--text-body-20-medium
1.25rem
--text-body-20-medium--font-weight
500
--text-body-20-medium--letter-spacing
-0.02em
--text-body-20-medium--line-height
2rem
--text-body-28-medium
1.75rem
--text-body-28-medium--font-weight
500
--text-body-28-medium--letter-spacing
-0.03em
--text-body-28-medium--line-height
2.25rem
--text-display-28
1.75rem
--text-display-28--font-weight
400
--text-display-28--letter-spacing
-0.02em
--text-display-28--line-height
2.25rem
--text-display-36
2.25rem
--text-display-36--font-weight
400
--text-display-36--letter-spacing
-0.02em
--text-display-36--line-height
3rem
--text-display-48
3rem
--text-display-48--font-weight
400
--text-display-48--letter-spacing
-0.02em
--text-display-48--line-height
4rem
--text-display-56
3.5rem
--text-display-56--font-weight
400
--text-display-56--letter-spacing
-0.02em
--text-display-56--line-height
4.5rem
--text-heading
0.75rem
--text-heading--font-weight
600
--text-heading--letter-spacing
0.12em
--text-heading--line-height
0.75rem
--text-label
0.6875rem
--text-label--font-weight
600
--text-label--letter-spacing
0.06em
--text-label--line-height
0.75rem
--text-small
0.6875rem
--text-small--font-weight
400
--text-small--letter-spacing
0
--text-small--line-height
1rem
Shape
9--border-radius
12px
--radius
0.75rem
--radius-control
1rem
--radius-dialog
1rem
--radius-field
0.5rem
--radius-media
var(--border-radius)
--shadow-elevated
0 20px 60px rgba(0, 0, 0, 0.16)
--shadow-focus
0 0 0 2px var(--White), 0 0 0 4px var(--Black)
--shadow-soft
0 4px 12px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.04)
Misc
1--max-width
1100px
Graphite
graphite
A cooler, higher-contrast operating palette for dense internal tooling surfaces.
76 colors
69 other tokens
145 total
Color Grid
Hover a swatch to see the CSS variable and Tailwind token.
Supporting tokens69 hidden by default
Typography
59--font-mono
ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace
--font-sans
"Be Vietnam Pro", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif
--font-tiempos
"Tiempos Text", Georgia, "Times New Roman", serif
--text-body-14
0.875rem
--text-body-14--font-weight
400
--text-body-14--letter-spacing
-0.01em
--text-body-14--line-height
1.5rem
--text-body-14-medium
0.875rem
--text-body-14-medium--font-weight
500
--text-body-14-medium--letter-spacing
-0.02em
--text-body-14-medium--line-height
1.5rem
--text-body-16
1rem
--text-body-16--font-weight
400
--text-body-16--letter-spacing
-0.01em
--text-body-16--line-height
1.5rem
--text-body-16-medium
1rem
--text-body-16-medium--font-weight
500
--text-body-16-medium--letter-spacing
-0.02em
--text-body-16-medium--line-height
1.5rem
--text-body-20
1.25rem
--text-body-20--font-weight
400
--text-body-20--letter-spacing
-0.01em
--text-body-20--line-height
2rem
--text-body-20-medium
1.25rem
--text-body-20-medium--font-weight
500
--text-body-20-medium--letter-spacing
-0.02em
--text-body-20-medium--line-height
2rem
--text-body-28-medium
1.75rem
--text-body-28-medium--font-weight
500
--text-body-28-medium--letter-spacing
-0.03em
--text-body-28-medium--line-height
2.25rem
--text-display-28
1.75rem
--text-display-28--font-weight
400
--text-display-28--letter-spacing
-0.02em
--text-display-28--line-height
2.25rem
--text-display-36
2.25rem
--text-display-36--font-weight
400
--text-display-36--letter-spacing
-0.02em
--text-display-36--line-height
3rem
--text-display-48
3rem
--text-display-48--font-weight
400
--text-display-48--letter-spacing
-0.02em
--text-display-48--line-height
4rem
--text-display-56
3.5rem
--text-display-56--font-weight
400
--text-display-56--letter-spacing
-0.02em
--text-display-56--line-height
4.5rem
--text-heading
0.75rem
--text-heading--font-weight
600
--text-heading--letter-spacing
0.12em
--text-heading--line-height
0.75rem
--text-label
0.6875rem
--text-label--font-weight
600
--text-label--letter-spacing
0.06em
--text-label--line-height
0.75rem
--text-small
0.6875rem
--text-small--font-weight
400
--text-small--letter-spacing
0
--text-small--line-height
1rem
Shape
9--border-radius
12px
--radius
0.75rem
--radius-control
1rem
--radius-dialog
1rem
--radius-field
0.5rem
--radius-media
var(--border-radius)
--shadow-elevated
0 20px 60px rgba(0, 0, 0, 0.16)
--shadow-focus
0 0 0 2px var(--White), 0 0 0 4px var(--Black)
--shadow-soft
0 4px 12px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.04)
Misc
1--max-width
1100px