Coming Soon
in Dallas
in Dallas
Strong hero headlines, card subdivision names and major entrances.
A live visual directory of typography, colors, gradients, buttons, and pills configured in the theme, mapped to their specific contexts.
Current design direction rendered as working components and copyable CSS. Midnight is a controlled cool-navy family; Heritage Blue remains the signature historical accent. This lab is for selecting and documenting the system before any production rollout. v3.1.9 corrects the header glass architecture so its invisible sampling plane captures approaching photography before it passes under the visible navigation bar.
Changes photos only inside this private style-guide lab. Use direct image URLs to judge glass, scrims, status badges, and banners over real listings.
A cool Midnight family supplies the almost-black foundation. The brighter Heritage accent is intentionally a different blue family, preserving the RHA-connected signature without forcing teal into every dark surface.
#005EFF · conversion/electric#002F80 · glow/glass test#114775 · controls#0F4569 · gradient helper#218CCC · signature accent--sc-ink: var(--sc-midnight-13); /* #000C21 */ for the “not black, but our black” text on Ice and Paper surfaces. Use Midnight 07–20 as a controlled family according to depth; this avoids forcing one shade to do every dark job.#HEX format. Transparent glass, masks, shadows and scrims use rgba(...) with companion RGB-channel helpers only because their opacity is part of the recipe.
/* Steavy @ Compass / Current Token Direction v3.0 */ --sc-midnight-07: #000712; /* deepest ink / scrim endpoint */ --sc-midnight-10: #00091A; /* immersive canvas */ --sc-midnight-13: #000C21; /* selected ink / core dark surface */ --sc-midnight-15: #000E26; /* lifted dark surface */ --sc-midnight-20: #001232; /* photo-derived navy */ --sc-midnight-50: #002F80; /* cool glow / glass candidate */ --sc-midnight-100: #005EFF; /* electric conversion candidate */ --sc-deep-blue: #114775; /* branded controls */ --sc-bridge-blue: #0F4569; /* gradient helper only */ --sc-heritage-blue: #218CCC; /* signature / Heritage tint */ --sc-luxury-gold: #D4A84B; /* rare concierge detail */ --sc-vivid-emerald: #10B981; /* selected / confirmed / positive lifecycle */ --sc-ice: #E5F0F4; /* page canvas */ --sc-paper: #FFFFFF; /* readable surface */ --sc-ink: var(--sc-midnight-13); /* Alpha helpers: only for glass/scrim recipes that need variable opacity */ --sc-midnight-13-rgb: 0, 12, 33; --sc-midnight-50-rgb: 0, 47, 128; --sc-deep-blue-rgb: 17, 71, 117; --sc-heritage-rgb: 33, 140, 204; --sc-emerald-rgb: 16, 185, 129; --sc-paper-rgb: 255, 255, 255;
Three font jobs only: ZacbelX makes the entrance, CompassSans does the work, and CompassSerif signs the name.
Strong hero headlines, card subdivision names and major entrances.
Refined section headers and quieter editorial display moments.
A refined, highly readable system for facts, property descriptions, controls, labels, and app navigation.
Clean paper surface, Midnight 13 ink, and controlled tracking.
Large photo-overlay treatment shown with the heavier inline hero settings currently found in the listing template.
This is the single-listing main-title attitude: ZacbelX pushed beyond normal brand-map bold, very tight line-height, wide uppercase tracking, and a real photo-overlay shadow. Use it for hero words, subdivision/city title overlays, and rare high-impact section openers only.
/* Display / Hero Fat — Single Listing Main Title */ --sc-type-display-fat-family: "ZacbelX", "Montserrat", sans-serif; --sc-type-display-fat-weight: 900; --sc-type-display-fat-tracking: .17em; --sc-type-display-fat-line-height: .92; --sc-type-display-fat-transform: uppercase; --sc-type-display-fat-shadow: 0 6px 26px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.38);
/* Typography Roles */ --font-display-bold: "ZacbelX", sans-serif; /* weight: 800; major hero/display headers */ --font-display-medium: "ZacbelX", sans-serif; /* weight: 500; quieter display headings */ --font-ui: "CompassSans", sans-serif; /* body, facts, navigation, controls */ --font-identity: "CompassSerif", serif; /* Steavy / Presented by / Listed by only */ --text-ink: #000C21; /* Midnight 13: our not-black ink */ /* Special display token */ --sc-type-display-fat-family: "ZacbelX", "Montserrat", sans-serif; --sc-type-display-fat-weight: 900; --sc-type-display-fat-tracking: .17em; --sc-type-display-fat-line-height: .92; --sc-type-display-fat-transform: uppercase;
The public property world is editorial. The tour experience is immersive. Concierge tools may carry rare gold detail. They share tokens without being identical.
Ice canvas, Paper reading panels, Midnight 13 ink, refined Deep Blue action.
Midnight 10 canvas, glass controls, vivid photography, Emerald selections.
Night-mode discovery with specialty gold accents only where details deserve ceremony.
Good Eats/* Interactive Shape System */
.badge { border-radius: 5px; } /* informational only */
.pill { border-radius: 999px; } /* elongated interactive control */
.button { border-radius: 7px; } /* primary/submission action */
.icon-button {
width: 44px; height: 44px;
border-radius: 999px;
background: #114775; /* solid icon/control */
color: #FFFFFF;
}
.icon-button--glass {
background: rgba(33,140,204,.37);
border: 1px solid rgba(33,140,204,.69);
backdrop-filter: blur(5.2px);
}
Restored from the earlier studio: the ghost drum is a signature app interaction, while the concierge POI drum keeps Gold rare and meaningful.
/* Ghost Drum / Selected App Rail */ background: rgba(33,140,204,.31); border: 1px solid rgba(33,140,204,.72); backdrop-filter: blur(5.2px); -webkit-backdrop-filter: blur(5.2px); border-radius: 999px 0 0 999px; /* Concierge POI / Specialty Detail */ color: #D4A84B; /* Luxury Gold: rare map/discovery moment only */
Property-first photography stays clean. Lifecycle glass identifies the moment; the data banner frames information without swallowing the photo.
/* Listing Card Information Banner / Live Candidate */ background: radial-gradient(circle at 78% 22%, rgba(33,140,204,.12), transparent 34%), linear-gradient(180deg, #000C21 0%, #000712 100%);
/* HDR / Photo Enhancement / Natural Lift */
.photo-layer {
filter: saturate(1.10) contrast(1.08) brightness(1.02);
-webkit-filter: saturate(1.10) contrast(1.08) brightness(1.02);
}
This is the actual lead-capture design language: Navy Wash over the listing photo, a deep translucent form card, and a bright conversion-only CTA. The second frame shows the related hero/address treatment as a visual bridge to the card-rail experiment.
/* Tour Login / Sign-In Navy Wash / Active Token-Aligned Reference */
.start-page-overlay {
background:
radial-gradient(ellipse at 30% 30%, rgba(var(--sc-deep-blue-rgb), .45) 0%, rgba(var(--sc-midnight-13-rgb), .78) 100%),
linear-gradient(to bottom, rgba(var(--sc-midnight-13-rgb), .25) 0%, rgba(var(--sc-midnight-13-rgb), .80) 100%);
}
.welcome-badge {
background: rgba(var(--sc-heritage-rgb), .37);
border: 1px solid rgba(var(--sc-heritage-rgb), .69);
backdrop-filter: blur(5.2px);
}
.glass-card {
background: rgba(var(--sc-midnight-13-rgb), .76);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(var(--sc-ice-rgb), .16);
}
The clean-photo alternative to the full lower banner: a masked pseudo-element now fades the transparent tint and the backdrop blur together, so the rail dissolves into clear photo instead of stopping at a glass rectangle.
Use decision: both candidates now test the exact “blur dissipates into clarity” idea. Candidate A masks blur out toward the right edge of the address rail; Candidate B masks the full shelf tint and blur out toward the clear upper photo so its top edge does not read as a hard banner line.
Compare photographic lens blur layers against Glass-Only backdrop blur: both can dissolve at the focus boundary, but Glass-Only blurs the live photo underneath without rendering a duplicate image layer.
Depth distinction: Single and Progressive modes render one or two blurred copies of the photograph for a camera-lens look. Use Copy Spread to pull the enlarged duplicate layers back toward the base photo; 0px registers the roofline exactly. Glass-Only adds a transparent masked backdrop-filter layer over the sharp photo, so the blur dissolves into clarity without duplicating the photo.
Reference translation: the CodePen glass-tilt example uses a pseudo-element with backdrop-filter: blur(5px) plus a linear mask, matching our Glass-Only method. The classic Design Shack tutorial stacks a blurred image over a sharp background copy and masks the blurred image, matching our Single Masked Blur approach. Source references: CodePen CSS Tilt Shift · Design Shack Tilt Shift.
Sticky navigation should feel like real glass catching the page as it approaches. The corrected nearby-sampling method uses a hidden 200% blur plane beneath the visible header and masks away its overflow: the roof, sky, or photo color can reflect upward into the navigation before crossing its lower edge. Heritage is shown at Steavy's preferred starting values; Deep Blue remains a quieter candidate.
Corrected nearby reflection capture: the main backdrop is the effect-maker: a hidden 200% filtered plane reaches into the photo below while its lower half remains invisible. Glassy Edge Thickness can stay at 0px; the upward reflection still occurs. Edge Blur Radius only tunes the optional thin lower seam when a visible edge is added. Reference inspiration: Josh W. Comeau · Next-level frosted glass.
Tune a single glass recipe live, then judge it on a Pill, Icon Button, selected toast, and caption/title bar overlay. Official colors remain HEX tokens; transparency recipes display RGBA because opacity is part of the material. Lifecycle badges remain lower-blur exceptions.
/* Badge / Lifecycle Status / Coming Soon / Heritage Glass */ background: rgba(33,140,204,.51); border: 1px solid rgba(33,140,204,.69); box-shadow: 0 4px 30px rgba(0,0,0,.10); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); color: #FFFFFF; border-radius: 999px; /* Badge / Lifecycle Status / Now Active / Emerald Glass */ background: rgba(16,185,129,.58); border: 1px solid rgba(16,185,129,1); box-shadow: 0 4px 30px rgba(0,0,0,.10); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); color: #FFFFFF; border-radius: 999px;
Use Heritage as the lit signature moment, Deep Blue as the usable branded control, Bridge only when a transition needs quiet complexity, and the Midnight family for depth.
linear-gradient(135deg, #218CCC 0%, #114775 48%, #000712 100%)
linear-gradient(180deg, #114775 0%, #000C21 56%, #000712 100%)
linear-gradient(135deg, #218CCC 0%, #0F4569 50%, #000712 100%)
linear-gradient(135deg, #007AFF 0%, #0055D4 100%)
linear-gradient(135deg, #005EFF 0%, #114775 100%)
Checked against the earlier Brand Studio, Gradient Studio, Lifecycle Glass, Card Surface and Midnight Comparison files. This is the working inventory of design tests carried forward.
| Earlier Lab Tool / Example | Status in Current Library | Where It Lives Now |
|---|---|---|
| Experience Modes: Editorial, Dark App, Concierge | Included | Experience Modes + Control Language |
| Palette / Blue Role Comparison | Upgraded | Midnight 07–100 family, Deep, Bridge, Heritage, Gold, Emerald |
| Light / Dark Pills, Buttons and Icon Samples | Included | Control Language |
| Drum Selector Baselines | Restored | Ghost Drum + Concierge POI Drum |
| Gradient Recipe Picker + Custom Tuning | Merged | Gradient Builder + Preset Recipes |
| Lifecycle Glass Badge Tuning | Restored | Photography + Lifecycle Cards |
| Named Glass Material Family | Added | Arctic Glass, Arctic / Heritage Tint, Deep Blue Glass, and Midnight Frost recipe cards |
| 4:3 Photo Card Baseline | Standardized | All active photography test frames now render at 4:3 |
| Address Glass Rail + Gradient Shelf Surface Test | Upgraded | Card Overlay Rail Lab: masked blur dissolve rail and masked blur-dissolve Gradient Shelf |
| HDR + Radial / Blend / Hero Scrim Tests | Upgraded | Photography + Lifecycle Cards with Natural Lift and Super HDR photo-layer study presets |
| Sign-In Navy Wash + Tour Login Glass Card | Restored | Photography + Lifecycle Cards / Tour Login Reference |
| Zacbel Extrabold vs Medium Weight Comparison | Restored | Typography |
| Selective Edge / Tilt-Lens Blur Study | Upgraded | Selective Focus / Blur Gradient Lab with duplicate-photo spread controls plus Glass-Only backdrop blur |
| Header Navigation Glass Lab | New Test | Sticky Heritage/Deep Blue glass header with enhanced nearby sampling and glass-edge study over scrollable photo and Paper sections |
| Single-Listing Main Title Token | Defined | Display / Hero Fat token for super-heavy, tracked ZacbelX title moments |
| Old Click-to-Shortlist Utility | Historical | Not an active design treatment; preserved in the diary below rather than steering current tokens. |
Consistency by experience mode, not one radius or one blue terrorizing every page.
| Context | Recommended Foundation | Controls + Restrictions |
|---|---|---|
| Editorial Property Page | Ice canvas, Paper content panel, Midnight 13 ink. | Restrained Button or quiet Badge. Protect photography; avoid glass reading panels. |
| Coming Soon Grid | Clean 4:3 photo, Radial Card Scrim, Midnight banner family. | Compare full data banner against experimental Address Glass Rail; Heritage Glass Badge; Emerald only for the Now Active lifecycle transition. |
| Tour Sign-In | Sign-In Navy Wash photo overlay + Midnight glass form card. | Bright Start Tour CTA may remain electric; ZacbelX title at 800; address/UI stay readable and restrained. |
| Open House Builder | Dark App Luxury or bright map context. | Pills + Icon Buttons; Emerald = selected/confirmed only. |
| Clipboard Tour App | Midnight canvas with Clipboard Blend photo treatment. | Glass controls, glass toast, vivid interaction moments. |
| Ex-Map / Concierge | Midnight 07–10 with atmospheric Heritage glow. | Luxury Gold for POIs and rare discovery accents only. |
| Future Hero/Search | Photography-first with carefully tested glass. | Arctic/neutral glass or selective-focus blur may be tested; do not glassify or blur every photo by default. |
Note: The following sections document the historical creative process, earlier component definitions, and previous shortlists. This content is preserved as a diary and may contain superseded thinking. For current governing styles and CSS recipes, refer to the Current Brand Asset Library above.
This is body text rendered in CompassSans. It is optimized for small size readability, used across commute details, property specs summaries, and footnote details (Regular).
Used as primary utility typeface for inputs, labels, and map overlays.
Gold is a functional accent — used for tier markers, achievement badges, and data visualization on the EX Map. It’s not a brand color. Compare the current gold against three alternatives that better complement the navy/blue palette.
Heritage Blue (#218ccc) is energetic but grounded (Saturation: 72%, Lightness: 46%). Neon Mint (#16C98D) is slightly more saturated and lighter, giving it that "startup" pop. Below are options that try to capture the exact energy of Heritage Blue, but in green.
The current Ice (#E5F0F4) has a slight cyan/green undertone (196° hue). Since our core brand is built on true blues (202°–205°), shifting the Ice hue slightly will make it sing in perfect harmony with Heritage and Steavy Navy.
The current font colors rely heavily on default Tailwind values (slate-900, slate-500) and an orphaned "Deep Blue" (#0e4f73). The proposed system eliminates those and pulls exclusively from your core luxury palette, ensuring perfect harmony between backgrounds, buttons, and text.
Every premium brand runs on 5 colors or fewer. More than that and you’re not curating — you’re guessing. Here are the five that tell your story.
These colors currently exist across your codebase but create visual noise. Consolidating them into the 5-color core palette above will make your brand feel 10× more intentional.
Gradients are your brand in motion. They should tell a story, not just fill space. Three is enough to cover every context; more than three is chaos.
A luxury brand never uses 4 typefaces. Three is the maximum: one for display (the thing that stops you), one for interface (the thing that guides you), and one for reading (the thing that informs you). Every additional font dilutes the system.
Compass provides a Serif font for agent names and identity-level text. You already have it loaded (CompassSerif Bold + Regular). The question is: does it earn a spot in your system? Below are three contextual mockups showing where it would live.
These are rendered using your actual loaded font files — not AI approximations. Compare the stroke endings, the “y” descender, the “g” shape, and how each pairs with ZacbelX.
border-radius: 50px) are the universal marker of luxury digital design. Square or slightly-rounded buttons feel utilitarian — they say “enterprise software.” Pill buttons say “boutique.”border-radius: 4px, 6px, 8px, and 50px. That inconsistency is one of the biggest “MySpace” tells — standardize to 50px and the entire UI instantly feels cohesive.
Right now your glass treatments vary: some cards use rgba(255,255,255,0.06), some use 0.08, some blur at 6px, some at 12px. These tiny inconsistencies add up. A client can’t articulate why something feels “off” — they just feel it. One recipe. Everywhere.
A quick-reference table for every element in the current inventory. KEEP MERGE RETIRE EVOLVE
| Element | Current Use | Verdict | Action |
|---|---|---|---|
| #004a75 | Buttons, card borders, primary CTAs | KEEP | Promote to PRIMARY. Absorb #005485, #1e4d74, #0e4f73. |
| #218ccc | Map POI, travel headers, banner | PROMOTE | Elevate to SIGNATURE ACCENT. Hovers, links, gradient starts, active states. |
| #001524 | Tour Start background | KEEP | Sole dark background. Absorb #001524. |
| #E5F0F4 | Homepage body wrap | KEEP | Light mode page canvas. Never use flat #fff for page backgrounds. |
| #15803d | Active / Now Active badges | KEEP | Universal “active / go” signal. No change needed. |
| #005485, #1e4d74, #0e4f73 | Various near-duplicate navies | MERGE | All → #004a75. Imperceptible visual difference. |
| oklch(0.5 0.28 270) | graffiti.css theme token | RETIRE | Browser support risk. Replace with #004a75 hex. |
| #007aff / #0055d4 | Tour Start submit gradient | RETIRE | Apple system blue = “default.” Replace with Heritage Flow gradient. |
| ZacbelX | Hero titles, overlays | KEEP | Display only. Never below 1.2rem. |
| CompassSans | UI elements, buttons, specs | KEEP | Primary UI font. Takes over all Montserrat duties. |
| Inter | Body text, descriptions | KEEP | Long-form reading. Descriptions, disclaimers, system text. |
| Montserrat | Map buttons, inputs, filters | RETIRE | Most-used free font = “template energy.” Replace with CompassSans. |
| Button Radius | Mixed (4px, 6px, 8px, 50px) | STANDARDIZE | All buttons → 50px (pill). Circle actions stay 50%. |
| Card Radius | Mixed (10px, 12px, 16px, 20px) | STANDARDIZE | Cards → 16px. Modals → 20px. Badges → 999px. |
| Verdict Pills | Green/Yellow/Orange/Red gradients | KEEP | Color-coded feedback is functional, not decorative. This is the right kind of playful. |
| Card Body Gradient | #005485 → #004a75 (invisible) | EVOLVE | Replace with Heritage Flow (#218ccc → #004a75). Make it a brand statement. |
These represent the current selections and definitions. They are organized by approval status and contextual constraints.