Every section in Schema follows a consistent structural pattern that mirrors semantic HTML and maps directly to ACSS variables. Understanding this structure helps you work predictably across sections - and gives AI tools a clear model to parse.
https://www.figma.com/design/NJkfgz1fYHXZDdJt8OiqFw/Schema?node-id=8684-8034&t=5nkqA3gwdIcAWV1r-1
Sections are built from the outside in, using three nested layers:
The outermost wrapper. It controls the vertical rhythm between sections and the horizontal edge padding (gutter) that separates content from the viewport edge.
The first things to define are your content width values (desktop and mobile) and the section gutter. The content width variable is applied as max-width to every inner container. For sections, you also need to set the section-padding variable for top and bottom padding.
Key variables:
--layout-content-width) - the maximum width of the content area, set per breakpoint--gutter) - horizontal padding on each side of the section--section-padding-block) - vertical padding above and below--layout-viewport-width) - the width that represents the browser windowThe viewport width is content width plus two times the section gutter. If you prefer a wider viewport, update the variable. For Fancy Figma plugin users, the viewport width is automatically calculated by a formula.
It's important that every section - or the entire page frame - has the viewport variable applied as its width. This matters when switching to mobile preview, where the variable updates to its mobile equivalent.
Background colors are applied at the section level.
Sits inside the section and constrains content to the content width, centered horizontally. Not every section uses a container - some layouts intentionally span full width - but most do.
The innermost layer arranges content using grid or flex patterns. Schema uses ACSS's variable grid system, where a --min value controls the minimum column width. Columns wrap automatically when the available space can no longer fit the minimum.