# Pleet × SQ4D — Design Guide & Variant Deliverables

Three working directions for the Pleet homepage, each with a complete design system, rationale, and implementation notes. Use this to brief stakeholders, pick a direction, and hand the winning variant to development.

---

## How to demo

Open **`index.html`** — a single landing page that introduces the three variants with live thumbnails and "Open full page" buttons. Each variant is a self-contained HTML file you can open directly:

| File | Variant | Best for |
|---|---|---|
| `landing.html` | **Concrete** (original) | Conservative, brand-first, press-ready |
| `almost-liquid-glass.html` | **Almost-Glass** (hybrid) | Modern, editorial, art-gallery feel |
| `liquid-glass.html` | **Liquid Glass** (full) | Maximalist, premium consumer-tech |

All three pull the same SQ4D imagery, so a single content drop updates every variant.

---

## Shared foundations (all three variants)

Regardless of which visual direction we ship, these are non-negotiable:

### Voice & positioning

Pleet is a **builder of homes**, not a 3D-printing showcase. SQ4D is the **technology partner**. Every line makes that hierarchy clear.

> "Pleet builds. SQ4D's gantry is how."

Tone: technical confidence without jargon. Specifications, not marketing claims. Numbers earn their place.

**Don't say:** "Revolutionary 3D-printed homes" · "The future of housing" · "AI-powered construction"

**Do say:** "Single-family homes, on site, in 48 hours of print time" · "Built with SQ4D's ARCS™ gantry" · "First permitted, first FHA-approved, first MLS-listed"

### Required sections (in order)

1. **Hero** — headline + primary CTA + lead image (SQ4D ARCS gantry)
2. **Stats band** — 4 quantitative claims (cost, print time, labor, tolerance)
3. **Three phases** — site prep → print → finish out
4. **Technology partner (SQ4D)** — co-brand credit, spec sheet, build photo
5. **Timeline** — 2021 → 2026 milestones
6. **Gallery / field log** — build imagery + floor plan
7. **Marquee** — tagline ribbon
8. **CTA + footer** — reservation capture

### SQ4D credit rules

- Partner section must carry the label "Technology partner" and credit SQ4D by name
- Every SQ4D-sourced image must caption "IMAGE © SQ4D" or equivalent
- ARCS™ trademark symbol on first mention in each section
- Link off to sq4d.com from the partner section

### Brand signal color (locked)

**RGB 214, 255, 59 · `#D6FF3B`** — Pleet lime. Used as an *accent*, never as a large fill. Every variant treats this color as a reserved signal for moments of emphasis (progress bar, primary CTA, logo mark accent).

### Type

- **Display:** Instrument Serif (with italic for emphasis pulls)
- **Body / UI:** Inter (400–900)
- **Mono / tags:** JetBrains Mono (for coordinates, layer counts, section markers like "§ 03")

### Motion principles

- **No bubbly springs** — everything breathes like heavy machinery
- **Scale changes stay under 1.025×**
- **Cycle durations 5–9s** — slow enough to feel industrial
- **Hue drift, not hue flip** — colors shift in adjacent territory, never rainbow

---

## Variant 1 — Concrete (original · `landing.html`)

The conservative, brand-first take. Designed to ship in any browser, print-to-PDF for investor decks, and feel at home next to a bank's mortgage portal.

### Philosophy
Matte, confident, document-like. A printed architectural monograph in HTML.

### Palette — dark mode (default)

| Token | Value | Use |
|---|---|---|
| `bg` | `#201D18` | Page background — warm near-black |
| `soft` | `#2B2823` | Section breaks, subtle panels |
| `card` | `#262320` | Cards, surfaces |
| `ink` | `#F1EEE6` | Body text — warm cream |
| `muted` | `rgba(241,238,230,0.62)` | Captions, secondary copy |
| `accent` | `#D6FF3B` | Signal lime — sparingly |

### Palette — light mode

| Token | Value |
|---|---|
| `bg` | `#F2ECDE` (warm paper) |
| `card` | `#FFFFFF` |
| `ink` | `#1B1714` |
| `muted` | `rgba(27,23,20,0.6)` |
| `accent` | `#9CCC00` (lime dimmed for legibility) |

### Surface & texture
- Flat matte backgrounds. No backdrop filters anywhere.
- Borders: `1px solid rgba(ink, 0.08)` — hairline, barely visible
- Corners: 12–20px, more rectilinear than rounded
- Shadows: `0 20px 40px rgba(0,0,0,0.15)` — subtle elevation only

