Buttons: the six call-to-action variants
Primary, secondary, tertiary, outline, plain and plain on dark, rendered with the live stylesheet.
How to use this
Each tile is a real section of sdata.us, captured from the Astro build. The site is built from named classes, so a pattern here maps to a class there. Buttons carry two keys: a variant attribute for hover and a variant class for the resting look. The CSS is authoritative, and the documented selectors live in the Astro repository next to the code.
Hero patterns
Hero: Mauve with node network
Home hero. Display headline with a Light Mauve accent phrase, body copy, primary call to action and the data-flow network.
Hero: Mauve gradient
Product-page hero on the 145 degree Mauve gradient, with the engine diagram.
Section patterns
Section: client and partner logos
Logo wall on white, grouped into industry partners and associations.
Section: closing call to action
Mauve band, two-tone headline and a primary call to action.