Premium · à la carte

Layouts

Named layout patterns for consistent structure.

A catalogue of layout patterns — single, two-column, sidebar-main and more — with cell specs, reusable across every wireframe.

Gå med i väntelistan →Läs dokumentationen →
Layouts
ENSV
AJ
AI & Development

LayoutRebel

A library of layout patterns for interfaces that refuse to look like a machine-generated dashboard. Token-aware and copyable — copy the CSS and break the grid.

Rebelliousness scale
Search layout…
All 39Grid 11Depth 5Typography 6Brutalism 5Editorial 6Asymmetry 6
Grid CSS
Bento grid

Cells of varying sizes in a dense grid — modern and information-rich.

Use in project
Bold.
Typography CSS
Oversized heading

A dramatically large heading that dominates the space.

Use in project
Depth Copied!
Glass panel

Frosted glass (backdrop-blur) on top of a colored background.

Use in project
NO RADIUS
Brutalism CSS
Offset block

A block with an offset shadow duplicate — brutalist depth without softness.

Use in project
Asymmetry CSS
Broken grid

Elements break out of the grid and overlap with rotation.

Use in project
Grid CSS
Masonry

Brick-like flow with varying heights via CSS columns.

Use in project
Rebel prompt: Ask the AI to “rebel against this layout” with your current design — it picks the most fitting pattern, explains why and generates the whole implementation including responsive breakpoints.

Den riktiga Layouts-modulen — samma tema, samma layout som appen. Exempeldata.

Problemet och hur sSystm löser det

Problemet

Every screen reinvents its grid. Twenty pages, twelve subtly different two-column layouts, and a design system that ends at the component level.

Så gör sSystm det

Layouts extends the system upward: named layout patterns with explicit cell counts, linkable to wireframe sections. Structure becomes a vocabulary — the same two-column is the same two-column, everywhere.

Vad Layouts ger dig

Byggd på djupet, så modulen faktiskt bär tyngden av riktigt klientarbete.

01

Named patterns

Single, two-column, sidebar-main and more — a shared vocabulary for page structure.

02

Cell-count specs

Each pattern declares its cells, so wireframes built on it are structurally valid by construction.

03

Consistency across screens

Reusing patterns keeps twenty screens feeling like one product, not twenty decisions.

Din AI, via MCP

Layout patterns give your AI the structural vocabulary of your product — it composes screens from your named patterns instead of inventing new grids.

Så fungerar människo-grinden

Wireframes

Structure screens before you build them.

Läs mer

Interactions

A catalogue of behaviour, attached to structure.

Läs mer

Design System

Your brand as structured design tokens.

Läs mer
Layouts · Premium — à la carte

Sätt Layouts
i arbete.

Gå med i väntelistan — när din plats öppnas provisioneras ditt workspace på ditt eget Cloudflare-konto och du slår på modulerna du behöver. Named layout patterns for consistent structure.

När du är inne: ingen e-post, inget lösenord — en Cloudflare-tilldelning · kärn-workspace gratis · din data bor i ditt eget konto