Westy Design Systemv0.2.7
OverviewComponentsExamplesStorybook

Foundations

  • Typography
  • Colors
  • Spacing
  • Radius
  • Shadows
  • Icons

Components

  • Accordion
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • Context Menu
  • Data Table
  • Date Picker
  • Dialog
  • Direction
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kbd
  • Label
  • Menubar
  • Native Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Questionnaire
  • Radio Group
  • Resizable
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spinner
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toggle
  • Toggle Group
  • Tooltip

Chat

  • Attachment
  • Bubble
  • Marker
  • Message
  • Message Scroller

Foundations

Radius

One corner token for the whole theme. Every rounded-* utility is a multiple of --radius, so changing that single variable rescales every corner in the system at once.

Scale
rounded-lg is the base value — it resolves to --radius itself. Smaller steps scale down and larger steps scale up proportionally, so the scale keeps its shape at any base radius.
--radius: 0.625rem
rounded-sm--radius-sm0.6×6px
rounded-md--radius-md0.8×8px
rounded-lg--radius-lg1×10px
rounded-xl--radius-xl1.4×14px
rounded-2xl--radius-2xl1.8×18px
rounded-3xl--radius-3xl2.2×22px
rounded-4xl--radius-4xl2.6×26px
Where each step lands
Nested surfaces round less, containers round more. Menu items sit at rounded-sm, controls at rounded-md, cards and dialogs at rounded-xl; badges take rounded-4xl and circular parts use rounded-full, which is fixed and ignores the scale.
rounded-sm · 6px
Menu item
rounded-md · 8px
rounded-xl · 14px
Card
rounded-4xl · 26pxBadge
rounded-fullW
One variable, every corner
The derived tokens are computed from --radius at the point of use, so overriding it on any wrapper retunes the whole scale underneath. One exception is deliberate: small buttons cap their radius at 10px via min(), so they stop following the scale past that — visible in the Round panel.

Sharp · 0rem

Badge

Default · 0.625rem

Badge

Round · 1.25rem

Badge

Tokens used

13 design tokens consumed by this page.

  • --radius

    Base radius (0.625rem)

    rounded-lg

  • --radius-sm

    Radius 0.6× (6px)

    rounded-sm

  • --radius-md

    Radius 0.8× (8px)

    rounded-md

  • --radius-xl

    Radius 1.4× (14px)

    rounded-xl

  • --radius-2xl

    Radius 1.8× (18px)

    rounded-2xl

  • --radius-3xl

    Radius 2.2× (22px)

    rounded-3xl

  • --radius-4xl

    Radius 2.6× (26px)

    rounded-4xl

  • --card

    Card

    bg-card

  • --accent

    Accent

    bg-accent

  • --border

    Border

    border

  • --primary

    Primary

    border-primarybg-primary/10

  • --muted-foreground

    Muted Foreground

    text-muted-foreground

  • --foreground

    Foreground

    text-foreground