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.
Semantic coreMeaningbefore color
AccentemphasisSurfaceelevationTypehierarchyMotionfeedbackOne 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
Expression 02Architectural warmth
Invite collaborators
Give your team access to this project.
Email address
designer@example.com
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
Start with Brick’s defaults.
Then make them unmistakably yours.npm install @flowstack-ui/brick