Design System
Spacing
Woodstock's existing Tailwind rhythm for controls, components, and page sections.
Spacing
Woodstock uses Tailwind's default spacing scale directly. The system is a rhythm, not a separate set of CSS variables: choose the named utility that matches the relationship, then reuse the existing component recipes.
Rhythm
| Utilities | Size | Current role |
|---|---|---|
0.5, 1 | 2px, 4px | Dense icon/action padding, compact rows, and the smallest internal gaps. |
1.5, 2 | 6px, 8px | Common inline gaps, chip padding, compact panels, and menu spacing. |
2.5, 3 | 10px, 12px | Control padding, standard row gaps, and input interiors. |
4 | 16px | Standard page and panel padding. |
5, 6 | 20px, 24px | Dialog padding and generous bounded surfaces. |
8 | 32px | Major section separation. |
The app most often uses gap-2, gap-1.5, and gap-3; its common panel padding is p-2,
p-3, or p-4. Treat those as the default rhythm before reaching for a larger or unusual value.
Live specimens
Chip · gap-1.5 px-3 py-1.5
Control · px-3 py-2.5
Panel · p-3 gap-2
Tomorrow9:00 AM · Weekly
Dialog · p-5 gap-4
Create channel
Rules
- Match the role first: internal control space is tighter than space between components, which is tighter than space between sections.
- Prefer
gapfor sibling layout. Use margins for an intentional relationship to surrounding document flow, such as a heading above its content. - Keep paired controls consistent: the app's standard form control is
px-3 py-2.5, while a primary action is commonlypx-4 py-2orpx-4 py-2.5. - Do not introduce arbitrary spacing values in product components unless a documented system role cannot express the requirement.