Containers
Spacing, widths, radius and elevation for the surfaces content sits in, and how they respond to screen size.
Spacing
Spacing follows Tailwind's 4px scale.
Whitespace is a feature. When a view feels crowded, add space before adding a border, and keep one clear focal point per view.
Widths
| Content | Max width |
|---|---|
| Reading column | max-w-3xl |
| Full layout | max-w-7xl |
Keep grids simple: grid gap-6 sm:grid-cols-2 md:grid-cols-3. Avoid nesting cards inside cards.
Full-width sections
A hero, and any section with its own background (Remedy, a band, an image), runs edge to edge at every screen width. Only its content stops at the widths above, centred. A background that stops short of the screen's edges reads as a card floating on the page.
- Check it on a screen wider than the layout, such as 1920px: a hero can look full-width at 1440px and stop short above it.
- Inside a docs framework or app shell that caps the page's width, paint the background past the cap rather than leaving it boxed.
Radius
Every radius step derives from a single --radius base (0.5rem, 8px): sm is 0.6 times the base, md 0.8, lg the base itself, xl 1.4, up through 4xl at 2.6, the same multipliers shadcn ships.
App and marketing components share the same corners: rounded-lg (8px) for controls and containers, rounded-md for items inside them, such as menu items, and rounded-sm for small parts. Only circles and thin bars stay fully round: avatars, radio buttons, switches, sliders, progress bars and scrollbars.
sm
md
lg
xl
2xl
3xl
4xl
full
A surface that needs other corners overrides --radius locally; see Marketing getting started.
Elevation
@clinia/tailwindcss ships one neutral elevation (shadows) set. How far a surface leans on it depends on the shadcn style it installed, not on a Clinia CSS layer.
shadow-sm
shadow-md
shadow-lg
In dark mode, surfaces lift by lightening: background (), then card (). Shadow opacity rises so the lift still reads.
Responsiveness
Responsiveness is a requirement, not a design choice: every surface works on every screen size, from phone to desktop.
- Breakpoints are Tailwind's defaults:
sm 640·md 768·lg 1024·xl 1280·2xl 1536. - Headlines grow with the screen. A hero headline starts smaller on phones and steps up on tablets and desktops. Body text stays the same size everywhere.
- Design for phones first. Start with one column, then add columns and sidebars as the screen gets wider.
- Keep everything easy to tap. Anything a finger can tap needs at least 24px. On touch-first screens, use the large button size.