Schema is a collection of design material, variables, concepts, and methods for designing in Figma within the Automatic.CSS (ACSS) framework. ACSS is a CSS framework for WordPress page builders like EtchWP and Bricks.

Schema is built to:

• Give designers a well-maintained design framework they can use as a starting point for every new project.
• Leave sufficient room for creative exploration while seamlessly quantizing the styles into the ACSS framework.
• Become your own curated and semantically contextualized library of layout material, ready to integrate with agents and apps.
• Enable community feedback to define new best practices in an emerging landscape where design communicates human intent, regardless of page builder.

What Schema provides

A variable architecture mapped to ACSS

Schema uses Figma's native variables and modes to mirror the ACSS variable structure. Colors, typography, spacing, layout dimensions, borders, buttons, cards, icons, and forms are all tokenized and organized into collections. See Variable Architecture for the full breakdown.

A component system

Reusable, swappable components — cards, buttons, navigation, form elements, toggles, and more — organized on a dedicated Components page. Components use consistent variant patterns and structure so swapping between them is predictable. See Working with components.

A section library

Pre-built section patterns across multiple categories - heroes, CTAs, feature grids, testimonials, FAQs, post grids, and more. Sections are designed to be composed on the Canvas, then detached and customized. See Working with sections.

Light/dark mode and responsive modes

The Palette collection supports Light and Dark modes with inverted values. Typography, Spacing, and Layout collections support Desktop and Mobile modes. Switching modes on a frame instantly adapts the entire design to a different context. See Responsiveness and Color palette and assignments.

AI-ready structure

Variables include web-syntax fields with actual ACSS variable names. Layer naming follows semantic conventions. This makes the file readable by AI tools and MCP servers, enabling design-to-code workflows. See AI optimization and MCP Server.

Who it's for

Schema is built for designers working within the ACSS ecosystem - whether you're using EtchWP, Bricks, or another WordPress page builder that supports ACSS. Familiarity with Figma variables, auto-layout, and basic ACSS concepts is assumed.

Where to start