Blend Bar The Woodlands
Style Guide · Colors · Typography · Components · Voice
01Positioning
A premium cigar lounge, craft cocktail bar, and chef-driven dining destination in The Woodlands, TX. The brand visual world is built on three feelings: refined, intentional, and warm. Dark, low-lit, and patient — never loud.
Premium without being cold or stuffy. Welcoming without losing the elevated edge. Think after-hours speakeasy, not country club.
Short sentences. Sensory verbs. No marketing fluff or stacked adjectives. Speak to a guest who already knows quality and doesn't need to be sold.
Pacing matters. Reveal, don't shout. Animations are subtle (ember particles, beam pulse, smoke layers). White space is intentional.
02Colors
The palette is built around a deep blackened base, a creamed-paper text color, and a gradient of golds that drive every accent, headline, and CTA. Leather tones appear as supporting warmth in backgrounds and dividers.
Core Black & Cream
Gold Family — The Hero
Leather — Supporting Warmth
Neutral Gray Scale
03Typography
Two typefaces, used with discipline. Playfair Display carries every headline. Inter handles everything else — body, buttons, eyebrows, captions.
Type Scale
Inter Weight Variants
04Signature Elements
The visual elements that, used together, make a page feel like Blend.
Every Detail Tells a Story
05Spacing & Shape
A consistent rhythm. Spacing scales geometrically. Border radii are restrained — never round-as-circle except for icons.
Spacing Scale
Border Radius
06Motion & Atmosphere
Animation is felt, not seen. Movement should feel like breath — slow, subtle, suggesting the space rather than performing.
A canvas-based ember particle system drifts upward continuously across most pages, with optional textured smoke plume layers behind hero sections. Reduces motion automatically for users with prefers-reduced-motion.
A slow-pulsing vertical light shaft runs the height of major hero sections. Frames the centered content without becoming a hard edge — soft radial glows on either side.
Hovers fast (150ms). State changes base (300ms). Reveal-on-scroll slow (600ms+). Always ease — never linear, never bounce.
07Logos & Marks
The Blend wordmark and its variants. Unified June 8, 2026 — the default web wordmark and gold-print wordmark share a single piece of artwork rendered in #a8884f (B-deep, matches --color-gold-deep). No black interior, no remnants, no gradient. Use the right file for the right surface — gold for default, white knockout for dark photo overlays, black knockout for light photo overlays or single-color print. Print-quality 4000px master + SVG vector + full 6-resolution knockout set in brand-assets/wordmark/.
Knockout Variants — Photo Overlays & Single-Color Print
Single-color silhouettes for use when gold would compete with imagery or when a 1-color print is required (newspaper, foil emboss, screen-print). All files in brand-assets/wordmark/ at 4000/2000/1024/512/256/140 px.
Square Marks — Avatars, Favicons, App Icons
Derived from the wordmark's heraldic seal, reduced to a clean 2-color form (brand gold + background). Use the right variant for the surface — black for default avatars, cream for printed-on-light, transparent for overlays.
Full square wordmark (seal + BLEND) — same three backgrounds — also available as blend-square-wordmark-{black|white|transparent}.png for square avatar contexts where the wordmark still reads clearly (≥ 120px). Below that size, prefer the seal-only versions.
Clear Space & Minimum Size
Clear space on all sides equals at least half the logo's height. No text, icons, or images encroach.
Minimum size on screen: 120px wide for the wordmark; 40px for the square mark.
Minimum size in print: 1.25" wide for the wordmark; 0.5" for the square mark.
Don't
08Letterhead & Stationery
For business correspondence, contracts, formal printed communication. Cream paper background, gold-print logo at top, contact block at bottom — anchored by the same gradient accent line used across the brand.
Body of the letter goes here — left-aligned, Inter regular, 1.7 line-height. Keep paragraphs short, voice restrained.
8.5" × 11" · 0.75" margins all sides · Logo at 2.5" wide top-centered · Footer text in 7pt Inter · Cream paper (#F5F0E8 equivalent) or white with cream tint · Print at 300dpi.
09Business Card
Standard 3.5" × 2" US card. Two-sided: front shows the wordmark on black, back shows the gold-print wordmark + contact details on cream. Premium 16pt or 32pt stock with soft-touch lamination recommended.
3.5" × 2" with 0.125" bleed · 32pt soft-touch suede stock recommended · Front: matte black with optional spot gloss on the mark · Back: cream with gold foil stamp on logo for top-tier members/executives, full-color print for standard.
10Email Signature
A short, on-brand sign-off for staff. Paste the HTML below into Gmail / Workspace signature settings. Renders cleanly in Apple Mail, Outlook, Gmail, and most clients.
|
|
Bethany Hartley
Event Liaison
events@blendthewoodlands.com · (832) 791-3050
www.blendthewoodlands.com · 1701 Lake Robbins Dr, The Woodlands, TX |
Swap name + role per staff member. Don't add quotes, taglines, or external promotional copy. Keep social/yelp/google links OFF the signature — email isn't the place. The vertical gold rule is brand-critical; preserve it on every variant.
11Photography & Imagery
Imagery is moody, low-lit, intentionally shallow. Warm light, cinematic depth-of-field, hands-in-frame, partial product crops. Never bright, never overlit, never stocky.
- Warm amber + tungsten lighting
- Shallow DoF — single subject in focus
- Hands holding glasses, cigars, plates
- Bar surfaces, leather, dark wood, brass
- Steam, smoke, condensation, candlelight
- Negative space — let the subject breathe
- Overhead daylight or fluorescent
- Everything tack-sharp / flat-lay overhead unless minimalist
- Stock-looking groups of laughing models
- Bright primary colors that fight the palette
- Heavy filters, Instagram presets, oversaturation
- Wide-angle distortion that flattens the room
12Iconography
Sparse and intentional. The diamond glyph is the one piece of decoration that appears in lists. SVG icons used in social/footer/nav stay monochrome cream or gold — never colored.
13Brand Applications
Quick rules for the major surfaces. Each surface should feel like the same brand even though the medium is different.
Dark base, gold accents, generous whitespace. Hero videos with overlay vignette. Ember particles always on (respect reduced-motion). Gradient headlines on h1 only.
Cream paper, gold-print logo, two-column layout for spirits/beverages, single column for food. Generated from menu-data.json via display-system/print.html — never hand-typeset.
Same menu-data.json source, displayed via display-system/tv.html. Slow rotation, no animation noise. Dark background, gold headers, cream item names.
Square mark as the profile picture across all platforms. Posts mirror the brand voice — short, sensory, restrained. Imagery follows §11. Avoid carousels of stock content; one curated shot beats five mediocre ones.
Wordmark in cream on dark backgrounds, or gold-print mark on cream/white. Brass or warm metal hardware preferred. Never colored backlighting that competes with gold.
Use the staff signature template (§10). Subject lines start with the relevant context ("Reservation:", "Event Inquiry:", "Blend Update:") — never marketing-shouty. Newsletter design TBD; will match website typography when launched.
14Stack & Files
Reference for anyone touching the source.
HTML5 · CSS3 · Vanilla JS (ES6+) · JSON for menu data. No framework, no build step, no preprocessor.
Beta: blendv3.projectaivenue.com via Cloudflare Tunnel → DGX Spark.
Prod: www.blendthewoodlands.com via GoDaddy hosting (FTP).
/home/aivenue/.openclaw/workspace/blend-v3/
Menu data: display-system/menu-data.json
Google Apps Script Web App → writes to Google Sheet → emails manager@blendthewoodlands.com. See admin/launch-runbook.md §11.