Builder
  • Create
  • Sites
  • Templates
  • Blocks
  • Images
  • Fonts
  • Logos
  • Brand Extractor
  • Docs
  • Sitemap
  • Composer
Builder
  • Create
  • Sites
  • Templates
  • Blocks
  • Images
  • Fonts
  • Logos
  • Brand Extractor
  • Docs
  • Sitemap
  • Composer
Loading
Mach1 Capital
ThemeBrandBriefDESIGN.md
## Overview
Mach1 Capital v3 is the editorial monolith direction. Where v1 read as a printed capital markets brochure and v2 as an institutional dashboard, v3 stages the same brief as a vintage corporate-firm website in the Howard & Howard / CallJacob.com neighborhood. Deep midnight navy, brand gold accent, a walnut wood "sectors" card, Denton Condensed italic serif display, Tilda Sans body. The page is structured as alternating image-bands with cards instead of stacked sections: a dark photographic hero with a vertical italic sidebar nav, a white 'Our firm' card, a walnut-wood 'Our sectors' card, a white 'Our approach' card, two repeated tagline bands ("It's not capital for everything. It's capital for real estate.") on navy and black, a closing white tagline with a team-photo bleed, and a three-office navy footer.

## Colors
- `--background` — `#FFFFFF` paper white (the alternating-band structure means the surface is white *and* navy depending on the band)
- `--foreground` — `#001C54` primary navy (type on white bands, card type on gold/walnut accents)
- `--primary` — `#001C54` (tagline band ground, footer ground, vertical sidebar nav ground)
- `--secondary` — `#C9A35E` brand gold (section eyebrows, logo wordmark, hover rules, CTA underlines)
- `--accent` — `#3F2A19` walnut wood (the "Our sectors" card ground — its own section, not a reusable surface)
- `--muted` — `#F4F2EC` warm paper (alt backgrounds for pull-quote blocks and the closing tagline stage)
- `--muted-foreground` — `#2A2C36` charcoal (body copy on warm paper)
- `--card` — `#FFFFFF` (the "Our firm" and "Our approach" cards — pure white over photographic bands)
- `--border` — `#D9D6CC` warm hairline (rules on warm paper surfaces only — navy bands use no borders)

## Typography
- **Heading** — `dentonCondensed` display at weight 500, italic. `clamp(40px, 5vw, 80px)` with `-0.01em` tracking, 1.1 line height. Denton Condensed italic is the brand signature — it's what the vertical italic sidebar nav is built from.
- **Body** — `outfit` at weight 400. 16px / 1.65 for paragraph copy, 14px / 1.55 for captions. Outfit is a humanist sans that reads warm enough to pair with the italic serif display without feeling corporate.
- Eyebrow labels are Outfit uppercase at 11-12px tracked at ~0.18em, usually in brand gold on navy bands and charcoal-on-warm-paper elsewhere.

## Sections
1. **Hero** — full-bleed dark photographic band (editorial photo of a skyline or downtown core), vertical italic sidebar nav pinned to the left edge running top-to-bottom (the nav is rotated 90° and the labels are in Denton Condensed italic), oversized italic headline in cream-white, a gold eyebrow label, a right-aligned contact CTA pill.
2. **FirmSection ("Our firm")** — alternating two-up band: photograph left (image bleed to the left edge), white card right with Denton italic title, a paragraph of firm copy in Outfit, and a gold-underlined arrow CTA.
3. **TaglineBand (navy variant)** — full-bleed primary-navy stage with the single repeated tagline in Denton italic cream-white: *"It's not capital for everything. It's capital for real estate."* No supporting body copy in this variant.
4. **SectorsSection ("Our sectors")** — alternating band flipped: walnut-wood card left, photograph right. The walnut card carries a gold eyebrow + italic title + a list of sectors (multifamily, mixed-use, industrial, commercial, retail, hospitality) with gold rules between rows.
5. **TaglineBand (black variant)** — full-bleed black stage (not navy) with the same tagline headline PLUS a long body paragraph ("Most advisors will place capital wherever the fee is. We won't…") that explains the firm's stance. This is the one variant that takes body copy.
6. **ApproachSection ("Our approach")** — third alternating band: photograph left, white card right with a numbered approach list (01 — 04 steps), gold numerals, italic step titles.
7. **TeamClosing** — closing stage on warm paper with a large italic tagline, a team-photo bleed at the bottom that runs full-width edge to edge, and a single gold-on-warm-paper contact CTA.
8. **Footer** — navy ground, three-office directory (city + street + phone) in Outfit on cream-white, a small Denton italic wordmark bottom-left, compliance line right.

## Components
All sections are hand-rolled in `_components/`. v3 has its own `wordmark` component (Denton italic logo lockup), its own `tagline-band` component (which takes a `variant="navy" | "black"` prop and optional `body` prop), and alternating image+card band sections that don't map 1:1 to v1/v2 sections by name — they're a different structural rhythm expressing the same brief.

## Do's and don'ts
- **Do** keep the vertical italic sidebar nav. It's the single most recognizable brand cue of v3 and separates it from every other institutional template in the sandbox.
- **Do** preserve the walnut wood card for the sectors section only. The walnut is a one-off — it appears nowhere else on the page and that scarcity is what gives it weight.
- **Do** use the tagline band twice with two variants (navy no-body, black with-body). Repetition is the point — the tagline is the brand ("It's not capital for everything. It's capital for real estate.").
- **Do** render every display headline in Denton Condensed italic. Upright Denton is not an option in this template.
- **Don't** introduce Fraunces or Noto Serif. Denton Condensed italic is v3's entire display system.
- **Don't** collapse the alternating image-band rhythm back into stacked cards. The image+card alternation is the structural signature of the editorial monolith direction.
- **Don't** use the walnut color outside the sectors card. Walnut on a footer or a pull-quote would break the monolith read.
- **Don't** replace the vertical italic sidebar nav with a horizontal top nav. Horizontal nav belongs to v1 and v2.
Preview templateBrand guidelines