Version 0.1.0

Brand architecture

Dura-Foam runs three digital properties that, before this system, looked like three different companies: three near-identical golds, three unrelated type stacks, and no shared vocabulary. This is the single source of truth that resolves that — and the page you are reading is generated from it, so it cannot describe a system the code does not actually ship.

Where the values came from

Nothing here was eyeballed from a screenshot. Colours and fonts were pulled from the live site's compiled Elementor and theme CSS, and from the two consumer repositories.

Parent brand and sub-brand

Solar Center is a themed layer, not a separate brand. It shares every primitive, every spacing and type step, every role name, and — critically — the brand gold. It differs only where it genuinely means to.

The three tiers

The build enforces the boundary: a component colour token that references a primitive is a hard error, because colour is what has to stay brand-switchable. Structural primitives — spacing, radius, elevation — are deliberately shared across both brands and are referenced directly.

Identity

Logo

Logo artwork is versioned in brand/logos/. Treat these files as the only source — a mark pulled off a website, traced, or re-typed is not the mark.

Dura-Foam marks

Dura-Foam — primary
The full-colour mark. Raster (1890×725, transparent) — no vector original has surfaced yet.

Dura-Foam — reversed
All-white, for dark fields and photography. Raster, same dimensions.

Solar Center marks

Solar Center — primary
The vendor-supplied CorelDRAW original — true vector.

Solar Center — with tagline
For first-impression placements where the sub-brand needs explaining.

Solar Center — header lockup
Horizontal, for navigation bars.

Solar Center — reversed
For dark fields. Never recolour the full-colour mark by hand; use this file.

Rules

Foundations

Color

Every swatch on this page is rendered by iterating the resolved token tree that generated tokens.css, the Tailwind theme and the Tailwind preset. There is no hand-typed hex anywhere in this document — add a token and a swatch appears here on the next build. Click any swatch to copy its custom property.

Primitive ramps

Raw palette. Referenced only by the semantic tier — never by application code, and never by a component.

Brand gold

The one colour both brands share. #F7A22A is canonical because it is simultaneously the live site's Elementor global primary and the value already committed in the Marketing Dashboard — making it canonical costs zero migration.

Ink

The parent brand's darks, cool and slightly violet. Pulled from the ruffer theme.

Neutrals

Greys for surfaces, borders and muted text.

Red

The phone-link red from the theme, plus an accessible darker step.

Green

Shared with the corporate logo mark. Certification badges, "pros" columns.

Mauve

The Marketing Dashboard's second categorical colour. No brand provenance — see the note below.

Navy — Solar Center

The sub-brand's darks, including the logo navy #00345C.

Sky — Solar Center

Orange — Solar Center

Sand — Solar Center

Slate — Solar Center

Feedback surfaces

Low-chroma fills behind status messages.

Brandmark — artwork only

FROZEN. These are the colours inside the logo file. They are not UI tokens.

The four golds

Dura-Foam has four near-identical golds in circulation — two in interfaces, two inside logo artwork. Resolving them is the single highest-value consolidation in this system, so the reasoning is recorded here rather than left in a commit message.

Semantic roles

This is the layer application code targets. Both brands are shown side by side: where the sub-brand cell is blank, it inherits — and that inheritance is the point. Sixteen authored overrides produce the entire Solar Center theme.

Contrast matrix

Every foreground/background pair this system promises, with its computed WCAG 2.1 ratio. The build fails if any pair misses its target without a written, attributed acceptance — so this table cannot quietly drift, and failures are shown rather than omitted.

Dura-Foam — 29/32 meet target

Solar Center — 29/32 meet target

Foundations

Typography

Four roles, three families. The specimens below are live text styled by the same .df-type-* classes the tokens emit — switch brands in the sidebar and every one of them re-types.

The families

Specimens

The scale

18px base — the live site's body size. The top five steps are fluid clamp() values rather than two static breakpoint sets: the observed desktop sizes (56 / 52 / 38) and the smaller set (52 / 48 / 32) are the same ladder sampled twice, so they are encoded as one continuous ramp.

Line heights stay tight on display roles — Bebas Neue looks unglued much above 1.1 — and open up to 1.65 for body copy.

Foundations

Space & layout

A 4px base scale, shared by both brands. Spacing is structural — it is one of the things that keeps the parent site and the sub-brand feeling related even though they use different typefaces.

Spacing scale

Containers & rhythm

Foundations

Radius & elevation

8px is the site default for cards, inputs and panels; buttons and chips are fully rounded. Elevation is used sparingly — this is a brand built on flat, confident blocks rather than floating cards.

Radius

Elevation

Borders & motion

Building blocks

Components

Version 1 ships specifications with live, working examples — not a packaged component library. One consumer is React 19 and the other is Astro, so "which framework" has no good answer yet. Every example below is real markup styled by the tokens; copy the HTML and CSS and implement it natively in your stack.

