Skip to content
Triargos Design

Spacing

Five steps, named by relationship. Peer blocks and a heading and its content share one gap; sections sit three times as far apart (48), and the page header between the two (32). Padding inside rows and controls follows their height (Shape), not this scale.

Scale

Each gap is drawn at its real size. Tune the steps in Customize; every page follows.

tight4px · gap-tight, p-tight
A title and its description: one unit
Page header and section titles (title → description), ItemContent, FieldContent, DialogHeader, Empty
related8px · gap-related, p-related
Items that work together
Field (label → control), page header actions, ItemActions
group16px · gap-group, p-group
Peer blocks; a heading → its content; padding inside a surface
Page header (back link → title), sections, FieldGroup, FieldSet, FieldLegend, CardContent, CardHeader (inline), DialogBody, SheetBody
page32px · gap-page, p-page
Page title → content
Page pattern
section48px · gap-section, p-section
Section ↔ section
Page pattern (between sections)

Page

Components place every gap inside them; the page layout (the Page pattern) places the gaps between them.

Projects

Website redesign

Review the details before you share the project with the team.

Due March 31

After that, the project moves to review.

Team

Only admins see these details.

Members

They get every project update.

Anna Schmidt

anna@example.com

Active
Jonas Weber

jonas@example.com

Active

Owner

Mia Chen

Project lead

Active

Documents

Files

project-brief.pdf

Uploaded March 12

Active

Components

Inside the main components.

Form cardCardHeader · FieldGroup · Field · FieldContent

Contact

How your team reaches you.

For confirmations and questions.

Empty statemedia → title 16 · title → description 4 · → actions 24
No projects yet

Projects you create show up here.