Chapter 5b: The System Build — Styles, Variables, Components, and the Stylekit Pipeline

TYPOGRAPHY first, before any duplication: stylekit.com's scale generator (base 16; Minor Third tested and rejected as timid, MAJOR THIRD chosen; Perfect Fourth 'the more cool and young the company is, the bigger you can go') → Copy to JSON → the Website Style Kits Figma plugin imports it as connected text styles: H1-H6, Body Big/Normal/Small, 160% default line-height. Generated uglies hand-tidied (61→64, 49→50). The law that motivates the timing: connect layers to styles BEFORE duplicating so every copy inherits the link — 'once you start duplicating without the global style setup, you're going to lose a lot of time.' Batch Styler (third-party) handles bulk weight/family/line-height swaps across selected layers.

COLOR second, derived not invented: drag the client's SVG logo into Figma, eyedrop it (key I), read the HSL HUE — 19, orange — and feed exactly that Hue into stylekit.com's palette generator: primary/accent/accent-dark + light1-3 + dark1-2 from one slider, per-swatch lightness rescue if contrast fails, hover-to-see-usage, dark/light preview, a Buttons tab with corner radius. The rule that protects the brand: 'adjust lightness and saturation afterward, never the Hue itself.' Same JSON import path; then the connections: headings dark1, body dark2 ('a little bit lighter... less harsh to read'), background light2, buttons primary. The rejected alternatives are named: palettemaker.com (poor web contrast), realtimecolors.com (best third-party, but no soft tints, limited export).

Three systems, three jobs. STYLES: text and color definitions (the Stylekit imports) — connected per layer via the four-dots menu. VARIABLES: NUMBERS — the spacing tokens ('space' + xs/s/m/l/xl/xxl, divisible by 4, gaps widening upward: 8, 16, 24, 32, 96=16×6, 128=16×8) and later the corner tokens; the trap demonstrated by committing it: typing 32 does NOT link the variable — the puck icon and explicit selection do. COMPONENTS: anything repeated — the icon card, the bread card (360px, a 4-column slice; image Fill-container), the FAQ item — where the proof is run live: a radius change on the main component propagates to instances and NOT to plain duplicates. Variants live inside components for states; Assets is the library; right-click → Go to main component finds the source.

The organizational sidecar from lesson 26: SECTIONS (a primitive distinct from frames) corral scratch material; CONSTRAINTS — discovered when resizing the frame scrambles the layout — govern per-layer behavior on parent resize ('this is not auto layout'): center/top for background bleeds, bottom for footer elements. Collections for variables exist and are REJECTED for a flat well-named list: 'if you do the naming right... you don't have to scroll.'

One component set, five variants. SOLID (primary action), OUTLINE (secondary: stroke primary, no fill, dark1 text), UNDERLINE (tertiary link: bottom-only stroke, zero-then-4px padding, no radius) — swapped per instance from the Assets dropdown. Then the inversions: SOFT (light3 fill, primary-dark text) built for filter tags and eyebrow labels precisely because 'it doesn't really look that clickable... so people do not confuse it with an actual button'; SOFT SELECTED for the active filter state. Supporting decisions with reasons: a new Body Bold text style for labels (Semi Bold; padding re-tuned because bold at 180% line-height fattened the buttons); Hug-contents to kill phantom height; the in-card button demoted Solid→Underline because 'this button takes up a little bit too much attention.'

The system pays immediately: the bread grid (Auto Layout + WRAP at 1120 width, 20px gaps = 3-across), the specials section's improvised email signup (Solid submit + an Outline button repurposed as the fake input), pagination DETACHED from the set (one-off, non-reusable — detachment as a deliberate act, not a failure), numbered on Heading 6 with a new light4 surface.

The section builds are Chapter 4's principles executing under system constraints. The INGREDIENTS bento (hand-built, no template — 'quite a custom layout, but it didn't take a long time'): auto-layout-as-background (Figma auto-adopts an existing rect as fill — shown two ways to prove it), space-L padding everywhere, Fill-container text, decorative rotated shapes BLEEDING outside card boundaries against boxiness. The GALLERY: the off-canvas variant chosen over both boxed options, title-only ('we don't always have to introduce a section' — intro text deleted). The FAQ: single-column accordion beats two-column and all-open layouts because 'hiding stuff... gives the viewer more control and [does] not make it overwhelming'; item componentized, stress-tested with an artificially long question (icon gap 10→24), acronym spelled out for the bakery's older audience — 'Frequently asked questions.'

SPACING HIERARCHY rules every pass: heading-to-icon 40→24 because 'the heading is more related to this icon than to the edge of the box'; filter-row-to-title 64→32 (filters belong to the grid); eyebrow-to-heading settled at 24 after testing 32 and 16. Corner tokens close the arc: Corner S (buttons, inputs, FAQ items), M (images), L (large backgrounds) — applied retroactively through the components, master button included. And the finishing sensibility: 'make sure that your image leads... that feels a lot more balanced.'