Design System & Component Library

SOP: Design System & Component Library

Last Updated: 2026-05-01 Version: 1.0 Tier: Design ownership doc

---

Purpose

Tekton Growth’s clones are technically faster and SEO-stronger than what most clients had before. But “faster” and “SEO-stronger” don’t differentiate us — most agencies can do that with WordPress and a few plugins. What differentiates Tekton is design quality. A site that loads in 200ms but looks like every other Astro template is a missed opportunity.

This SOP frames how we approach design across the client roster, what patterns we use, and how the design system grows over time.

The web designer owns this. Nick guides direction; the designer drives the visual language and the component library.

When to Use:

• Designing a new section on any client clone
• Reskinning a client (/reskin skill)
• Restyling a client (/restyle skill)
• Adding a new template to astro-site-generator
• Whenever the temptation to “just use stacked boxes” appears

Owner: Web Designer Timeline: Ongoing — this SOP is a living doc, not a one-time read.

Working with Claude on this SOP

The fastest way through this SOP is to paste it into Claude Code (desktop app) and tell Claude what you need:

• “Build a hero section for Ferran Landscape using the layered-overlap pattern from this design system. Reference the Frontier template.”
• “Walk me through extracting the component I just built into a reusable skill.”

If you hit a snag — the layout breaks at mobile, the overlap is wrong, the AI keeps reverting to stacked boxes — describe the issue: “the photo and text are overlapping but the photo is supposed to bleed past the section edge, it’s getting cropped instead.”

Don’t micromanage Claude. Describe the visual goal in plain English (or share a reference screenshot). Claude handles the CSS. Trying to dictate every selector and value slows everything down and produces worse output.

---

The “stacked boxes” anti-pattern

Most AI-generated websites default to this layout:

[ HERO IMAGE ]
[ FULL-WIDTH HEADING ]
[ PARAGRAPH OF COPY ]
[ THREE-CARD GRID ]
[ FULL-WIDTH HEADING ]
[ TWO-COLUMN GRID ]
[ FOOTER ]

Every section is its own rectangle. Sections don’t talk to each other. There’s no visual rhythm — just one box stacked on the next. It works, but it’s forgettable.

This is the floor we never sink below. A Tekton clone should have visual depth, decoration, and intentional asymmetry.

---

The Tekton design language

These are the patterns we lean on. Mix them — don’t use all of them on every page.

1. Overlapping elements

A photo that bleeds past the section divider. A card that floats half above one section and half into the next. Headlines that overlap their accent block. Overlap creates depth and makes the eye move down the page.

flowchart TD
  A[Section A:<br/>full-width photo] --> B[Section B:<br/>card overlaps from above<br/>+ text content]
  B --> C[Section C:<br/>headline overlaps below]
  style B fill:#fbbf24,color:#000

2. Text on / inside imagery

Hero text overlaying photography (with a gradient overlay for legibility). Pull-quotes inside a section that has a photo background. Numbers stacked on full-bleed images for “stat callouts.”

3. Curves and organic shapes

Section dividers that aren’t 90-degree angles. SVG curves between two color zones. Rounded corners on cards (but not perfectly geometric — slightly varied). Decorative blobs in the background.

4. Hero variations

Not every hero is a 700px-tall photo with a headline. Mix:

• Slideshow hero (auto-cycling photos)
• Video background hero (muted MP4 loop)
• Split hero (photo on one side, text on the other, asymmetric ratio)
• Decorated hero (background pattern + foreground photo + floating accent)

5. Layered architecture (background + foreground)

Don’t think in terms of “boxes.” Think in two layers:

• Background layer: color zones, photo backgrounds, decorative shapes
• Foreground layer: photos, polaroids, numerals, callouts that straddle two background sections

The foreground elements should never feel “boxed-in” by their parent section.

6. Typography contrast

Bold display headings paired with neutral body fonts. Use weight, size, and tracking to create hierarchy — not just bigger fonts. A site where every heading is 48px Bold is monotone.

7. Brand-specific decoration

Each client gets a small set of decorative motifs that show up across the site. Could be:

• A signature color blob
• An icon family (line icons or solid, never both)
• A pattern (subtle dots, stripes, gradients)
• A photographic treatment (consistent crop, consistent filter)