### Motion
- Fade-in reveals on scroll (opacity + 8px Y)
- No ambient animation
- Stat counters fade up
- Marquee scrolls once at human pace

### When to pick this
- Press release landing, investor data room, mortgage-partner intro
- When the audience includes regulators, bank underwriters, traditional builders
- When the copy needs to carry the page (long-form narrative, detailed specs)

### Known trade-offs
- Less visually "modern" — won't trend on design Twitter
- No "wow" moment — sells on substance
- Light mode feels more utilitarian than the dark variant

---

## Variant 2 — Almost-Liquid-Glass (hybrid · `almost-liquid-glass.html`)

The editorial middle ground. Industrial charcoal base with restrained frosted-glass overlays. Built to feel like a high-end architectural exhibition, not a consumer tech demo.

### Philosophy
Dark, confident, slightly brutalist-artistic. Glass as an *accent on* matte concrete — not glass as the base material.

### Base palette

| Token | Value | Use |
|---|---|---|
| `--ink-0` | `#070605` | True void (behind everything) |
| `--ink-1` | `#0E0C0A` | Page background |
| `--ink-2` → `--ink-5` | `#16130F` → `#3A342B` | Elevation ramp |
| `--paper` | `#ECE6D8` | Warm cream text |
| `--paper-dim` | `rgba(236,230,216,0.66)` | Secondary copy |
| `--paper-hair` | `rgba(236,230,216,0.10)` | Hairline dividers |

### Accent palette (restrained, art-gallery)

| Token | Value | Metaphor |
|---|---|---|
| `--laser-cyan` | `#67E8F9` | Construction laser / survey line |
| `--molten` | `#F59E4B` | Extruded concrete still curing |
| `--survey` | `#A78BC9` | Survey marker violet |
| `--signal` | `#D6FF3B` | **Brand lime — earned moments only** |

### Glass weights (the restraint is the point)

| Weight | Bg opacity | Blur | Border | Use |
|---|---|---|---|---|
| `glass-1` | 5% | 18px | 8% | Nav items, badges, input fields |
| `glass-2` | 8% | 22px | 12% | Stat tiles, timeline cards |
| `glass-3` | 14% | 28px | 18% | Hero console, partner card, CTA |

Every glass surface also layers:
1. **Filament pulse** — 1px horizontal strata `::before` at 7s cycle (suggests 3D-print layers)
2. **Inner edge specular** — diagonal light leak `::after` (like backlit thin concrete)
3. **Heave animation** — scale 1.00→1.012 over 7–9s, phase-offset per card

### Bleed / glow tokens

| Token | Value | Use |
|---|---|---|
| `--bleed-cyan` | `0 0 40px rgba(103,232,249,0.22)` | Hero console rim, progress bars |
| `--bleed-molten` | `0 0 40px rgba(245,158,75,0.22)` | SQ4D partner accents |
| `--bleed-signal` | `0 0 24px rgba(214,255,59,0.35)` | Signal dot, primary CTA |
| `--bleed-survey` | `0 0 32px rgba(167,139,201,0.18)` | Timeline markers |

### Backdrop layers (fixed, non-scrolling)

1. Fractal-noise concrete micro-grain (SVG, overlay blend, 5% opacity)
2. Barely-glowing 24px + 120px blueprint grid, 60s drift, elliptical mask
3. Layered radial mesh (`cosmos-drift` 48s) — cyan / amber / violet / lime soft washes

### Radii
14 / 22 / 28 / 36px — architectural rather than bubbly. `cut-bl` and `cut-tr` clip-paths on phase cards add angled "printed wall layer" depth.

### Motion keyframes
- `grid-drift` — 60s linear on blueprint grid
- `cosmos-drift` — 48s ease on radial mesh
- `filament-pulse` — 7s ease on every glass interior
- `heave` — 7s/8s/9s scale breath, phase offset
- `signal-pulse` — 2.2s on live indicator dots
- `marquee` — 40s linear horizontal sweep

### Registration ticks
`.reg-ticks` drops architectural `+` marks in corners of every glass card — small, mono, 9px, 55% opacity. Tiny detail that sells the "architectural drawing" vibe.

### When to pick this
- Primary public site, press, partner-facing
- When we want to look more forward than a bank, less flashy than a startup
- When "built by architects and engineers" needs to read at first glance
- Investor updates where we want sophistication without feeling tech-bro

### Known trade-offs
- Backdrop filters are GPU-heavy on low-end devices — needs perf budget
- Requires fallback styling for browsers without `backdrop-filter` (Firefox ANDROID mainly)
- Slower page load than `landing.html` (noise SVG + multiple radial gradients)

