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

Spacing

One unit, every distance. Padding, margin, gap and size utilities all multiply the same 4px base token — nothing is ever an arbitrary number of pixels.

Scale
Every utility multiplies --spacing (0.25rem). Steps below 4 handle fine adjustments inside components; 4 and up set the rhythm between elements and sections.
--spacing: 0.25rem
0.52px0.125rem
14px0.25rem
1.56px0.375rem
28px0.5rem
312px0.75rem
416px1rem
520px1.25rem
624px1.5rem
832px2rem
1040px2.5rem
1248px3rem
1664px4rem
2080px5rem
2496px6rem
Padding
Interior breathing room. Dense controls sit at p-2, form fields and list items at p-4, cards and panels at p-6 — the same step the Card component uses by default.

p-2 · 8px

8px

p-4 · 16px

16px

p-6 · 24px

24px

p-8 · 32px

32px
Gap
Space between siblings belongs to the layout, not the children — prefer gap on the flex or grid parent over margins on the items.
gap-14px
gap-28px
gap-416px
gap-624px
Card spacing
Card carries its own spacing variable: --card-spacing drives the gap between sections and the padding of header, content and footer. Override it once on the card instead of re-padding each part.
Default card
--card-spacing resolves to --spacing(6).
24px
Content sits 24px from every edge.
Small card
size="sm" tightens it to --spacing(4).
16px
Content sits 16px from every edge.

Tokens used

8 design tokens consumed by this page.

  • --spacing

    Base spacing unit (0.25rem)

    p-6gap-4size-8

  • --card-spacing

    Card internal spacing

    gap-(--card-spacing)px-(--card-spacing)

  • --card

    Card

    bg-card

  • --border

    Border

    borderborder-dashed

  • --muted

    Muted

    bg-muted/50

  • --primary

    Primary

    bg-primarybg-primary/10

  • --muted-foreground

    Muted Foreground

    text-muted-foreground

  • --foreground

    Foreground

    text-foreground