Celune DocsSpacing & Radius
All spacing follows an 8px base grid. Border radii and shadows are defined as CSS custom properties and consumed via Tailwind's --radius-* tokens.
Spacing scale
Use Tailwind's default spacing utilities (p-1 = 4px, p-2 = 8px, etc.) The design system does not override the spacing scale. Key landmarks:
| Tailwind class | Value | Usage |
|---|---|---|
p-1 / gap-1 | 4px | Tight icon-to-label gaps |
p-2 / gap-2 | 8px | Component internal padding (small) |
p-3 / gap-3 | 12px | Button padding, input padding |
p-4 / gap-4 | 16px | Card padding, default section gap |
p-6 / gap-6 | 24px | Card header/content, layout columns |
p-8 / gap-8 | 32px | Page section padding |
p-12 / gap-12 | 48px | Large section separation |
Border radius
| Token | Value | Usage |
|---|---|---|
--radius-sm / rounded-sm | 4px | Inline code, small badges, tags |
--radius-md / rounded-md | 6px | Buttons, inputs, select triggers |
--radius-lg / rounded-lg | 8px | Cards, dialogs, popovers |
--radius-xl / rounded-xl | 12px | Large panels, feature cards |
--radius-full / rounded-full | 9999px | Pills, avatars, toggle switches |
Shadows
Shadows are defined as CSS custom properties. In Tailwind, use the standard shadow-sm, shadow-md, shadow-lg utilities which Tailwind v4 derives from its built-in scale.
| Usage | Class |
|---|---|
| Cards, inputs | shadow-sm |
| Dropdowns, popovers | shadow-md |
| Dialogs, sheets | shadow-lg |
Transitions
All interactive components use transition-colors for color changes and follow a 150–200ms duration at cubic-bezier(0.4, 0, 0.2, 1). This is Tailwind's default transition easing. Avoid custom durations unless an animation has a specific semantic purpose.