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 v2 is the metropolitan monolith direction. Where v1 read as a printed capital markets brochure on cream paper, v2 stages the same institutional brief as a deep-navy institutional dashboard. The hero is a full-bleed `#001C54` stage with a radial blue glow; the body uses a Noto Serif / Manrope pairing on a cool `#F5F7FB` paper; the rest of the page rebuilds the same eleven sections as v1 but with different structural choices — four-tile mandate band, four capital products as full-width list rows, six asset classes as image cards with navy gradient, and the transaction band rendered as a tabular ledger instead of individual tombstones.

## Colors
- `--background` — `#F5F7FB` cool paper
- `--foreground` — `#001C54` primary navy (type, rules, primary CTAs)
- `--primary` — `#001C54` (hero stage, CTA pill, stat ledger rules)
- `--secondary` — `#0F448D` mid navy (card gradients, hover fills, secondary accents)
- `--accent` — `#0187CD` tertiary sky blue (radial hero glow, progress highlights, single CTA accent)
- `--muted` — `#E8ECF4` card stone (alt surfaces)
- `--muted-foreground` — `#403E47` neutral (captions, metadata, transaction ledger secondary rows)
- `--card` — `#FFFFFF` (asset class tiles, ledger rows, contact form card)
- `--border` — `#D5DCE8` hairline (section dividers, ledger rules)

## Typography
- **Heading** — `notoSerif` at weight 500. Display is `clamp(48px, 7vw, 112px)` with `-0.02em` tracking, 1.05 line height. Noto Serif is a utilitarian transitional serif — more neutral than Fraunces, which is part of the point: v2 should read as *institutional dashboard*, not *editorial brochure*.
- **Body** — `manrope`. 16px / 1.6 for paragraph copy, 14px / 1.5 for ledger rows, 12px uppercase tracked at ~0.14em for eyebrows and nav.
- Stat tiles use Manrope at 48-64px with tabular numerals (`font-feature-settings: "tnum"`) so the hero stat strip aligns vertically.

## Sections
1. **Navbar** — transparent over the dark hero, switches to cool-paper-on-navy below the fold on scroll. Centered nav, right-aligned CTA pill.
2. **Hero** — full-bleed `#001C54` stage with a radial blue glow (`#0187CD` at ~12% opacity, centered slightly above the headline). Noto Serif display headline in cream-white, body paragraph in `#CAD2E2`, a primary CTA pill (navy on cream), and a hero stat strip with four tabular stats (placements to date, deal range, lender coverage, average close time) sitting on a thin hairline rule.
3. **CapitalStats / Mandate band** — four-tile mandate band on paper with stone cards, each tile is a number + eyebrow + one-line description.
4. **Services** — four capital products as full-width list rows (not cards). Each row is a large Noto Serif title left, a two-paragraph body middle, a right-aligned arrow CTA, with a hairline rule between rows.
5. **AssetClasses** — six asset classes as image cards with a navy gradient overlay. Photography is credit-driven (multifamily, mixed-use, industrial, commercial, retail, hospitality). Eyebrow label + serif title over each image.
6. **RecentDeals** — transaction ledger: a tabular rendering (amount / type / location / date) with hairline rows, alternating-row stone shading, and a sticky header. Reads like a debt-placement tombstone sheet from a capital markets weekly.
7. **Process** — four-step approach as cards on the cool paper ground, each step with a large numeral (Manrope tnum), a serif step title, a body paragraph, and an accent-blue progress bar.
8. **LenderNetwork** — inverted section on primary navy, two columns of lender categories, accent-blue hairlines, cream-white type.
9. **ContactCta** — deal intake form, same two-column structure as v1 but with Manrope labels and a primary-navy CTA pill.
10. **Footer** — three-office directory on cool paper, a small newsletter signup, compliance line.

## Components
All sections are hand-rolled in `_components/`. No block library usage — v2 is a brick-by-brick rebuild of the v1 brief in a different typographic and chromatic register so the two can be compared side-by-side with no shared pieces.

## Do's and don'ts
- **Do** keep the hero as a full-bleed navy stage with the radial glow. The radial glow is the single chromatic cue that separates v2 from v1 at first glance.
- **Do** render the transaction band as a tabular ledger (not individual tombstones). That's the whole point of the v2 direction — it reads like a dashboard, not a brochure.
- **Do** use tabular numerals on every numeric display (stats, ledger, process numbers). Alignment is institutional credibility.
- **Do** lean on the three-tier navy scale (`#001C54` / `#0F448D` / `#0187CD`). Every navy elsewhere on the page comes from these three tokens.
- **Don't** introduce Fraunces or any editorial serif. Noto Serif is deliberately utilitarian — swapping it breaks the "institutional dashboard" read.
- **Don't** swap the cool paper for cream. The cool paper is what makes the navy hero pop and keeps the whole surface feeling digital.
- **Don't** add gold anywhere. Gold belongs to v1. v2 is navy-on-navy end to end.
- **Don't** use card shadows. v2 uses hairline borders and subtle background shifts — never drop shadows.
Preview templateBrand guidelines