A style is how an interface is rendered: borders, radii, elevation, texture, type treatment, state and motion. Every style here paints the same live specimen, so the only thing that changes between two cards is the rendering. Colour and typography still come from your design kit — this is the layer on top of it, and the layer your agent can build to.
6 styles
Cohorts from June onward hold above the target line for a third consecutive month.
Translucent panels that blur whatever sits behind them, so depth comes from the layer stack rather than from heavy borders.
Cohorts from June onward hold above the target line for a third consecutive month.
Thick black borders, offset hard shadows and flat blocks of colour, with nothing softened and nothing pretending to be a physical material.
Cohorts from June onward hold above the target line for a third consecutive month.
A systematic elevation model where raised surfaces get lighter and more tinted rather than merely shadowed, with state as a measurable overlay.
Cohorts from June onward hold above the target line for a third consecutive month.
Controls that imitate physical objects: bevelled edges, material texture, directional light and depth that says what a thing does.
Cohorts from June onward hold above the target line for a third consecutive month.
Controls extruded from a single background colour using paired light and dark shadows, so everything appears moulded from the same surface.
Cohorts from June onward hold above the target line for a third consecutive month.
Puffy, rounded, matte shapes with an inner highlight and a coloured drop shadow, as if the interface were moulded from soft clay.