The Surface Lab isolates single treatments. This one pairs the decisions: which cards sit on which grounds, which colours hold together, how graphical elements read against text of the same colour, and how a full content cluster composes on each surface. Split across focused pages — pick a thread below.
Every card style — bordered, glass, frost, edge-lit, gradient-border, dark, accent — placed on every ground. The big matrix.
Open → 60+ pairsForeground × background with contrast notes, the aqua + ink + warm ramps, gradients, and three-colour combinations.
Open → all statesButtons, pills, badges, inputs, links, tabs, alerts and eyebrows in the accent system, on light and dark.
Open → by colour × surfaceSparklines, line/bar charts, reticles, data dots, spectra, gauges — by colour and by surface, plus same-colour cohesion clusters.
Open → pairingsSans / serif / mono pairings, the scale, numerals, and text colour over each surface.
Open → 6 groundsA full content cluster — eyebrow, heading, lead, stats, graphic, button — composed on each ground. The real compatibility test.
Open → 20+ · some animateWildcards — caustics, bathymetric contours, sonar, radar sweep, scanlines, laser beam, duotone, blueprint, dividers. Domain-driven and animated. Non-obvious on purpose.
Open → interactivePick a surface, accent, typography, card, texture, graphic and divider — and see a live mini-page assembled from your selection. The combinator.
Open →