1 · Button

The most-diverged element in the ecosystem, and where the accessibility decision is most visible. Primary is a gold pill with dark text.

<button class="df-btn df-btn--primary">Get free estimate →</button>
<button class="df-btn df-btn--ghost">Learn more</button>

Secondary is translucent and only exists over imagery — it has no meaning on a white page.

<button class="df-btn df-btn--secondary">Schedule my inspection →</button>

2 · Section heading

Encodes the display-versus-headline rule. Eyebrow in UI type, title in display, gold rule underneath.

<div class="df-sectionheading">
  <p class="df-sectionheading__eyebrow">Serving the Bay Area</p>
  <h2 class="df-sectionheading__title">Why Seamless Beats Seams</h2>
  <hr class="df-sectionheading__rule">
</div>

3 · Header assembly

Near-black utility bar above a white nav with a gold pill — the brand's most recognisable signature.

4 · Card

White, thin border, 8px radius, top media, title, excerpt, meta. Generalises to service, location and stat cards.

<article class="df-card">
  <img class="df-card__media" src="…" alt="">
  <div class="df-card__body">
    <h3 class="df-card__title">…</h3>
    <p class="df-card__excerpt">…</p>
    <p class="df-card__meta">12 July 2026</p>
  </div>
</article>

5 · Badge & chip

<span class="df-badge df-badge--cert">Green Building Council Member</span>

6 · Form controls

The quote form is the primary conversion surface, so error states are specified rather than left to the framework.

<div class="df-field">
  <label class="df-label" for="email">Email</label>
  <input class="df-input" id="email" aria-invalid="true" aria-describedby="email-err">
  <span class="df-error" id="email-err">Enter a complete email address.</span>
</div>

Deferred

Hero, QuoteForm, Footer, Breadcrumb and icon lists are specified as assemblies in docs/04-components.md. Dashboard-only table, sidebar and data-card patterns land in v1.1 once the tokens are running there. Modal, tabs, tooltip, dropdown, accordion and toast are deliberately excluded — all of them exist in shadcn on the dashboard side and none appear on the public site, so documenting them now would be documenting shadcn rather than Dura-Foam.

Assembly

Patterns

How the components assemble into the page shapes the brand actually uses.

Hero

Full-bleed photography, a scrim, a rating chip, the headline role in sentence case, a gold uppercase subhead, then a primary and a secondary action.

Section rhythm

A page is a stack of sections at section.padding-y, alternating surface.page and surface.subtle, each opening with a section heading. Dark sections use surface.inverse and are used sparingly — roughly one per page — so they still register as emphasis.

The infographic system

Print and social collateral extends the web palette rather than departing from it: a deep surface.inverse-deep field, full-width gold bars for section breaks, white cards for content, and green/red for comparative content.

Content & voice

Enforced

Accessibility

Accessibility here is a build gate, not a guideline. Every promised colour pair is computed on each build and the build fails on a shortfall that has not been written down and attributed.

The gold rule

This is the rule to remember if you remember nothing else.

The same split applies to green and red

Accepted shortfalls

3 pairs across both brands fall short and are deliberately accepted. They are listed here and rendered as failures in the matrix rather than quietly excluded.

Beyond colour

Integration

Consuming the tokens

Three consumers, three integration stories. Two are automated; WordPress is permanently manual, and it is better to say so than to pretend otherwise.

Marketing Dashboard — Tailwind v4

/* src/app/globals.css */
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "../styles/durafoam-theme.css";   /* generated — LAST */

/* DELETE the hand-written @theme inline brand block and the :root block.
   They are superseded; keeping both means whichever loads last wins. */

The generated theme supplies the full shadcn contract — --background, --primary, --sidebar-*, --chart-*, --radius — mapped onto brand tokens, so existing shadcn components keep working unchanged. Utilities become bg-accent, text-fg-primary, border-line-subtle, font-display.

Solar Center — Tailwind v3

// tailwind.config.mjs
import durafoam from './tailwind.preset.mjs';   // generated

export default {
  presets: [durafoam],
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}'],
  theme: { extend: {} },   // repo-local escapes only
};

Set data-brand="solar" once on <html> in BaseLayout.astro and the sub-brand theme applies. The preset keeps Solar Center's old colour names (solar-amber, midnight, warm-sand…) as deprecated aliases for one release so nothing breaks on day one.

dura-foam.com — manual

WordPress + Elementor has no build step this repo can reach. Five global colours and four global fonts are typed into the Elementor admin once, from dist/elementor-globals.md. Optionally, enqueue tokens.css in the child theme so custom HTML widgets can use var(--df-*).

How updates flow

Open decisions

Four things this system deliberately does not decide on the brand owner's behalf:

Generated from @durafoam/design-system v0.1.0. Every value on this page was rendered from the resolved token tree — if it appears here, it ships.