---

## Variant 3 — Liquid Glass (full · `liquid-glass.html`)

The maximalist Apple Liquid Glass take. Every panel refracts, breathes, and catches light. Designed to stop scrolls and win design awards.

### Philosophy
Cinematic, cosmic, premium consumer tech. The site *is* the marketing.

### Base palette
Near-black cosmic background (`#0A0812`), colored mesh gradients (cyan/violet/rose/lime) as primary visual vocabulary. Text in bone white on glass, with per-stat neon hues.

### Glass weights
Heavier than the hybrid variant — base opacity 8–18%, blur 32–48px, borders 18–28% opacity, saturate 160–200%. Glass is the primary material, not an accent.

### Effect stack per panel
1. Backdrop blur + high saturate (makes background pop through)
2. Gradient tint overlay
3. SVG fractal-noise caustic that drifts 12s (liquid refraction)
4. Iridescent specular sheen `::after` — converts to conic light-sweep on hover
5. Breathing animation (scale + radius micro-variation, 5–7s)

### Motion keyframes
- `cosmos-drift`, `star-pulse` on background
- `caustic-drift` 12s inside glass
- `sheen-drift` 8s on highlights
- `glass-heave` 5–7s on cards

### Organic radii
22 / 32 / 40 / 48px — **including micro-variation during breathing** (radius literally shifts 1–2px during the heave cycle to feel liquid).

### Accents
Same base signal colors but used boldly: neon hues on stat numbers, violet/cyan text glows, starfield overlay, 120px inline-SVG logo treatment.

### When to pick this
- Tier-1 press launch, homepage of record
- When we expect design-industry coverage (Awwwards, Site Inspire, etc.)
- When the audience skews tech/design-literate and expects visual sophistication as proof of engineering quality
- For a standalone "explore the technology" page even if the main site stays conservative

### Known trade-offs
- Heavy GPU usage — potentially janky on older mobile
- Can feel "too much" to a bank or regulator
- Dates faster — will look like "a 2026 site" in 2028
- Less print-friendly; CTAs compete with ambient motion

---

## Asset pipeline (shared)

All three variants reference the same files in `assets/`:

| File | Purpose | Source |
|---|---|---|
| `assets/sq4d-printer.webp` | Primary hero + partner image | SQ4D marketing kit |
| `assets/hero-aerial.webp` | Subdivision context shot | Generated placeholder / Pleet field |
| `assets/timelapse-print.mp4` | Build-process loop (optional) | SQ4D footage |
| `assets/plan-m014b.svg` | Floor plan reference | Pleet architect |

**Drop-in replacement** — swap any file in `assets/` and all three variants update. No variant-specific image paths.

---

## Decision framework

Ask these in order:

1. **Who lands here most?** Press/regulators → Concrete. General public → Almost-Glass. Design-savvy tech → Liquid Glass.
2. **Does the copy carry the weight, or does the visual?** Copy-first → Concrete. Visual-first → Liquid Glass. Both → Almost-Glass.
3. **Print-to-PDF often?** Yes → Concrete. No → either of the others.
4. **Mobile load budget?** Tight → Concrete. Comfortable → Almost-Glass. Generous → Liquid Glass.
5. **How long does this design need to feel current?** 3+ years → Concrete. 18–36 months → Almost-Glass. 12–18 months → Liquid Glass.

**Recommendation for discussion:** Ship `almost-liquid-glass.html` as the public homepage. It threads the hardest needle — sophisticated enough to signal engineering credibility, restrained enough to read as a serious construction company. Keep `landing.html` wired up as a "minimal" or "press" alternate at `/press`, and reserve `liquid-glass.html` for a campaign microsite at launch.

---

## Handoff checklist

Once a direction is picked:

- [ ] Replace `assets/sq4d-printer.webp` with final SQ4D-approved imagery
- [ ] Confirm copy in each section with legal (FHA claims, timeline dates)
- [ ] Wire "Join waitlist" CTA to real form backend
- [ ] Add `<meta>` social share tags (og:image, twitter:card)
- [ ] Accessibility audit: focus states, reduced-motion respect, color contrast on lime text
- [ ] Browser test: Safari, Firefox, Chrome mobile (backdrop-filter support)
- [ ] Performance budget: LCP < 2.5s, CLS < 0.1
- [ ] Replace placeholder timelapse with real SQ4D footage when delivered

---

*Updated — demo via `index.html` · live variants in project root.*