Decoration is what makes the site feel “designed” rather than templated.

---

Reference templates

The astro-site-generator repo has 12 draft templates that demonstrate these patterns. Use them as starting points — never as final outputs.

Template	Pattern emphasis
Frontier	Layered overlaps, polaroid foreground
Vogue	Editorial typography, full-bleed photos
Voltage	High-contrast color blocks, numeric stat callouts
(others)	See ~/Projects/astro-site-generator/template/

When you’re starting a new client clone or reskin, pick the template that’s closest to the client’s existing aesthetic, then customize.

The full reference image library lives in Google Drive (“Website Styles” folder) — Nick can share access. Per-template docs/reference/ folders also have screenshots.

---

How the component library grows

The component library is built incrementally. Each time you build something new on a client and it works well, extract it into a reusable component. Over time the library compounds — every new client benefits from every previous one.

Workflow

flowchart LR
  A[Build new section<br/>on client X] --> B[Section works,<br/>client likes it]
  B --> C[Extract pattern:<br/>HTML + CSS + props]
  C --> D[Save to<br/>astro-site-generator<br/>or skill]
  D --> E[Document<br/>variant + usage]
  E --> F[Future clients<br/>can apply via /add-page<br/>or /refine-template]
  style A fill:#2563eb,color:#fff
  style F fill:#22c55e,color:#fff

Extraction checklist

When you have a section worth keeping:

1. Generalize the props — what’s data-driven (heading, copy, photo, color), what’s structural (overlap depth, decoration, animation)?
2. Lock the CSS — make sure breakpoints work at 1440, 768, 390. No hardcoded margins that break at mobile.
3. Save as either:
   • A new template variant in astro-site-generator/template-<name>/sections/
   • A new entry in a Claude skill (e.g. /add-page so future runs can apply it)
4. Document one example — a working code block in the component’s README showing how to use it
5. Tell Nick — he reviews and decides if it goes into the team toolkit

Naming convention

Component names describe the visual pattern, not the content type. Good:

• hero-split-asymmetric
• services-grid-overlapping-cards
• testimonial-pullquote-on-photo
• cta-floating-with-decoration

Bad:

• homepage-hero (too page-specific)
• landscaping-services (too client-specific)
• green-section (color names get stale)

---

When NOT to invent new design

Some pages don’t need creative design. Pages where the goal is conversion, not aesthetic:

• Contact page (priority: form works, info is scannable)
• Thank-you page (priority: confirms submission, sets next-step expectation)
• Privacy / Terms (priority: legible, no surprises)
• Sitemap / search results (priority: utility)

For these: use the simplest layout that works. Save creative energy for pages where it pays off — homepage, service pages, about page, gallery.

---

Brand fidelity vs. creative push

When you’re cloning a client off their old site, the bar is spitting image — match the original aesthetic. Don’t redesign during the clone phase.

When you’re reskinning or restyling AFTER the clone is live, the bar shifts — push the design. The client should feel an upgrade.

Map of when to push vs. preserve:

Phase	Aesthetic bar	Skill
/clone-gate	Spitting image of source	Don’t push
/site-cutover	Same as clone	Don’t push
/reskin <ref>	Match a reference site	Push within ref’s bounds
/restyle <moodboard>	Match a brand mood	Push within mood’s bounds
/add-page (post-cutover)	Match existing site	Don’t push
New build (/build-website)	Tekton standard (this SOP)	Push hard

Don’t push design on a client without a signed scope for it. Surprise redesigns are how clients get angry.

---

Definition of done

A new client clone passes this SOP when:

• At least 3 of the 7 design patterns above appear on the homepage
• No section is a plain stacked box without intentional reason
• Mobile layout reflows correctly at 390px (not just shrinks the desktop layout)
• Brand-specific decoration appears on at least 2 pages
• Hero is something other than “photo + headline + CTA” (one of the 4 hero variations)
• At least 1 component was extracted to the library if the build introduced a new pattern

---

Version Control

• v1.0 (2026-05-01): Initial SOP. Establishes design language and the “stacked boxes” anti-pattern as the floor.