01
Place before promotion
Name the street, the light, the walk. Specificity is the brand; generic language is the failure.
00
A modern home in San Jose
Close to everything.
Home to yourself.
This is the living brand and interface system for 214 Proximity — one city home, documented like a place worth knowing rather than listed like inventory. Everything on this page is drawn from the production tokens and components. Change the tokens and this page changes with them.
[[verify]]Bedrooms
[[verify]]Baths
[[verify]]Interior sq ft
[[verify]]Lot
San JoseLocation
Every numeric fact is a placeholder. No property facts are invented; they enter the system only from an owner-supplied source. See docs/audit.md.
01
Stance
What this property brand is, what it is not, and who arrives.
What it is
A single-property brand. One modern San Jose home, treated as its own small, enduring brand — photographed carefully, described plainly, sequenced with intent. The reference point is an independent architecture-and-hospitality publication documenting one well-resolved home.
The core tension
| We are | We are not |
|---|---|
| Connected | Chaotic |
| Urban | Cold |
| Modern | Sterile |
| Compact | Compromised |
| Designed | Precious |
What it is not
Not an MLS portal, a brokerage template, a generic luxury-development site, a resort, a software startup, a beige influencer brand, a black-and-gold cliché, or an animation showcase. It is a modern urban home and does not cosplay as a coastal estate.
Audience & traffic
Two arrivals, one system. Some come from paid Google search with a concrete question — where, how big, how much, can I see it. Some come to feel whether this is a place to live. Editorial desire on the surface; plain facts one glance away; a way to inquire always within reach, never shouting.
Paid search-ready Editorial Conversion-safe
02
Principles
Five rules that resolve most decisions before they reach a debate.
02
Desire before inventory
Lead with the feeling of the place, then let the facts confirm it. Never open with a spec sheet.
03
Proof before adjectives
Earn any emotional word by standing it next to a concrete, verifiable fact.
04
Editorial, not evasive
Restraint is confidence, not concealment. The facts a buyer needs are always close.
05
Conversion without contamination
The way to see the home is always available and never dominates. No pop-ups, no countdowns, no urgency theatre.
03
Palette
Warm, residential, Californian — plaster, oak, concrete, shadow, muted green, residential metal. Photography carries the color; the UI stays quiet. One accent, used rarely. Ratios below are computed against paper (light) or ink (dark).
Do
- Let rooms and light provide saturation; keep UI in the warm neutrals.
- Use rust sparingly — links, one primary CTA, a single rule.
- Meet contrast: ink/olive/rust on light; bone/rust-light on dark.
Don't
- No brokerage blue, no metallic gold, no pure-black-everywhere.
- Never set body text in Stone on a light surface (fails contrast).
- Don't turn the accent into a theme colour or fill large areas with it.
Late afternoon
The same system, inverted for a warm dark section. Text is rust-light for the accent; body stays high-contrast bone.
04
Typography
Two families. Instrument Serif for editorial display, Manrope for interface and body. Editorial, not ornamental. Fluid clamps scale from 360 px to 1440 px.
Close to everything
The quiet, already here
A modern home in San Jose
The rooms, in sequence
Kitchen and dining
A home close to the things that make a city worth living in, and quiet enough to forget them when you want to. The front door opens to a street, not a lobby.
Plain descriptions of materials, light, space, and location. Short declarative sentences. Facts as proof, not decoration. This is the reading size for long-form editorial copy, held to a comfortable measure so the line length never tires the eye.
Kitchen, looking west. Morning light.
Interior · Lot · Year · Parking
01 Arrival
You arrive at a door,
not a driveway.
Two blocks from [[to verify]]. A six-minute walk to [[to verify]].
05
Photography
No photography exists yet — this defines the rules and the intake pipeline.
Placeholders below stand in at the correct aspect ratios so real images drop straight in. Full
rules in brand/photography.md.
Taxonomy — twelve categories
| # | Category | Weight | Typical use |
|---|---|---|---|
| 01 | Arrival | Editorial | Hero, section opener |
| 02 | Exterior | Editorial | Full-bleed, context |
| 03 | Living | Editorial | Hero candidate, spreads |
| 04 | Kitchen & dining | Editorial + factual | Spread, sequence |
| 05 | Bedrooms | Editorial | Sequence, portrait |
| 06 | Bathrooms | Factual | Sequence, detail |
| 07 | Details & materials | Editorial | Callout, portrait |
| 08 | Light & atmosphere | Editorial | Full-bleed, mood |
| 09 | Outdoor space | Editorial | Spread, bleed |
| 10 | Neighborhood & access | Factual | Location section, map |
| 11 | Floor plan & orientation | Factual | Floor-plan block |
| 12 | Utility & documentation | Supporting | Disclosures, records |
Crop behavior & aspect ratios
Do
- Sequence to alternate density and release; mix aspect ratios.
- Overlay text only on calm, low-detail regions with a legibility scrim.
- Keep originals untouched in
assets/selects/; generate derivatives.
Don't
- No AI-generated photos of the home. No fake sky replacement.
- Never add/remove permanent features or retouch architecture.
- No equal-sized gallery grids; no text over faces or fine detail.
Overlay text sits on a bottom gradient scrim only. Never place text over detailed or bright regions.
06
Layout
A 12-column desktop grid (6 tablet, 4 mobile), large margins, controlled asymmetry, and vertical pacing that alternates density and release. Spacing on a 4 px base.
12-column grid
Spacing scale — 4 px base
--space-4 · 4px--space-8 · 8px--space-16 · 16px--space-24 · 24px--space-32 · 32px--space-48 · 48px--space-64 · 64px--space-96 · 96px--space-128 · 128px--space-160 · 160pxSection rhythm — density then release
03 Living
One room that does several things well.
Concrete description of the space, its light, and how it connects. No adjectives it hasn't earned.
[[verify]]Interior
[[verify]]Lot
[[verify]]Year
[[verify]]Parking
07
Components
The twenty-five components, rendered live from system.css. Forms
are inert demonstrations in this phase — nothing submits.
Resize below 820 px to see the links collapse into the toggle. Toggle is a real 44 px target with aria-expanded.
[[verify]]Bedrooms
[[verify]]Baths
[[verify]]Interior
[[verify]]Lot
[[verify]]Year built
San JoseLocation
Unverified values render muted with a [[verify]] marker until sourced.
The home
A modern home in San Jose. Close to the things that make a city worth living in, and quiet enough to forget them when you want to.
The front door opens to a street, not a lobby. Inside, the plan is compact and unwasted — rooms that each do a few things well.
04
Kitchen and dining
One counter, west-facing. [[to verify: appliances/finishes]].
07 Details & materials
Named, not praised.
[[to verify: white oak, plaster, board-formed concrete]]. Materials are stated as fact, never decorated with adjectives.
Material
The floor
[[to verify]]. A single material runs from the entry through the living space, uninterrupted.
- Ground floor
- Entry, living, kitchen and dining, outdoor connection. [[to verify]]
- Upper floor
- Bedrooms and baths. [[to verify]]
- Orientation
- Primary light from the [[to verify]].
Approximate location. Exact address shared on inquiry. [[to verify]]
Close to everything
What's within reach
- [[to verify: transit]]
- [[to verify: park]]
- [[to verify: coffee]]
- [[to verify: highway access]]
See it in person
Book a private showing.
Tell us when works. We'll confirm a time and share the exact address.
Equal Housing Opportunity. All information deemed reliable but not guaranteed and should be independently verified. Square footage and lot size are approximate. Listing presented by [[to verify: agent]], [[to verify: brokerage]], DRE #[[to verify]]. Nothing here is an offer where prohibited.
[[price]]
San Jose · [[verify]] bd Book a showing
San Jose · [[verify]] bd Book a showing
On real mobile pages this pins to the bottom above the safe-area inset and only appears below 820 px.
Modern home · San Jose
Close to everything. Home to yourself.
[[verify]] bd · [[verify]] ba · [[verify]] sq ft. See it this week.
Equal Housing OpportunityDRE #[[verify]]Private showings
Reduced nav, message that matches the ad, one primary CTA, trust + disclosure visible. Built for paid clicks.
08
Motion
Motion clarifies hierarchy and transition — it never proves design quality.
Content is fully usable with motion off. Full rules in brand/motion.md.
| Token | Value | Use |
|---|---|---|
--dur-micro | 160ms | Hover, small state (120–220) |
--dur-ui | 300ms | Nav, disclosure (220–400) |
--dur-reveal | 640ms | Editorial reveal (500–850) |
--img-scale-max | 1.02 | Max image zoom on hover |
--translate-max | 24px | Max content displacement |
--ease-out | cubic-bezier(.16,1,.3,1) | Reveals |
Editorial reveal
Enters +24px, fades in
Reduced motion
With reduced-motion on, this appears instantly — no displacement, no fade.
Toggle “Reduce motion” in your OS and reload; the reveal above becomes instant. Content is never hidden from motion-off users.
09
Voice
Short, declarative, place-specific. Sentence case. Facts as proof. Full rules
in brand/voice.md and brand/avoid.md.
Approved
- “A modern home in San Jose.”
- “Close to everything. Home to yourself.”
- “Two blocks from [[to verify]]. A six-minute walk to [[to verify]].”
- “Kitchen, looking west. Morning light.”
- CTAs: See the home · Book a private showing · Walk through the spaces · Explore the neighborhood
Banned
- stunning · breathtaking · rare opportunity · dream home
- urban oasis · nestled · meticulously designed · luxury living
- elevated lifestyle · unparalleled · perfect blend · must-see
- won't last · welcome home · your dream awaits
- Any unsupported superlative; any invented fact.
Write “3 bedrooms”, not “boasting 3 spacious bedrooms.” Give distance as a real decision: “a six-minute walk”. Name materials — “white oak floors” — only if true. Mark anything unconfirmed [[to verify]] and never ship it public.
10
Paid traffic
Editorial desire, immediate clarity, one obvious action. The landing must match the ad message and give property clarity above the fold, with trust and disclosure visible.
- Message match
- Clarity above the fold
- Primary CTA
- Trust + disclosure
- Reduced-nav shell
The reduced-navigation campaign shell (components 24–25) is the landing composition. It reuses the same tokens and components — no separate design language for ads.
11
SEO & semantics
Local intent, honest structure, no keyword stuffing.
| Concern | Rule |
|---|---|
| Headings | One h1 per page; no skipped levels; sections use h2. |
| Structured data | schema.org/SingleFamilyResidence + RealEstateListing — only verified fields; never fabricate JSON-LD values. |
| Image alt text | Describe the room + orientation: “Living room looking west.” Category from taxonomy. No keyword lists. |
| Metadata | Title ≤ ~60 chars, description ≤ ~155, one canonical URL, OG image from a select. |
| Canonical | Single canonical host; campaign params never canonicalised. |
| Local intent | Name the neighborhood + real, verifiable proximities. No stuffed city lists. |
12
Accessibility
Built in, not bolted on. The tokens make the safe choice the default.
Contrast
Body text meets AA+. Stone is decorative only. Ratios documented in tokens.json.
Focus
Visible :focus-visible ring on every interactive element; adapts on dark scopes. Tab into the form above to see it.
Keyboard
Nav, toggle, gallery, form all reachable and operable by keyboard. Escape closes overlays.
Motion
prefers-reduced-motion collapses reveals to instant; content never hidden behind animation.
Semantics
Landmarks (header/nav/main/footer), real labels, alt on every image, ordered headings.
Targets
Interactive controls are ≥44 px. Forms use explicit <label for>.
13
Performance
Speed is a feature — paid clicks are wasted on a slow page. Targets: Perf 90+, A11y 95+, Best Practices 95+, SEO 95+.
| Budget | Rule |
|---|---|
| Images | AVIF + WebP + JPG fallback; responsive widths; hero target ≤ ~250 KB; lazy-load below the fold; eager + fetchpriority=high on the hero only. |
| CLS | Explicit width/height (or aspect-ratio) on every image slot — already baked into the ratio classes. |
| Fonts | Self-host in production, font-display: swap, system fallback in the token stack, preconnect/preload only the two families. |
| JavaScript | One tiny vanilla file, deferred. No framework runtime. Enhancement only. |
| LCP | Hero image is the LCP element; keep it small, eager, and above any web-font dependency. |
This guide loads fonts from Google Fonts for convenience. Production self-hosts them; the fallback stack keeps everything readable if the font never loads.
14
Governance
How the system stays coherent as it grows. Full rules in governance/
and CLAUDE.md.
An agent may
- Extend components using tokens
- Add a demonstrated component to the guide
- Draft copy in the voice (not final public)
- Tune tokens against real photography
Requires Eric's approval
- Any property fact or final public copy
- DNS / deploy / production changes
- Pricing, agent, disclosure content
- Palette identity or removing conversion paths
Change tokens, not components, for global shifts. Update design-system/manifest.json and this guide whenever the system changes. Run governance/qa-checklist.md before committing.
15
Homepage composition preview
One non-functional composition assembled from the system — proof of coherence, not the final website. No final content, no wired forms, no publishing.
[[verify]]Bedrooms
[[verify]]Baths
[[verify]]Interior
[[verify]]Lot
San JoseLocation
The home
A modern home in San Jose. Close to the things that make a city worth living in, and quiet enough to forget them when you want to.
The plan is compact and unwasted. The front door opens to a street, not a lobby.
04 Kitchen & dining
One counter, west-facing.
[[to verify]] — described plainly when confirmed.
Close to everything
What's within reach
- [[to verify: transit]]
- [[to verify: park]]
- [[to verify: coffee]]
See it in person
Book a private showing.
We'll confirm a time and share the exact address.
Proof of coherence only. Not the final site. No facts, no live forms, not for publishing.