10 / Implementation Notes

Implementation Notes

How to use this guide in the wild — file structure, naming, tokens, and what to do when you find a gap.

Folder structure

Where the brand lives on disk.

Lumber Exchange Workspace/
├── resources/
│   ├── brand/
│   │   ├── brand-strategy.md       # positioning, audience, differentiation
│   │   ├── verbal-identity.md      # voice, tone, vocabulary
│   │   ├── visual-identity.md      # logo, color, type, photo, graphic system
│   │   └── visual-tokens.json      # machine-readable design tokens
│   └── documents/                   # source PDFs (brand narrative, etc.)
├── execution/
│   └── style-guide-site/            # this site (Astro + Tailwind)
└── .context/
    ├── decisions.json               # every brand decision, with rationale
    └── constraints.json             # brand guardrails (enforced)

Asset naming

Predictable, sortable, future-proof.

  • Pattern: lx-[type]-[role]-[variant].[ext]
  • Examples: lx-logo-mark-bark-on-paper.svg, lx-icon-axe-amber.png, lx-photo-coffee-bar-morning.jpg
  • Use lowercase, hyphens, no spaces. Never trust a filesystem to handle them.
  • Date-stamped variants: add an ISO date suffix only when iteration matters — e.g. lx-membership-flyer-2026-06.pdf.

Design tokens

Use the variables, not the values.

Every color and type setting on this site is exposed as a CSS variable. Reach for the variable in your code — the value is just the current resolution.

Colors

Typography

The full token table is on the Color and Typography pages. A canonical JSON export is at /tokens.json for use in design tools, Figma plugins, and future apps.

Component naming

PascalCase, role-first.

Components are named for what they are, not where they live: HeroMarquee, MembershipCard, OffsiteInquiryForm, ColorSwatch. Variants are props, never separate components.

For future agents

How to use this guide if you’re an LLM.

If you’re an AI agent producing copy, design, or code for The Lumber Exchange, this guide is your authoritative reference. The rules below are non-negotiable:

  1. Read the Voice & Messaging page before writing any copy. The vocabulary do/don’t list is enforced.
  2. Use the design tokens, never raw hex codes or font-family strings.
  3. If a question isn’t answered here, flag it in the brand team’s working punch list (resources/brand/open-questions.md) rather than inventing a rule.
  4. Every brand decision you make should be logged into .context/decisions.json with a rationale.
  5. Cross-check the brand guardrails on the Brand Overview page before shipping. If your output could plausibly belong to WeWork or to a Northwoods lodge, rewrite.

Open questions & missing assets

What’s still TBD.

A working punch list of items the brand team is still resolving — pricing, founder bios, photography to shoot, Pantone matches — lives in the workspace at resources/brand/open-questions.md. Updated freely; not surfaced on the public site so this guide stays focused on shipped guidance.