Foundation
Radius
Radius values control the rounded corners on components and content blocks. Product UI stays rectangular: small radii keep dense tools precise and professional. Marketing surfaces use larger tokens so hero and editorial layouts feel expressive without breaking the brand's sharp geometry.
Rules
- Use semantic tokens from the scale. Do not hard-code arbitrary pixel values in product UI.
- Product UI defaults to rounded-sm (4px). Use rounded-xs (2px) only for tags, badges, and compact labels.
- Marketing-only components may use rounded-lg and above. Do not carry those values into the app shell.
- border-radius: 9999px (pill) is reserved for OwnerAvatar and decorative play buttons. System avatars use rounded-md (8px).
- The logo mark always uses 4px (rounded-sm), regardless of context.
- Pair larger radii with generous padding so content inside has room to breathe.
Product Scale
App and dashboard surfaces. Most elements use rounded-sm. Tags and badges step down to rounded-xs.
radius-xsrounded-xs
Badges, tags, status pills, mention chips, identifier labels.
radius-smrounded-sm
Buttons, inputs, notifications, widgets, dialogs, popovers, logo mark. Default for product UI.
radius-mdrounded-md
Dropdown items, sidebar menu buttons, inner marketing visuals, photo containers.
radius-xs
rounded-xs · 2px
radius-sm
rounded-sm · 4px
radius-md
rounded-md · 8px
Badges · rounded-xs (2px)
Buttons & inputs · rounded-sm (4px)
Portal update available
Needs attention3
Widget shell · rounded-sm (4px)
Marketing Scale
Website and landing page components step up through four larger tokens. Inner cells (bento tiles, nested screenshots) stay at rounded-lg or below; outer wrappers and hero typography use rounded-xl and above.
radius-lgrounded-lg
Marketing cards, infographic shells, bento inner cells, accent panels.
radius-xlrounded-xl
Story grid tiles, wide blog cards, marketing visual frames, testimonial photo blocks.
radius-2xlrounded-2xl
Hero headline blocks, page header visuals, large expressive typography bands.
radius-expressiverounded-[28px]
Bento outer wrapper, feature-split seam, hero corner fillers. Marketing only.
rounded-lg · 12px
Standard marketing card, infographic shell.
rounded-xl · 16px
Story grid tiles, wide blog cards, visual frames.
Strata management, simplified.
Hero headline band · rounded-2xl (24px)
Inner cell · rounded-lg
Inner cell · rounded-lg
Bento outer wrapper · 28px (radius-expressive). Gap doubles as outer padding.
By Context
Application
Tags & badges
rounded-xs · 2pxBadge · MentionTag · LotBadge · SchemePlanBadge
Interactive & surfaces
rounded-sm · 4pxButton · Input · Textarea · Notification · Widget · Dialog · Popover · Stat
Nested UI chrome
rounded-md · 8pxDropdown menu items · Sidebar nav buttons · System Avatar · Select items
Website
Standard cards
rounded-lg · 12pxCard (base) · BlogCard · FeatureCard · Infographic shell
Wide & editorial
rounded-xl · 16pxStoryGrid tile · BlogCardWide · MarketingSection visual · Testimonial photo
Hero & headers
rounded-2xl · 24pxHero headline band · HeroVisual · PageHeader visual
Layout seams
28pxBentoGrid outer · FeatureSplit wrapper · Hero corner curves
Pairing with Padding
Larger radii need more internal padding so content does not feel cramped against curved corners. See Padding for the full token scale.