layout · Normal DOM only

Box

Polymorphic surface — padding, background, border, radius pinned to tokens.

Box replaces 90% of "<div style={{padding, background, borderRadius}}>" lines. The four props (padding / background / border / radius) all draw from --t-* tokens, so every Box you place inherits the active theme without any extra wiring. Polymorphic via the `as` prop — render it as `section`, `article`, `aside`, etc.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Box } from '@8maverik8/twenty-design';

Examples

Backgrounds

primary
secondary
tertiary
quaternary
tsx
<Box padding="3" background="primary" border="light" radius="md">primary</Box>
<Box padding="3" background="secondary" border="light" radius="md">secondary</Box>
<Box padding="3" background="tertiary" border="light" radius="md">tertiary</Box>

Borders & radii

xs
sm
md
xl
tsx
<Box border="light" radius="xs" />
<Box border="medium" radius="md" />
<Box border="strong" radius="xl" />

Variants

background
primary--t-background-primary — the page surface.
secondary--t-background-secondary — a card on the page.
tertiary--t-background-tertiary — a row inside a card.
quaternary--t-background-quaternary — pressed or selected row.
transparentNo fill — useful when only border + radius are needed.
border
nonedefaultNo border.
light1px var(--t-border-color-light) — between sibling cards.
medium1px var(--t-border-color-medium) — popovers, dropdown items.
strong1px var(--t-border-color-strong) — emphasised surfaces.

Guidelines

✓
Use Box whenever you need a themed background or border on an arbitrary container.A bare div with hex colours forks the moment a colour token changes.
✓
Reach for the `as` prop to keep semantic HTML.`<Box as="section">` is still a section to screen readers and SEO.
✕
Recreate Card surfaces with Box manually.Card already encodes the canonical card shadow + radius — use it.