Theme foundations

Change the voice, not the component.

Brick themes assign meaningful visual roles. The same Button, Card, Input, and Dialog keep their anatomy, behavior, and tested recipes under every brand.

One public contract

Two complete expressions.

A theme is not a coat of paint. It is one coordinated decision system applied to the same accessible component anatomy.

Expression 01Brick default

Invite collaborators

Give your team access to this project.

Email address
designer@example.com
Same Brick component tree
Expression 02Architectural warmth

Invite collaborators

Give your team access to this project.

Email address
designer@example.com
Same Brick component tree
CSS-first

A small vocabulary with complete reach.

Override stable semantic roles in ordinary CSS. No required provider, render-time palette engine, or application storage policy.

Static and server-safe Scoped through inheritance Light and dark together
Semantic map04 connected systems
01ColorIntent and hierarchy
accentsurfacetextborderstatus
02ShapeA consistent silhouette
controlsurfaceoverlayfull
03TypographyVoice at every scale
displaytitlebodylabelcode
04MotionTiming with purpose
fastmoderateenterexit
Generated contract · revision 2

Theme tooling can read the same contract Brick ships.

Import @flowstack-ui/brick/theme-contract.json to discover semantic roles, supported scopes, cascade placement, and 76 maintained contrast pairs without copying Brick’s token source.

Typed local appearance

The server-safe Appearance utility decorates one existing host with a light, dark, or inherited boundary—without a provider or wrapper.

Evidence-ready contrast

Each published pair declares its text or non-text role and required ratio so Theme can validate assignments without rounding.

Start with Brick’s defaults.

Then make them unmistakably yours.
npm install @flowstack-ui/brick