Circle Health

Themes

Token sets that define every Circle surface.

Berlin

berlin

The default Circle product palette with warm sand surfaces and blue actions.

Supporting tokens (69)

Typography

--font-monoui-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-140.875rem
--text-body-14--font-weight400
--text-body-14--letter-spacing-0.01em
--text-body-14--line-height1.5rem
--text-body-14-medium0.875rem
--text-body-14-medium--font-weight500
--text-body-14-medium--letter-spacing-0.02em
--text-body-14-medium--line-height1.5rem
--text-body-161rem
--text-body-16--font-weight400
--text-body-16--letter-spacing-0.01em
--text-body-16--line-height1.5rem
--text-body-16-medium1rem
--text-body-16-medium--font-weight500
--text-body-16-medium--letter-spacing-0.02em
--text-body-16-medium--line-height1.5rem
--text-body-201.25rem
--text-body-20--font-weight400
--text-body-20--letter-spacing-0.01em
--text-body-20--line-height2rem
--text-body-20-medium1.25rem
--text-body-20-medium--font-weight500
--text-body-20-medium--letter-spacing-0.02em
--text-body-20-medium--line-height2rem
--text-body-28-medium1.75rem
--text-body-28-medium--font-weight500
--text-body-28-medium--letter-spacing-0.03em
--text-body-28-medium--line-height2.25rem
--text-display-281.75rem
--text-display-28--font-weight400
--text-display-28--letter-spacing-0.02em
--text-display-28--line-height2.25rem
--text-display-362.25rem
--text-display-36--font-weight400
--text-display-36--letter-spacing-0.02em
--text-display-36--line-height3rem
--text-display-483rem
--text-display-48--font-weight400
--text-display-48--letter-spacing-0.02em
--text-display-48--line-height4rem
--text-display-563.5rem
--text-display-56--font-weight400
--text-display-56--letter-spacing-0.02em
--text-display-56--line-height4.5rem
--text-heading0.75rem
--text-heading--font-weight600
--text-heading--letter-spacing0.12em
--text-heading--line-height0.75rem
--text-label0.6875rem
--text-label--font-weight600
--text-label--letter-spacing0.06em
--text-label--line-height0.75rem
--text-small0.6875rem
--text-small--font-weight400
--text-small--letter-spacing0
--text-small--line-height1rem

Shape

--border-radius12px
--radius0.75rem
--radius-control1rem
--radius-dialog1rem
--radius-field0.5rem
--radius-mediavar(--border-radius)
--shadow-elevated0 20px 60px rgba(0, 0, 0, 0.16)
--shadow-focus0 0 0 2px var(--White), 0 0 0 4px var(--Black)
--shadow-soft0 4px 12px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.04)

Misc

--max-width1100px

Linen

linen

A brighter editorial variant with softer neutrals and a greener accent.

Supporting tokens (69)

Typography

--font-monoui-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-140.875rem
--text-body-14--font-weight400
--text-body-14--letter-spacing-0.01em
--text-body-14--line-height1.5rem
--text-body-14-medium0.875rem
--text-body-14-medium--font-weight500
--text-body-14-medium--letter-spacing-0.02em
--text-body-14-medium--line-height1.5rem
--text-body-161rem
--text-body-16--font-weight400
--text-body-16--letter-spacing-0.01em
--text-body-16--line-height1.5rem
--text-body-16-medium1rem
--text-body-16-medium--font-weight500
--text-body-16-medium--letter-spacing-0.02em
--text-body-16-medium--line-height1.5rem
--text-body-201.25rem
--text-body-20--font-weight400
--text-body-20--letter-spacing-0.01em
--text-body-20--line-height2rem
--text-body-20-medium1.25rem
--text-body-20-medium--font-weight500
--text-body-20-medium--letter-spacing-0.02em
--text-body-20-medium--line-height2rem
--text-body-28-medium1.75rem
--text-body-28-medium--font-weight500
--text-body-28-medium--letter-spacing-0.03em
--text-body-28-medium--line-height2.25rem
--text-display-281.75rem
--text-display-28--font-weight400
--text-display-28--letter-spacing-0.02em
--text-display-28--line-height2.25rem
--text-display-362.25rem
--text-display-36--font-weight400
--text-display-36--letter-spacing-0.02em
--text-display-36--line-height3rem
--text-display-483rem
--text-display-48--font-weight400
--text-display-48--letter-spacing-0.02em
--text-display-48--line-height4rem
--text-display-563.5rem
--text-display-56--font-weight400
--text-display-56--letter-spacing-0.02em
--text-display-56--line-height4.5rem
--text-heading0.75rem
--text-heading--font-weight600
--text-heading--letter-spacing0.12em
--text-heading--line-height0.75rem
--text-label0.6875rem
--text-label--font-weight600
--text-label--letter-spacing0.06em
--text-label--line-height0.75rem
--text-small0.6875rem
--text-small--font-weight400
--text-small--letter-spacing0
--text-small--line-height1rem

