Spacing & radius

The spacing scale, corner radii and elevation.

radius

--radius-xs 2px

used by 12 components · on 1 page

FirstDaySession · CID-067 HeroShowcase · CID-012 Block · CID-015 CohortHeatmap · CID-021 KpiCard · CID-017 MrrChart · CID-019 OrbitDashboard · CID-023 OrbitMark · CID-022 PlanBadge · CID-018 PlanDonut · CID-020 Sparkline · CID-016 OrbitDesignSystem · CID-024

--radius-control 6px

used by 12 components · on 1 page

--radius-panel 14px

used by 1 component · on 1 page

HeroShowcase · CID-012

rounded-sm

rounded-md

rounded-lg

rounded-xl

rounded-2xl

rounded-full

spacing

1 · 4px

2 · 8px

3 · 12px

4 · 16px

6 · 24px

8 · 32px

12 · 48px

16 · 64px

24 · 96px

shadow

--shadow-hair

used by 1 component · on 1 page

OrbitDesignSystem · CID-024

--shadow-menu

used by 1 component · on 1 page

HeroShowcase · CID-012

--shadow-tip

used by 9 components · on 1 page

Block · CID-015 CohortHeatmap · CID-021 KpiCard · CID-017 MrrChart · CID-019 OrbitDashboard · CID-023 OrbitMark · CID-022 PlanBadge · CID-018 PlanDonut · CID-020 Sparkline · CID-016

--shadow-pop

used by 0 components · on 9 pages

/ · /agent · /errors · /errors/[code] · /gallery · /gallery/[slug] · /lab/logos · /tools · /tools/designmd-extractor

--shadow-cta

used by 1 component · on 1 page

FinalCta · CID-063

--shadow-bubble

used by 1 component · on 1 page

HeroShowcase · CID-012

--shadow-lift

used by 3 components · on 6 pages

FirstDaySession · CID-067 GettingStartedSection · CID-059 ToolsMenu · CID-030

/ · /agent · /gallery · /gallery/[slug] · /tools · /tools/designmd-extractor

--shadow-frame

used by 2 components · on 1 page

BrowserShot · CID-007 VerifyPreview · CID-031

--shadow-hero

used by 1 component · on 1 page

HeroShowcase · CID-012

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl

Coherent Design MethodGitHubDesign system read from this app's code