layout-paradigms-and-consistency

Name: layout-paradigms-and-consistency
Author: dembrandt

149installs5forks

How to install layout-paradigms-and-consistency?

dembrandt/dembrandt-skills/layout-paradigms-and-consistency

$npx -y skills add dembrandt/dembrandt-skills --skill layout-paradigms-and-consistency

Installs into the current project.

Summary

A layout is not a neutral container — choosing the right layout paradigm (feed, board, table, canvas, master-detail, dashboard, gallery, timeline, map, single-focus, narrative long-scroll) is a design decision that shapes how content is understood. Landing and marketing pages get

Files · 1

View on GitHub

SKILL.md

1	# Layout Paradigms and Consistency
2
3	A layout is not a neutral container you pour content into. The layout paradigm you choose is part of the argument about how the content should be read, compared, and acted on. Two products showing the same data can communicate completely different things depending on whether that data is a feed, a table, or a board.
4
5	This skill operates at the macro scale of consistency. It sits above [[component-family-consistency]] (the meso scale — buttons and inputs sharing one DNA) and above token-level consistency like [[button-states]], [[status-colors-and-errors]], and [[modular-scale-typography]] (the micro scale). Consistency is not one rule — it is the same discipline applied at three altitudes.
6
7	## Consistency operates at three scales
8
9	\| Scale \| What stays consistent \| Where it lives \|
10	\|---\|---\|---\|
11	\| Macro \| Layout paradigm and page skeleton across screens \| this skill \|
12	\| Meso \| Component family — shared radius, height, colour logic \| [[component-family-consistency]], [[brand-visual-language]] \|
13	\| Micro \| States, tokens, type scale, semantic colours \| [[button-states]], [[status-colors-and-errors]], [[modular-scale-typography]], [[algorithmic-color-palette]] \|
14
15	A product can have perfect tokens and a coherent component family and still feel broken — because every screen is laid out differently and the user re-orients on every navigation. Macro consistency is what makes a product feel like one application.
16
17	---
18
19	## Layout is downstream — it serves something upstream
20
21	A layout paradigm is never the starting point. It is a consequence of decisions made earlier, and a means to ends defined elsewhere. Choosing a layout in isolation — "let's use a dashboard because dashboards look impressive" — is the most common way layouts go wrong.
22
23	It flows down from information architecture. The data model and structure ([[information-architecture]]) largely determine the candidate paradigms. Entities that move through states want a board; records compared on shared fields want a table; a hierarchy of containers and items wants master–detail. If the IA says "tasks belong to projects and have a status," the layout has already half-decided itself. Get the

People who liked this also viewed

6 picks

Type

layout-paradigms-and-consistency

149installs5forks

View on GitHub

How to install layout-paradigms-and-consistency?

dembrandt/dembrandt-skills/layout-paradigms-and-consistency

$npx -y skills add dembrandt/dembrandt-skills --skill layout-paradigms-and-consistency

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Layout Paradigms and Consistency
2
3	A layout is not a neutral container you pour content into. The layout paradigm you choose is part of the argument about how the content should be read, compared, and acted on. Two products showing the same data can communicate completely different things depending on whether that data is a feed, a table, or a board.
4
5	This skill operates at the macro scale of consistency. It sits above [[component-family-consistency]] (the meso scale — buttons and inputs sharing one DNA) and above token-level consistency like [[button-states]], [[status-colors-and-errors]], and [[modular-scale-typography]] (the micro scale). Consistency is not one rule — it is the same discipline applied at three altitudes.
6
7	## Consistency operates at three scales
8
9	\| Scale \| What stays consistent \| Where it lives \|
10	\|---\|---\|---\|
11	\| Macro \| Layout paradigm and page skeleton across screens \| this skill \|
12	\| Meso \| Component family — shared radius, height, colour logic \| [[component-family-consistency]], [[brand-visual-language]] \|
13	\| Micro \| States, tokens, type scale, semantic colours \| [[button-states]], [[status-colors-and-errors]], [[modular-scale-typography]], [[algorithmic-color-palette]] \|
14
15	A product can have perfect tokens and a coherent component family and still feel broken — because every screen is laid out differently and the user re-orients on every navigation. Macro consistency is what makes a product feel like one application.
16
17	---
18
19	## Layout is downstream — it serves something upstream
20
21	A layout paradigm is never the starting point. It is a consequence of decisions made earlier, and a means to ends defined elsewhere. Choosing a layout in isolation — "let's use a dashboard because dashboards look impressive" — is the most common way layouts go wrong.
22
23	It flows down from information architecture. The data model and structure ([[information-architecture]]) largely determine the candidate paradigms. Entities that move through states want a board; records compared on shared fields want a table; a hierarchy of containers and items wants master–detail. If the IA says "tasks belong to projects and have a status," the layout has already half-decided itself. Get the

People who liked this also viewed

6 picks

Type