Seasonal features
The best plans are close to home.
Read the guide
Team leaders
Brandon & Kaitlyn Oberdorfer
Husband. Wife. Your Team.
Design System · Version 1.1 · Complete · Proposed
Built from the page.Ready for the web.
Every token below was measured from Wakefield at Home, then extended for screens, states and accessibility. All components used on the example website are documented here, and each maps one-to-one to a planned WordPress block.
Files: tokens.css · base.css · components.css · site.css · tokens.json · theme.json
Proposed · awaiting approvalFoundationsDesign System
Navy for authority.Ivory for warmth.
Gold is a line, not a fill. The brand stays luxurious by holding back.
Brand primitives
Sampled from the print file. The deeper Gold Ink is new: the magazine's gold labels on ivory measure 2.45:1, below the WCAG minimum for small text.
| Token | Value | Source | Use |
|---|---|---|---|
--ot-navy | #071D2D | p1, p4, p7, p8 | Navigation, footer, cover heroes, CTA panels, display type |
--ot-ink | #142A38 | p2–p6 body | Body text on light grounds |
--ot-ivory | #F7F3EC | p2–p6 ground | Page background, text on navy |
--ot-paper | #FBF9F5 | New | Inputs, raised cards on ivory |
--ot-sandstone | #E9E2D5 | p3 history band | Alternating sections, stat and callout panels |
--ot-gold | #B49A65 | All pages | Rules, frames, linework; labels on navy only |
--ot-gold-ink | #7A6438 | New | Gold-toned text on ivory and paper (5.1:1) |
--ot-gold-pale | #D9C9A5 | New | Focus ring and hover on navy |
--ot-slate | #59656A | p2–p6 captions | Captions, metadata, secondary text |
--ot-mist | #A3AEB3 | New | Secondary text on navy (7.6:1) |
Semantic layer
Components read semantic tokens only. Navy sections remap them with .surface-inverse, so one component works on either ground.
| Group | Tokens | On ivory | On navy |
|---|---|---|---|
| Surface | --surface-page --surface-raised --surface-muted --surface-inverse | ivory · paper · sandstone | navy · navy-800 |
| Text | --text-display --text-body --text-muted --text-accent | navy · ink · slate · gold-ink | ivory · #E4E0D8 · mist · gold |
| Rules | --rule-gold --rule-hair --border-subtle --border-input | gold · 55% gold | gold · 45% gold |
| Focus | --focus-ring --focus-width --focus-offset | navy, 2px, 3px offset | gold-pale |
| States | --hover-tint --press-tint --disabled-* | Tints derived from navy or ivory; never a new hue | |
| Forms | --input-bg --input-border --input-placeholder --input-border-focus | paper · #8E8778 (3.2:1) | navy-800 · #6F8090 |
| Status | --success --warning --error --info (+ -bg) | Muted heritage tones: pine, ochre, brick. All ≥ 6:1 on their tint. | |
Source-confirmed
Proposed
Demo content
Needs verification
Content-integrity badges are part of the system. They must appear on any demo listing, unverified claim or placeholder until it is replaced.
Contrast checks
WCAG 2.2: 4.5:1 for body text, 3:1 for large text (24px+, or 18.5px+ bold) and UI boundaries.
| Pairing | Sample | Ratio | Small text | Large text / UI |
|---|---|---|---|---|
| Navy on ivory | Aa | 15.53 | Pass | Pass |
| Ink on ivory | Aa | 13.39 | Pass | Pass |
| Slate on ivory | Aa | 5.43 | Pass | Pass |
| Slate on sandstone | Aa | 4.67 | Pass | Pass |
| Gold on ivory (magazine labels) | Aa | 2.45 | Fail | Lines only |
| Gold Ink on ivory | Aa | 5.12 | Pass | Pass |
| Gold on navy | Aa | 6.34 | Pass | Pass |
| Ivory on navy | Aa | 15.53 | Pass | Pass |
| Mist on navy | Aa | 7.58 | Pass | Pass |
| Input border on ivory | Field | 3.23 | n/a | Pass |
FoundationsDesign System
Light headlines.Legible everything else.
The PDF sets every headline in Cormorant Garamond Light and its text in Manrope ExtraLight. Headlines keep Light. Text moves up to Regular, because ExtraLight is too faint for screens.
Luxury at every price point.
Fall in love with your home.
Close to Boston.Closer to what matters.
Know the market. Love the home.
The best plans are close to home.
What these numbers can tell you
If you are selling
Roasted squash & apple soup
Start with the right comparisons.
A useful snapshot helps you ask better questions. A thoughtful comparison helps you make better decisions.
Whether you are buying your first home, making room for your next chapter, or preparing to sell, we want you to feel heard, informed, and supported from the first conversation through closing.
Lot size, renovation quality, layout, parking, and condominium fees all belong in the comparison.
Source: Redfin, Wakefield Housing Market, accessed October 10, 2026.
An evening on Lake Quannapowitt.
Real estate / Wakefield, Massachusetts
Request a consultation
Buy Sell Communities Our Team Journal
$786,979
Rules
Two lines that answer
Headlines are often two short sentences, the second answering the first. Break the line where the thought turns, using .answer.
Light is reserved
Use weight 300 only from 30px up. Smaller serif text uses 400–500, and body text never goes below Manrope 400.
Capitals are small
Uppercase is limited to sans labels and buttons, tracked 0.14–0.18em. Never set a serif headline in all caps, except the stacked logo.
FoundationsDesign System
Generous margins.Precise lines.
The magazine's whitespace, on Concept B's architectural twelve-column grid.
Spacing scale
4px base with editorial jumps. Sections breathe with --section-y (64 → 136px).
--space-14px--space-28px--space-312px--space-416px--space-524px--space-632px--space-748px--space-864px--space-996px--space-10128pxGrid
12 columns, gutter 16 → 32px, page margin 16 → 80px, content max 1312px. Editorial layouts favour 6 + 5 offsets (image left, text from column 8).
Lines
Square corners everywhere. Depth comes from rules and grounds, almost never shadows.
.rule: 1px antique gold. Section and column dividers, as in the magazine.
.rule--hair: softened gold for long dividers on ivory.
.dim-rule: dimension line with end ticks, taken from the house drawing on page 7. Use it for measurements, ranges and architectural sections.
.folio-frame: the cover's inset double frame. Use one per view, on covers, heroes and the closing panel.
FoundationsDesign System
Twelve columns.Four breakpoints.
How pages are composed: the grid helpers, the points where layouts change, and the few places anything is lifted off the page.
Breakpoints
Content-first breakpoints. Media queries use the values directly; the tokens record them for design tools.
| Token | Value | What changes |
|---|---|---|
--bp-sm | 36rem · 576px | Card grids go from one column to two; listing facts go 2 × 2 |
--bp-md | 52rem · 832px | Twelve-column splits, page heroes and footers collapse to one column |
--bp-lg | 64rem · 1024px | Desktop navigation appears; the full-screen mobile menu retires |
--bp-xl | 90rem · 1440px | Design reference width; content stops growing at 82rem |
Layout helpers
Compose pages from these before writing new CSS.
| Class | Does |
|---|---|
.container | Centres content at max 82rem with fluid page margins (16 → 80px) |
.section · .section--tight | Vertical rhythm: 64 → 136px, or 60% of that |
.surface-inverse · .surface-muted | Navy or sandstone ground; remaps every semantic token inside |
.grid | Raw 12-column grid with the fluid gutter |
.split · .split--reverse | Image across columns 1–6, text from column 8 (or mirrored); one column below 52rem |
.card-grid-3 · .card-grid-4 · .listing-grid | Card grids that step down 4 → 2 → 1 and 3 → 2 → 1 |
.stack (--stack) · .cluster (--cluster) | Vertical spacing between children; wrapping horizontal groups |
.cols · .cols--3 · .cols--4 · .col-rule | Equal text columns, each optionally under a gold rule |
Image and text split
.split, the magazine's 40/60 page, as used on the home and profile pages.
Seasonal features
A little fresh air. A few good memories.
Body copy sits from column 8, leaving the gutter as air. Add .split--reverse to mirror it.
Elevation and layers
Print has no shadows, so the screen uses them only where something floats.
--shadow-1 · paper mockups, raised cards on photography
--shadow-2 · dialogs, toasts, focused search
Layers: --z-nav 50 · --z-overlay 80 (menus) · --z-modal 90 · --z-toast 95.
Corners: --radius: 0 everywhere. Only the yard-sign and phone mockups are rounded, because the objects are.
Page templates
Page-level layouts in site.css. Each becomes a WordPress template; open one to see it working.
| Template | Layout |
|---|---|
| Home | .home-hero (cover + search), .intro (portrait + story), .paths, .promise |
| Listing | .detail with a sticky .detail__aside showing panel |
| Team directory | .directory-bar filters over .card-grid-3 of agent cards and open seats |
| Agent profile | .profile (__photo 5 cols, __body 6 cols) with a quick-facts list, answer-first summary, FAQ and the phone .action-bar. One page per person, plus a template page for future agents |
| Article | .article: body across columns 3–9, sticky .article__aside, .article__lede |
| Community guide | .page-hero with a search-facing .page-hero__kicker h1 and an answer-first lead; overview beside .quick-facts--aside; neighborhoods, commute and schools, places and history, a .market-table with its source, FAQ, a town form and a .source-list. Built from tools/data/communities.json |
| Contact | .contact-grid: contact lines left, tabbed forms right |
Modifiers: .btn--block makes a button full width (phone forms); .panel--navy sets a form panel on navy.
FoundationsDesign System
Drawn, not decorated.
One authored set on a 24px grid with a 1.25 stroke and square ends, matching the page 7 linework. Icons support labels and never replace them.
Illustrations
Massachusetts house types drawn in the same line, used as placeholders for demo listings and community cards until licensed photography arrives.
Componentsot/button
Every action,clearly named.
Square, tracked and quiet. On hover a gold rule draws under the label, the magazine's line put into motion.
On ivory
Primary · defaultRequest a consultation
Primary · hoverRequest a consultation
Primary · focusRequest a consultation
Primary · loading
Primary · disabled
SecondaryView the buyer guide
SmallSchedule a showing
Text link with arrowRead the market update
On navy
Copy rules
Use
Request a consultation · Schedule a showing · Get a market review · Call Brandon and Kaitlyn · Send my question
Avoid
Submit · Click here · Learn more · Get started now! · Unlock your dream home
Componentsot/site-header · ot/mobile-menu
Search is one tap away.So is a person.
Seven destinations, a search button, and a phone call always in reach. The header is sticky on scroll and turns solid navy once it leaves the hero.
.site-header--overlay), turns solid after 40px of scroll
.site-header--light), for editorial and journal pagesMobile menu
A full-screen navy sheet that opens with a top-down clip reveal. Links are set at 30px Cormorant, so the menu reads like a table of contents rather than a list of buttons.
- The toggle has
aria-expanded. Escape closes the menu and returns focus to the toggle. - Content behind the menu is made
inertwhile it is open. - The call button stays in the thumb zone at the bottom.
- Under reduced motion, the menu appears without the wipe.
Componentsot/hero-cover · ot/page-hero · ot/section-head
The cover,translated.
Full-bleed photography under a navy scrim, inside the inset gold frame, with the issue line at the top and the promise at the bottom. Mark the focal point with --focal so the crop survives on mobile.
Massachusetts · Buying · Selling · Local living
Luxury atevery price point.
Thoughtful service. Creative marketing. A personal connection to every move.
Photo: Wakefield at Home cover portrait. Confirm approved photography
Inner page hero
Every other page opens with a quieter header: breadcrumbs, a two-line headline, a lead and an optional action.
Find the homethat fits your life.
Ivory: .page-hero. The default for search, team and journal pages.
Make your homefeel exceptional.
Navy: .page-hero--navy. For selling, recruiting and other persuasive pages.
Close to Boston.Closer to what matters.
Photo: .page-hero--photo. For community guides and articles; the scrim keeps text at AA.
Section head
Opens every section inside a page: running head, two-line title, an optional lead and an aside link.
Featured homesDemonstration listings
Homes presentedlike a feature.
Optional lead, up to two lines.
Componentsot/property-search · ot/results · ot/pagination
A search barthat belongs here.
This front end styles the authorized IDX provider's search. The prototype uses demo data only, with no live MLS connection.
Refine
The IDX provider has not been selected yet, and the team cannot assume it may use the principal brokerage's MLS permissions. Styling flexibility varies by provider.
Results bar
Live count (announced politely), sort, and the per-browser saved count.
Chip filter
Single-choice category filter for the journal; aria-pressed carries the state.
Loading and empty
Loading uses a quiet shimmer (still under reduced motion). An empty result always offers a way out.
.skeleton · while IDX results load
No demonstration homes match.
Widen the price range or clear a filter. On the live site, you could also save this search.
Pagination
For journal archives and long result sets. Steps are text, numbers are serif, the current page carries a gold rule.
Componentsot/listing-card · ot/agent-card · ot/community-card · ot/article-card
Image first.Facts underneath.
Cards are unboxed. The photograph and a hairline do the framing, as on the magazine's pages.
Listing card
Every demo listing carries the Demo badge and invented, obviously placeholder details. Live cards will add the MLS courtesy line, listing brokerage and data date.
Demo listing
$000,000
Demo Residence One · Example Street, Massachusetts
4 beds2.5 baths2,400 sq ftColonial
Listing courtesy of [Listing brokerage] · MLS data as of [date]
Demo listing
$000,000
Demo Residence Two · Example Avenue, Massachusetts
3 units6 beds3,600 sq ftMulti-family
Saved state shown · Listing courtesy of [Listing brokerage]
Demo listing
$000,000
Demo Residence Three · Example Lane, Massachusetts
3 beds2 baths1,650 sq ftCape
Listing courtesy of [Listing brokerage]
Property gallery
One lead image and two supporting views. The last tile opens the full gallery.
Agent card
Brandon and Kaitlyn lead, as one card, the way the magazine presents them. Future agents use the same card. Fields for unverified details stay empty, never invented.
Headshot pending
4:5, natural light, ivory or navy backdrop
Agent title
Future Agent
Biography, license and specialties are added in WordPress once verified.
Fields
- Name, photo, title
- Verified license information
- Specialties and service areas (filterable)
- Languages
- Phone, email, social links
- Authorized listings, testimonials, articles
- Lead attribution ID
Community card
Portrait 3:4 cards for the Massachusetts community hub. Use real local photography with the source credited; use the line illustration until it arrives.
Lake Quannapowitt Panorama, RedSoxFan274 / Wikimedia Commons, CC BY-SA 4.0, cropped.
Community guide
ot/community-guide · one page per town at /communities/town/. Every fact has a source; schools are a DESE link, never a rating; no description of who lives there.
Market rows with source, period and geography
| Calendar year | 2024 | 2025 | Change |
|---|---|---|---|
| Single-family median sale price | $420,000 | $430,000 | +2.4% |
| Single-family sales | 904 | 884 | -2.2% |
Source: The Warren Group, MA December 2025 Sales, Prices by Town. Geography: city of Worcester.
Sources list
- County
- Worcester County
- Population
- 206,518 (2020 Census)
- Rail
- Framingham/Worcester Line
- Single-family median
- $430,000 in 2025 Warren Group
Article card
Open seat
.seat · the honest empty state for the agent directory.
Your seat at the table
The team is growing. New agent profiles appear here as they join.
Join our teamThe directory never pads itself with invented agents. Empty places become a recruiting invitation, and they disappear automatically as real profiles are published.
Agent profile
ot/agent-profile · one page per person at /agents/agent-name/. Unconfirmed fields render as placeholders, never invented copy.
Template preview Not a real agent. Shown only on the template page.
Pending headshot, 4:5 (1:1 on phones)
Headshot pending
Biography placeholder
Biography · first person
[120 to 250 words, verified facts only.]
To confirmPublish checklist
- Verified MA license number
- Headshot, 4:5
- Principal broker approval
Quick facts, with a placeholder value
- Brokerage
- REWAP Brokerage LLC
- License
- [MA license number to be supplied]
Phone action bar (fixed below 832px; shown static here)
Search and answer engines
One person per page, named in the title and h1. An answer-first summary sentence, a quick-facts list, an FAQ and a visible "profile updated" date. JSON-LD: ProfilePage with a Person linked to the team and brokerage by @id, plus FAQPage and BreadcrumbList. No review or rating markup until real, permitted reviews exist.
Conversion
Two actions above the fold (message, call), the action bar on phones, services that link into Buy and Sell, a partner card, and a form at the foot of the page whose lead type names the agent (agent:<slug>) for routing and attribution.
Componentsot/listing-detail
The details,in the right order.
A listing page leads with pictures, then the four numbers people compare, then the story, then the facts. Contact stays in reach the whole way down.
Key facts
.facts · four numbers under a gold rule; 2 × 2 on phones.
4Bedrooms
2.5Baths
2,400Sq. ft.
1928Built
Specification table
.spec-table · MLS fields, never retyped by hand.
| Home type | Single-family |
|---|---|
| Style | Colonial |
| Taxes, fees | [From MLS data] |
| MLS number | [From MLS data] |
Agent mini and showing panel
The sticky aside on desktop: request a showing, then the people behind it.
Request a showing
Brandon & Kaitlyn Oberdorfer
Video and 3D tour
.embed · click to load. The poster is the listing's main photo; the player (YouTube, Vimeo, Matterport, iGuide, Kuula, CloudPano) loads only when pressed, so the page stays fast and no video host sees a visit that never plays. States: rest, hover and focus (gold label), playing (the iframe fills the frame).
Listing actions and share
.listing-actions · .share-row · under the gallery: request a showing, watch the tour, add the open house to a calendar (.ics or Google), then share through the phone's share sheet, copy link, Facebook, email or text. No share scripts or trackers. On phones the .action-bar keeps Call and Request a showing at the foot of the screen.
Payment estimate
.estimator · price, taxes and condo fee come from the listing when entered; the down payment starts at 20 percent; the interest rate is always the visitor's own (the site never states a rate). States: waiting for a rate (shown), then the monthly total and its parts.
Estimate a monthly payment
From your lender.
Estimated monthly payment
Enter a rate
An estimate for planning only, not a loan offer.
Attribution
Every live listing names its source. The placeholders show where.
Listing courtesy of [Listing brokerage]. Information deemed reliable but not guaranteed. Data from [MLS name], last updated [timestamp].
Componentsot/market-stats
Every numbercarries its date.
The navy two-by-two panel from page 4. Each value shows its period, and the panel always carries its geography, source and access date. Values are entered per report and are never live.
Data through August 2026 / All home types / Wakefield
$786,979Median sale price3 months ending August 2026
21Median days on marketAugust 2026
$483Median sold price / sq. ft.Redfin rolling 3-month snapshot
103.3%Sale-to-list priceAugust 2026
Source: Redfin, Wakefield Housing Market, accessed October 10, 2026. Geography: Wakefield town, all home types. Figures may be revised. This is not a valuation of any individual home.
Source-confirmed · historical
What these numbers can tell you
The townwide median is a starting point. Your best comparisons are recent closed sales that resemble your property.
Ask for a property-specific reviewBefore launch: choose a licensed, maintainable data source. These Wakefield figures must not appear as current or statewide.
Componentsot/inquiry-form
Short forms.Clear next steps.
Labels sit above the fields, errors say how to fix the problem, and every form explains what happens next. No one has to create an account.
Field states
Enter an email address like name@example.com.
Working example
Try sending it empty. Validation is real, and nothing is transmitted.
Tabs
One contact page, four inquiry types. Arrow keys move between tabs; #seller in the URL opens that tab.
General message form.
Buyer consultation form.
Seller market review form.
Submission states
.form-status appears under the button and receives focus, so screen readers hear it.
A few details are missing.Fix the highlighted fields and send again.
Thank you. Brandon and Kaitlyn have your request.You will hear back by your preferred method.
Hint text: .field__hint, linked with aria-describedby.
Componentsot/alert · ot/toast · ot/dialog
Say what happened.Then get out of the way.
Alerts, toasts, dialogs and status messages. Each names the problem or the result in plain words, and none relies on colour alone.
Alerts
Section-level messages. Status colours stay muted heritage tones and always pair with an icon and words.
Market figures are historical.
Wakefield, data through August 2026 (Redfin).
Search saved.
We will let you know when a match is listed.
Open house time changed.
Sunday, 1–3 PM (demonstration).
We couldn't load listings.
Check your connection and try again, or call 406-250-7620.
Toast
A brief confirmation after an action, announced politely and gone after five seconds.
Navy, gold rule, bottom centre, always dismissible.
Dialog
Only for tasks that need protected focus. Native <dialog>: focus is trapped, Escape closes it, focus returns.
Prototype notice
The ribbon on every example-site page. It is removed at launch.
Concept prototype: listings, future agents and form submissions are demonstrations. Project overview
Componentsot/triad · ot/steps · ot/pull-quote · ot/faq · ot/breadcrumbs
The magazine's furniture,made reusable.
Principles triad
From page 2. Three columns under one gold rule each.
Personal
Two partners invested in your goals.
Purposeful
A plan shaped around your home and life.
Prepared
Clear guidance and attention to the details.
Numbered steps
From page 7. Use numbers only when the order matters.
If you are selling
Start with the right comparisons.
Review recent closed sales with similar location, style, condition, and living area.
Create a strong first impression.
Clear the entry, simplify the rooms, and show the home in good light.
Build a plan around your life.
Discuss your timing, showing preferences, and next move.
If you are buying
Get ready before you find the one.
Connect with a lender for preapproval and review a comfortable monthly budget.
Know your everyday priorities.
Test the routine as well as the floor plan.
Look beyond the listing price.
Consider taxes, insurance, condominium fees, and maintenance.
Pull quote and testimonial
Testimonials appear only with the client's written permission. Until then the block shows its empty state.
Home holds the everyday moments that become a life.
Verified client testimonial will appear here, quoted exactly, with the client's permission on file.
FAQ accordion
Native <details> for keyboard and screen-reader support, plus FAQPage structured data.
How do I start the buying process?
Begin with a lender conversation about preapproval and a comfortable monthly budget. The Consumer Financial Protection Bureau's guide to preapproval letters is a useful first read.
What is a property-specific market review?
A comparison of recent closed sales that resemble your home in location, size, condition and style. It is more useful than a townwide median.
Which Massachusetts towns do you serve?
Statewide, including Worcester and Greater Boston. Final list to be confirmed
Breadcrumbs
Buy and sell pathways
.paths · two doors, navy and sandstone, each with a line drawing behind.
If you are buying
Get ready before you find the one.
If you are selling
Make your home feel exceptional.
Promise band
A centred statement between denser sections, closed with a dimension rule.
Our promise
The same care for a first condo as for a family estate.
Field guide list
.guide-list · large serif numerals for a guide the reader works through.
Walk the lake
Choose a stretch of the Lake Quannapowitt shoreline and leave time to pause at the Common.
Shop the harvest
Wakefield Farmers Market: Saturdays, 9 AM–1 PM, through October 31.
History band
.history · dates as display numerals on sandstone, from page 3.
1812
Established as South Reading.
1868
Renamed in honor of industrialist Cyrus Wakefield.
Look up the story of a street, a landmark, or a home before your next walk.
Letter and signature
For the leadership letter: a gold drop cap and an italic signature.
When we started The Oberdorfer Team, we built it on what we bring to our own family: care, honesty, hard work, and showing up for the people who count on us.
Brandon & Kaitlyn
On-this-page list and values list
Quiet navigation inside long pages, and a list of single words set large.
- Care
- Honesty
- Hard work
Componentsot/cta-panel · ot/newsletter · ot/office · ot/map
Ready for a personal plan?Call Brandon and Kaitlyn.
The seasonal At Home publication
Local living, real estate insight and recipes to share, four times a year.
The Oberdorfer Team Office
Planned · details unconfirmed- Address
- To be confirmed
- Phone
- 406-250-7620
- Hours
- By appointment (to be confirmed)
- Brokerage
- A team office of REWAP Brokerage LLC (formal status to be confirmed)
Map
A static, styled map plate in place of a third-party map embed: faster, private, and on brand. An interactive map loads only when the visitor asks for it.
Illustrative map · no real location
Contact lines
.contact-line · icon, label, detail; used on the contact page.
Call or text
Brandon & Kaitlyn Oberdorfer · 406-250-7620
[Team email to be confirmed]
Service area
Massachusetts
BehaviourDesign System
One gesture:the line draws.
The brand moves the way a pen rules a page. Gold lines draw from left to right and content settles beneath them. There is no parallax, bounce or looping animation.
Motion tokens
Rule draw · --dur-reveal 1100ms · --ease-out cubic-bezier(0.16, 1, 0.3, 1)
--dur-fast | 160ms | Colour, border |
--dur-base | 280ms | Button rule, nav underline |
--dur-slow | 720ms | Section settle, menu wipe |
--dur-reveal | 1100ms | Gold rule draw, image ease-in on hover |
Accessibility floor
Target: WCAG 2.2 AA.
Perceivable
Contrast is checked for every pairing above. Photos carry alt text, and decorative linework is aria-hidden. Content is visible by default if JavaScript fails.
Operable
2px focus rings with a 3px offset in navy, or pale gold on dark grounds. Targets are at least 44px. A skip link, Escape to close panels, and no keyboard traps. prefers-reduced-motion removes all movement.
Understandable
Labels sit above fields. Errors name the problem and the fix, and statuses are announced. Buttons say what they do, and forms say what happens next.
Implementationtokens.json · theme.json
Same tokens,every tool.
The tokens leave the browser in two portable formats: one for design tools, one for the WordPress theme.
Files
Generated from tokens.css by tools/export_tokens.py. Change a value in the CSS, then re-run the script.
Naming
One name per idea, everywhere.
| CSS | tokens.json | WordPress |
|---|---|---|
--ot-navy | color.navy | --wp--preset--color--navy |
--text-accent | semantic.text.accent → {color.gold-ink} | Block style variation |
--step-display-xl | font.size.display-xl (fluid 3.25 → 6rem) | --wp--preset--font-size--display-xl |
--space-5 | space.5 | --wp--preset--spacing--50 |
--ease-out | motion.easing.out | --wp--custom--ease--out |
ImplementationDesign System
One component,one block.
Tokens become theme.json presets, and components become server-rendered Gutenberg blocks with the same class names. Editors compose pages and never touch CSS.
| Block | Component | Editable fields | Data source |
|---|---|---|---|
ot/hero-cover | Editorial hero | Image + focal point, issue line, headline (2 lines), lead, 2 buttons | Post content |
ot/property-search | Search bar + filters | Default town, visible filters | IDX provider (TBD) |
ot/listing-grid | Listing card | Query: agent, community, status, count | IDX / MLS feed only |
ot/agent-card · ot/agent-directory | Agent card | Filters: specialty, service area, language | CPT agent |
ot/agent-profile | Agent profile page | Name, headshot, role, title, verified license, biography, specialties, service areas, languages, direct phone, email, socials, partner, FAQ; outputs ProfilePage, Person and FAQPage JSON-LD | CPT agent (post meta + block bindings) |
ot/community-card · ot/community-hub | Community card | Region, county, 2025 median, featured image + credit; hub grouped by region | CPT community, taxonomy region |
ot/community-guide | Community guide | Answer (40 to 60 words), overview, housing, villages, rail lines and stations, highways, school district + DESE link, places, history, market rows (source, period, geography required), FAQ, nearby guides, sources (URL per fact); outputs WebPage + City JSON-LD | CPT community (post meta + block bindings) |
ot/market-stats | Statistics panel | 4 values, labels, periods, source, access date, geography (all required) | Fields per report |
ot/inquiry-form | Forms | Lead type, routing agent, consent copy, success copy | Form plugin → CRM (TBD) |
ot/triad · ot/steps · ot/pull-quote | Editorial furniture | Text only | Post content |
ot/testimonial | Testimonial | Quote, name, town, permission on file (required) | CPT testimonial |
ot/faq | Accordion | Q & A pairs; outputs FAQPage JSON-LD | Post content |
ot/office | Office card + map | Address, hours, phone, agents | CPT office |
ot/brokerage-attribution | Footer attribution | Locked; edited in Site Settings only | Global options |
ot/page-hero · ot/section-head | Page headers | Variant (ivory, navy, photo), headline, lead, action | Post content |
ot/listing-detail | Gallery, facts, specs, showing panel | None: fully data-driven | IDX / MLS feed only |
ot/listing media · actions · estimator | Video and 3D tour, social links, floor plan and brochure; showing, calendar and share; payment estimate | None: from the listing's "Listing details" | Team listings (ot-core) |
ot/pathways · ot/promise | Buy/sell doors, promise band | Headlines, links, illustration choice | Post content |
ot/alert · ot/dialog | Feedback | Message, variant, dismissible | Post content / theme JS |
ot/publication | Feature article, archive card | Issue, cover, PDF file | CPT publication |
Component inventory
30 component families, each documented on this page and used on the example site.
| Component | Block | Used on | Status |
|---|---|---|---|
| Buttons and links | ot/button | Every page | Documented |
| Site header and mobile menu | ot/site-header | Every site page | Documented |
| Cover hero | ot/hero-cover | Home | Documented |
| Page hero (ivory, navy, photo) | ot/page-hero | Buy, Sell, Team, Journal, Wakefield, Article, Join, Office, Contact | Documented |
| Section head | ot/section-head | Home, Buy, Sell, Wakefield, Profile | Documented |
| Property search and quick filters | ot/property-search | Home, Buy | Documented |
| Results bar, saved count, sort | ot/results | Buy | Documented |
| Chip filter | ot/chip-filter | Journal | Documented |
| Skeleton and empty state | ot/results | Buy | Documented |
| Pagination | ot/pagination | Journal archive (when it grows) | Documented |
| Listing card | ot/listing-card | Home, Buy, Listing, Wakefield, Profile | Documented |
| Agent card and open seat | ot/agent-card | Home, Team | Documented |
| Agent profile, placeholders, action bar | ot/agent-profile | Brandon, Kaitlyn, agent template | Documented |
| Community card | ot/community-card | Home, Communities | Documented |
| Article card | ot/article-card | Home, Journal, Profile | Documented |
| Gallery, facts, spec table, agent mini | ot/listing-detail | Listing pages | Documented |
| Video and 3D tour, listing actions, payment estimate | ot/listing (media, actions, estimator) | Listing pages; agent profiles (introduction video) | Documented |
| Market statistics | ot/market-stats | Home, Market, Wakefield | Documented |
| Forms, choices, checkboxes | ot/inquiry-form | Buy, Sell, Listing, Profile, Join, Office, Contact | Documented |
| Tabs | ot/tabs | Contact | Documented |
| Alerts, toast, dialog, form status | ot/alert · ot/dialog | All forms; save actions | Documented |
| Triad, steps, pull quote, testimonial | ot/triad · ot/steps | Home, Sell, Profile | Documented |
| Pathways, promise band | ot/pathways · ot/promise | Home | Documented |
| Feature article, archive card, guide list | ot/publication | Journal, Article | Documented |
| History band, letter, on-this-page | ot/history · ot/letter | Wakefield, Join | Documented |
| FAQ accordion, breadcrumbs | ot/faq · ot/breadcrumbs | Sell; every inner page | Documented |
| CTA panel, newsletter, office card, map | ot/cta-panel · ot/office | Every site page; Office, Listing | Documented |
| Contact lines | ot/contact-lines | Contact | Documented |
| Footer and brokerage attribution | ot/site-footer | Every site page | Documented |