Brand Foundations
The strategic backbone. Every design decision flows from these principles.
Premium Accessible
The work is premium. The experience of working with Connesso is accessible, transparent, and collaborative. Clients never feel talked down to or overwhelmed by jargon.
Home Experience Design
Technology designed alongside architecture, not retrofitted. We design home experiences where technology serves life, not the other way around.
A confident peer. Not a salesperson. Not an unapproachable expert. Someone who explains things clearly and respects your time.
Direct, warm, specific. Lead with benefits, not features. Use concrete language over abstract claims. Avoid jargon.
90% warm neutrals. 10% gradient or Connect blue. This ratio maintains the premium feel across all touchpoints.
Technology disappears. Photography shows how homes feel, not what technology they contain. The home is the hero.
Building or renovating. Want technology that works beautifully without requiring a manual.
Need a technology partner who shows up on time, coordinates with trades, and makes their projects better.
Want a technology partner that respects design intent and integrates invisibly.
Connesso Design System
Version 2.0 — A design system for a luxury home experience design company. The brand gradient is the signature. Night anchors everything. Technology disappears into architecture.
Home experience designer. Technology designed alongside architecture, not retrofitted.
A confident peer who speaks plainly, shows their work, and lets quality speak. Direct, specific, warm.
Logo
The Connesso mark — brush-stroke circle with the brand gradient — appears alongside the wordmark. The gradient (Active → Connect) is the logo's signature and should never be altered.
Mark: 24px height. Full logo: 100px width. Maintain clear space equal to the mark's diameter on all sides.
Black text on light surfaces (#F7F4F0, #FFFFFF). White text on dark surfaces (#164159, #0D2738). The gradient mark stays constant on both.
Alter the gradient colors. Place on busy photography without a scrim. Rotate, stretch, or add effects. Separate the mark from the wordmark at small sizes.
The primary gradient (Active #00F996 → Connect #00A3FC) is Connesso's most distinctive visual element. Use it for: logo mark, primary CTA buttons, accent lines, active states, and section dividers. The dark gradient (Night → Shade) is used for hero sections and atmospheric backgrounds.
Color Palette
Six named brand colors plus gradients. Night (#164159) anchors the system. The gradient is the signature. Warm neutrals provide the luxury foundation. Click any swatch to copy.
GRADIENT
*600 = Night. The anchor of the system.
*500 = Connect. Links, CTAs, interactive elements.
LIGHT
DARK
Dark mode backgrounds use Night-derived tones — warm charcoal, not pure black. "A room at dusk."
| Foreground | Background | Ratio | AA Normal | AA Large |
|---|---|---|---|---|
| Night (#164159) | White (#FFFFFF) | 9.4:1 | Pass | Pass |
| Night (#164159) | Surface BG (#F7F4F0) | 8.6:1 | Pass | Pass |
| White (#FFFFFF) | Night (#164159) | 9.4:1 | Pass | Pass |
| Connect (#00A3FC) | White (#FFFFFF) | 2.9:1 | Fail* | Pass |
| Connect-700 (#006297) | White (#FFFFFF) | 5.6:1 | Pass | Pass |
| White (#FFFFFF) | Connect (#00A3FC) | 2.9:1 | Fail* | Pass |
| White (#FFFFFF) | Shade (#1057C8) | 6.2:1 | Pass | Pass |
| Text Primary (#1E1C19) | White (#FFFFFF) | 16.2:1 | Pass | Pass |
| Text Secondary (#5C564E) | White (#FFFFFF) | 5.8:1 | Pass | Pass |
| #F0EDEA | Dark BG (#0F1A22) | 14.8:1 | Pass | Pass |
*Connect blue (#00A3FC) doesn't meet AA for small text on white. Use Night or Connect-700 for body text links. Connect blue works for buttons (white text on blue bg at large size) and graphic elements.
Typography
DM Serif Display for editorial headlines (web). Inter for body and UI. Sora for marketing display. Print uses ITC Clearface Pro (serif) + Sora + Inter.
fully realized
Spacing & Radius
8px base grid. Named tokens from xs (4px) through 4xl (96px).
Components
Key component previews showing how brand colors and gradient integrate. The gradient appears strategically — CTA buttons, accent lines, active indicators — not everywhere.
Your home, fully realized
We design, integrate, and support the technology systems that make extraordinary homes feel effortless.
- Background
- Night (#164159) with subtle radial glows from Connect and Active at low opacity (8-15%). Never a full gradient background.
- Gradient usage
- Primary CTA button. Eyebrow/label text in Active green. The glow effect hints at the brand gradient without making it a "tech" background.
- Gradient CTA
- The brand gradient as button background. White text. Hover: brightness(0.9) overlay + glow shadow rgba(0,163,252,0.3). Reserved for the single most important action on a page.
- Solid Primary
- Connect blue (#00A3FC) background. White text. Hover: Connect-600. For secondary CTAs.
- Secondary
- Night outline. Hover: Primary-50 fill. On dark backgrounds: white outline.
- Focus ring
- 2px Active green (#00F996) ring, offset 2px. High visibility, on-brand.
Light & Shade
Circadian lighting, motorized shading, and scene control that adapts to your day.
Explore →Sound & Screen
Distributed audio, dedicated theaters, and media rooms designed for the space.
Explore →Control & Network
Unified automation and enterprise-grade networking that everything depends on.
Explore →Discovery
We learn how you live, what you value, and what your home needs to do for you.
Schematic Design
We embed with your architect and builder before ground breaks.
Installation
Executed with precision. Coordinated with every trade on site.
Ongoing Care
Remote monitoring, priority support, system evolution.
Default (surface-5) and gradient accent (editorial punctuation between sections)
Layout Patterns
12-column desktop, 8 tablet, 4 mobile. Max content 1200px. Breakpoints: 375 / 768 / 1280 / 1440.
Homepage
- Hero (video/image, Night bg, gradient CTA)
- Service categories (card grid)
- Stats bar
- Process steps
- Featured projects (3 cards)
- Testimonial
- Comparison block
- Partner logos
- CTA section
- Footer
Service Category
- Hero (category image)
- Category nav pills
- Overview (body-lg)
- What's included
- Project gallery
- FAQ accordion
- Related categories
- CTA section
- Footer
Project / Case Study
- Hero image (full-bleed)
- Project metadata (badges)
- Narrative text
- Photo gallery (masonry)
- Before/after slider
- Systems list
- Testimonial
- Related projects
- CTA
- Footer
Animation & Accessibility
Default: cubic-bezier(0.4, 0, 0.2, 1)
Entrance: cubic-bezier(0, 0, 0.2, 1)
Exit: cubic-bezier(0.4, 0, 1, 1)
Micro: 100ms (hover color)
Fast: 200ms (button states)
Normal: 300ms (panels)
Slow: 400ms (modals)
Large: 500ms max (hero reveals)
4.5:1 text contrast min
44x44px touch targets
16px min body text
Visible focus: 2px Active green ring
prefers-reduced-motion respected
Skip-to-content link
Visible form labels always
Parallax. Bounce/elastic easing. Spinning loaders. Auto-play carousels (except homepage hero, 8s). Anything over 500ms. Anything that delays content.
Print Specifications
Color values, typography, and material specs for all physical brand touchpoints. Full details in print-specifications.md.
| Color | HEX | Pantone | CMYK |
|---|---|---|---|
| Connect | #00A3FC | PMS 2925 C | 80, 25, 0, 0 |
| Active | #00F996 | PMS 353 C | 55, 0, 60, 0 |
| Shade | #1057C8 | PMS 2728 C | 90, 60, 0, 0 |
| Night | #164159 | PMS 7477 C | 90, 45, 30, 55 |
| Dusk | #D9C9A8 | PMS 4545 C | 12, 15, 30, 0 |
| Rich Black | N/A | N/A | 40, 30, 20, 100 |
The canonical brand serif. Used for all print headlines, proposal titles, brochure covers, and signage. 48–72pt display, 32–40pt H1.
Sub-headlines, callout text, pull quotes. Medium and SemiBold weights. 16–20pt for print H3/H4 levels.
All body copy, captions, legal text, tables. 10–11pt body, never below 8pt. 45–75 characters per line for readability.
Cotton/uncoated, 350gsm, soft touch matte. Night front, white back, gradient bottom edge.
Coated matte, 148gsm interior, soft-touch covers. Night cover, gradient mark, Clearface headlines.
Night base, white logo 18"+, gradient rocker stripe. Minimal text, readable at 50+ feet.
Jobsite: Night background, white logo, gradient bottom strip. Office: dimensional lettering, backlit gradient mark.
Photography Direction
Show how a home feels, not what technology it contains. Full guide in photography-direction.md.
Warm. Never cold, clinical, or sterile. Color temperature 3500K–4500K.
Lit from within. Homes glowing with warm interior light, often at dusk or twilight.
Architectural. Lines straight, angles intentional, respecting the architect's intent.
Lived in. Subtle signs of life. Not a model home. Not staged to perfection.
Hero / Lifestyle — Wide, twilight exteriors and warm interiors. 4000px+ minimum.
Architectural Detail — Tight on integrated technology: flush keypads, hidden speakers, shade pockets.
Process — Team at work: planning sessions, pre-wire, rack builds. Candid, documentary style.
Team Portraits — On location, environmental, warm light. No white-backdrop headshots.
Before & After — Same angle, same lens. Bare walls to finished space. The complexity disappears.
No visible brand logos on equipment in hero shots. No stock photography. No HDR over-processing.
No people looking at cameras in lifestyle shots. No empty, sterile rooms. No technology-forward compositions.
No heavy vignetting. No daylight-only portfolios (twilight is essential). No cluttered compositions.
Brand Pattern Usage
The gradient is the signature. Use it as punctuation, not decoration. Full guide in brand-pattern-usage.md.
2–4px thickness. Section dividers, headline underlines, footer accents, card bottom edges. Maximum one per visible section. Always horizontal: Active → Connect (green to blue, left to right).
8–24px on screen, up to 6" on vehicle wraps. Always full-width of its container. Used for vehicle accents, trade show borders, large format signage.
Minimum 24px / 18pt. Maximum one per page. Only on display text (H1/H2+). Only on light backgrounds. Never on body copy.
8–48px. Active state indicators, bullets in feature lists, step indicators. Use sparingly: 3 or fewer per section. Never larger than 48px (competes with logo).
Horizontal: Left → Right
Diagonal: 135° (top-left → bottom-right)
Vertical: Top → Bottom
Active (green) always comes first in the reading direction. Never reverse the gradient.
Design Tokens
Copy-ready CSS variables. See companion files: connesso-tokens.css, connesso-tokens.json.
connesso-tokens.css (key values)
:root {
/* Brand Colors */
--brand-connect: #00A3FC;
--brand-active: #00F996;
--brand-shade: #1057C8;
--brand-night: #164159;
--brand-dusk: #D9C9A8;
--brand-white: #FFFFFF;
/* Brand Gradients */
--gradient-primary: linear-gradient(135deg, #00F996, #00A3FC);
--gradient-dark: linear-gradient(135deg, #164159, #1057C8);
--gradient-secondary: linear-gradient(135deg, #C8E6F5, #E0F0F8);
/* Surfaces (warm linen, not pure white) */
--surface-bg: #F7F4F0;
--surface-1: #FFFFFF;
--surface-3: #EFEBE5;
--surface-5: #DBD5CC;
/* Dark Mode Surfaces (Night-derived, room at dusk) */
/* --surface-bg: #0F1A22; */
/* --surface-1: #152029; */
/* Text */
--text-primary: #1E1C19;
--text-secondary: #5C564E;
--text-muted: #7D776D;
--text-inverse: #F5F3F0;
/* Typography */
--font-serif: 'DM Serif Display', 'ITC Clearface Pro', Georgia, serif;
--font-sans: 'Inter', 'Sora', -apple-system, sans-serif;
/* Spacing (8px grid) */
--space-xs:0.25rem; --space-sm:0.5rem; --space-md:1rem;
--space-lg:1.5rem; --space-xl:2rem; --space-2xl:3rem;
--space-3xl:4rem; --space-4xl:6rem;
/* Animation */
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 200ms;
--duration-normal: 300ms;
}
connesso-tokens.json (key values)
{
"brand": {
"connect": "#00A3FC",
"active": "#00F996",
"shade": "#1057C8",
"night": "#164159",
"dusk": "#D9C9A8",
"white": "#FFFFFF",
"gradient": {
"primary": "linear-gradient(135deg, #00F996, #00A3FC)",
"dark": "linear-gradient(135deg, #164159, #1057C8)"
}
},
"surface": {
"light": { "bg": "#F7F4F0", "1": "#FFFFFF", "3": "#EFEBE5" },
"dark": { "bg": "#0F1A22", "1": "#152029", "3": "#23333F" }
},
"spacing": {
"xs":"4px","sm":"8px","md":"16px","lg":"24px",
"xl":"32px","2xl":"48px","3xl":"64px","4xl":"96px"
}
}