Patterns: Layouts

Sites

UI StackThe eight sites, read bottom up TypefacesFont pairings ColorsColour names and palettes PatternsBackgrounds and textures OrnamentsBorders, badges, seals and stamps carduiCards and tiles LayoutsPage layouts: shells, patterns and reflow MotionMoves with their numbers and owners WorldsBrand worlds that join the layers

Every layout is one HTML skeleton and one CSS block with container queries, scoped by its own class prefix, drawn here as a wireframe. Filled stages use cards from cardui through its own renderer and dress in a world from Worlds. The seven zones and the reflow table come from the article Header, Toolbar, Content.