Define layout principles, patterns, and responsive behavior that create structured, flexible, and consistent UIs in Tendoo.

Layout

Layout defines the structure of pages and components — how elements are arranged, aligned, and spaced. Tendoo’s layout system is built to ensure flexibility across screen sizes while maintaining visual consistency and rhythm.

It includes guidance on containers, alignment, columns, and spacing strategies for both fixed and fluid interfaces.

Layout Principles

Consistency — Use standard grid and spacing tokens for predictable results.
Flexibility — Support fluid layouts that adapt across breakpoints.
Clarity — Use spacing and grouping to improve readability and hierarchy.
Responsiveness — Design for mobile, tablet, and desktop from the start.

Layout Tokens

Token	Purpose	Example Usage
`layout.container.max`	Max width of layout containers	Page wrappers, content bounds
`layout.gutter`	Space between columns or edges	Grid gutters, card padding
`layout.section.padding`	Vertical padding for sections	Between full-page blocks

// layout.tokens.ts
export const layout = {
  container: {
    max: "1280px",
  },
  gutter: "24px",
  section: {
    padding: "64px",
  },
};

Containers

Containers keep content aligned and prevent it from stretching too wide on large screens.

<div className="max-w-[layout.container.max] mx-auto px-[layout.gutter]">
  Content goes here
</div>

Alignment & Spacing

Use spacing tokens (space.sm, space.md, etc.) to control padding and margin within layouts. Align content using flex/grid utilities where applicable.

Use text-left, text-center, or items-start, items-center, etc. to align content.
Avoid manual pixel values. Use spacing and layout tokens consistently.

Responsive Behavior

Tendoo supports fluid responsive design using breakpoint-based classes and tokens. Layout elements should adapt based on screen size while maintaining spacing and structure.

Example Breakpoint Usage

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-lg">
  <Card />
  <Card />
  <Card />
</div>

Grid System

For more on grid structure and column patterns, see Grid.

A strong layout system ensures content is structured, readable, and responsive — helping teams design with clarity and scale with confidence.

Layout

On this page