Visual Reference

Design System Showcase

Live rendering of the design system in action. Color swatches, gradient applications, typography hierarchy, button states, card components, and dark mode surfaces.

Version 1.0 · February 2026 · Internal Use Only

Brand Colors

Click any swatch to copy the hex value. The gradient (Active → Connect) is the brand's signature.

CONNECT
Connect
HEX: #00A3FC
RGB: 0, 163, 252
CMYK: 80, 25, 0, 0
PMS: 2925 C
ACTIVE
Active
HEX: #00F996
RGB: 0, 249, 150
CMYK: 55, 0, 60, 0
PMS: 353 C
SHADE
Shade
HEX: #1057C8
RGB: 16, 87, 200
CMYK: 90, 60, 0, 0
PMS: 2728 C
NIGHT
Night — Anchor
HEX: #164159
RGB: 22, 65, 89
CMYK: 90, 45, 30, 55
PMS: 7477 C
DUSK
Dusk
HEX: #D9C9A8
RGB: 217, 201, 168
CMYK: 12, 15, 30, 0
PMS: 4545 C
WHITE
White
HEX: #FFFFFF
RGB: 255, 255, 255
CMYK: 0, 0, 0, 0
Paper white

The Gradient

Active (#00F996) → Connect (#00A3FC). The brand's most distinctive visual element.

Primary Gradient (135°)
Horizontal Gradient (90°)
Dark Gradient (Night → Shade)

Usage rule: Green (Active) always comes first in the reading direction. Never reverse the gradient. Use sparingly for maximum impact.

Typography

Three fonts: DM Serif Display (web headlines), Sora (marketing display), Inter (body/UI).

Display XL — DM Serif Display
72px / 400 / 1.05 line-height / -0.02em tracking
Your home, fully realized
Display LG — DM Serif Display
56px / 400 / 1.1 / -0.015em
Technology designed alongside architecture
H1 — DM Serif Display
44px / 400 / 1.15 / -0.01em
Light & Shade
H2 — DM Serif Display
36px / 400 / 1.2 / -0.005em
How we work with your builder
H3 — Sora
24px / 600 / 1.3
Schematic design integration
H4 — Sora
20px / 600 / 1.35
Columbus & Raleigh
Body Large — Inter
18px / 400 / 1.65
We join your project during schematic design, not after framing. That means conduit is planned before drywall, speaker locations are coordinated with ceiling details, and shade pockets are built into the architecture.
Body — Inter
16px / 400 / 1.6
65% of architects and builders report difficulty with smart home planning. We solve that by embedding with your design team from day one.
Caption — Inter
14px / 400 / 1.5 / +0.01em
New Albany, Ohio — Completed 2025 — Light & Shade, Sound & Screen

Component Examples

Key UI components with the brand applied.

Service Card

Light & Shade

Automated lighting and motorized shading tuned to how you live.

Learn more →

Pattern Elements

The gradient as punctuation, not decoration. Use sparingly.

Gradient Line

2-4px height, 80-120px wide. Section dividers, headline underlines.

Gradient Stripe

8-24px height, full-width. Vehicle wraps, trade show borders.

Realized
Gradient Text

Minimum 24px. Display text only. Light backgrounds only.

Print Specifications

For print production: business cards, proposals, signage, vehicle wraps.

Rich Black Build

Never use 100K alone for large dark areas. Use this rich black build:

C40 M30 Y20 K100

Print Fonts

  • ITC Clearface Pro — Headlines & display
  • Sora — Marketing sub-headlines
  • Inter — Body copy & captions

Paper Stocks

  • Business Cards: Cotton/uncoated, 350gsm, soft touch
  • Proposals: Coated matte, 148gsm, soft-touch covers
  • Signage: Vinyl or fabric, matte finish

Complete Documentation

All design system files are in /design-system/

brand-foundations.md — Brand strategy, voice, positioning
print-specifications.md — Complete print production guide
photography-direction.md — Art direction & shot types
brand-pattern-usage.md — Gradient pattern rules
connesso-tokens.css — Web design tokens
connesso-tokens.json — Token reference with print values
connesso-design-system.html — Interactive reference
connesso-superdesign-components.md — 30 component specs