Shape

--border-radius12px
--radius0.75rem
--radius-control1rem
--radius-dialog1rem
--radius-field0.5rem
--radius-mediavar(--border-radius)
--shadow-elevated0 20px 60px rgba(0, 0, 0, 0.16)
--shadow-focus0 0 0 2px var(--White), 0 0 0 4px var(--Black)
--shadow-soft0 4px 12px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.04)

Misc

--max-width1100px

Graphite

graphite

A cooler, higher-contrast operating palette for dense internal tooling surfaces.

Supporting tokens (69)

Typography

--font-monoui-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-140.875rem
--text-body-14--font-weight400
--text-body-14--letter-spacing-0.01em
--text-body-14--line-height1.5rem
--text-body-14-medium0.875rem
--text-body-14-medium--font-weight500
--text-body-14-medium--letter-spacing-0.02em
--text-body-14-medium--line-height1.5rem
--text-body-161rem
--text-body-16--font-weight400
--text-body-16--letter-spacing-0.01em
--text-body-16--line-height1.5rem
--text-body-16-medium1rem
--text-body-16-medium--font-weight500
--text-body-16-medium--letter-spacing-0.02em
--text-body-16-medium--line-height1.5rem
--text-body-201.25rem
--text-body-20--font-weight400
--text-body-20--letter-spacing-0.01em
--text-body-20--line-height2rem
--text-body-20-medium1.25rem
--text-body-20-medium--font-weight500
--text-body-20-medium--letter-spacing-0.02em
--text-body-20-medium--line-height2rem
--text-body-28-medium1.75rem
--text-body-28-medium--font-weight500
--text-body-28-medium--letter-spacing-0.03em
--text-body-28-medium--line-height2.25rem
--text-display-281.75rem
--text-display-28--font-weight400
--text-display-28--letter-spacing-0.02em
--text-display-28--line-height2.25rem
--text-display-362.25rem
--text-display-36--font-weight400
--text-display-36--letter-spacing-0.02em
--text-display-36--line-height3rem
--text-display-483rem
--text-display-48--font-weight400
--text-display-48--letter-spacing-0.02em
--text-display-48--line-height4rem
--text-display-563.5rem
--text-display-56--font-weight400
--text-display-56--letter-spacing-0.02em
--text-display-56--line-height4.5rem
--text-heading0.75rem
--text-heading--font-weight600
--text-heading--letter-spacing0.12em
--text-heading--line-height0.75rem
--text-label0.6875rem
--text-label--font-weight600
--text-label--letter-spacing0.06em
--text-label--line-height0.75rem
--text-small0.6875rem
--text-small--font-weight400
--text-small--letter-spacing0
--text-small--line-height1rem

Shape

--border-radius12px
--radius0.75rem
--radius-control1rem
--radius-dialog1rem
--radius-field0.5rem
--radius-mediavar(--border-radius)
--shadow-elevated0 20px 60px rgba(0, 0, 0, 0.16)
--shadow-focus0 0 0 2px var(--White), 0 0 0 4px var(--Black)
--shadow-soft0 4px 12px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.04)

Misc

--max-width1100px