Daylight

Overview

Daylight embodies a "Warm Pragmatism" aesthetic—merging the approachable, sun-forward energy of renewable power with the technical rigor of a decentralized platform. The design system prioritizes clarity and trust, using a warm cream-to-orange palette (#fff7e9 background, #f66f00 primary accent) that evokes both daylight and the tangible warmth of home energy independence. The brand serves homeowners seeking control, savings, and resilience; the UI responds with calm confidence, never overselling complexity.

The voice is direct, grounded, and human-centered. Daylight speaks in active verbs and concrete outcomes: "Power your home for less," "Keep the lights on," "See if you qualify." Vocabulary favors clarity over jargon—"battery backup" not "distributed energy resource aggregation." Tone is optimistic but honest, acknowledging both the promise and the practical steps required. Example sentence in brand voice: "Your solar system generates 8.2 kWh today—that's enough to cover tomorrow's baseline and earn $1.40 in rewards."

Colors

The color system is anchored by a warm, high-saturation primary (#f66f00) used exclusively for CTAs, interactive states, and brand-critical moments. This orange is the visual signature of action and energy generation. The secondary color (#111111, near-black) provides structural contrast and grounds the interface with authority—used for navigation, buttons, and text hierarchy. The surface stack flows from a warm cream (#fff7e9) as the base through progressively cooler neutrals (#f5f0e8, #ede8e0) for layered depth, creating visual separation without harsh contrast. Tertiary (#bed5ff, a soft sky blue) appears in data visualization and secondary highlights, evoking clear skies and renewable potential. Error states use a muted red (#b3261e) for accessibility over alarm. All surfaces maintain a

Typography

The type system uses two distinct families: featureDeck (serif, 400 weight only) for display and headline scales, and aeonikPro (sans-serif, 400–500 weights) for body and label text. This pairing creates visual hierarchy through family contrast rather than weight alone—featureDeck's generous, open letterforms command attention at 85px (display) and 48px (headline-lg), while aeonikPro's geometric precision handles dense information at 16px (body-md) and 14px (label-md). All type uses negative letter-spacing (-0.04em to -0.01em) to tighten the warm, confident aesthetic. On small labels over busy backgrounds (e.g., data overlays on hero imagery), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibility. Line heights are generous (1.5–1.625 unitless) to support readability in long

Layout

The layout uses a 12-column grid with a max-width of 1280px, maintaining a fluid layout on mobile (full bleed with 24px gutters) and fixed-width on desktop. The spacing scale is semantic: use lg (40px) for major section separation (hero to features, features to CTA), md (24px) for component padding and card spacing, and sm (12px) for internal element spacing. The qualify pill (max-width: 340px on mobile, 400px on tablet) is a signature layout component—it combines input and action in a single, glass-morphic container, anchoring the hero section. Container max-widths vary by section (800px for text-heavy, 1000px for feature grids) to optimize reading and scanning. White-space is intentional: the hero reserves 40–60% of viewport height for breathing room, allowing the background photography

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through dramatic darkness. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for interactive elements like buttons and input focus states; md (0 4px 12px rgba(0, 0, 0, 0.08)) for cards and modals; lg (0 8px 32px rgba(0, 0, 0, 0.24)) for the qualify pill and hero overlays. Glass surfaces (qualify pill, data overlays) combine backdrop-filter: blur(6px) saturate(110%) with a 1px border at rgba(255, 255, 255, 0.22) and the lg shadow to create a frosted-lens effect that sits above the background without feeling disc

Shapes

The shape philosophy is "Approachable Precision"—rounded corners are used consistently but not excessively, signaling friendliness without sacrificing clarity. Buttons and inputs use lg (1rem / 16px) border-radius, creating a soft but defined edge that feels modern and welcoming. Cards and larger containers use xl (1.5rem / 24px) for a more generous curve that softens the interface. The qualify pill uses xl (1.5rem) to emphasize its role as a hero component. Small interactive elements (badges, toggles) use full (9999px) for a pill shape. Avoid DEFAULT (0.5rem / 8px) for primary components—it r

Components

Action Elements Buttons follow a two-tier system: primary (orange #f66f00 on white text) for CTAs like "Get started" and "See if you qualify," and secondary (near-black #111111 on white text) for navigation and secondary actions. Both use 48px height, 24px horizontal padding, and lg (1rem) border-radius. Hover states darken the background by ~15% (primary to #e55c00, secondary to #2d2d2d) and apply a 200ms ease-out transition. Ghost buttons (transparent with 1px outline) are reserved for tertiary actions; they use the primary color for text and border, with a surface-container-high background on hover. All buttons disable with 50% opacity and cursor: not-allowed.

Containers & Surfaces Cards use surface-container (#f5f0e8) background with a 1px outline-variant (#dacab6) border and

Do's and Don'ts

**Do**

• Do use the primary orange (#f66f00) exclusively for CTAs and interactive moments—it's the visual signal of action and energy.
• Do maintain the warm cream (#fff7e9) background as the default surface; it grounds the brand and reduces eye strain.
• Do apply negative letter-spacing (-0.02em to -0.04em) to all display and headline text to reinforce the confident, tight aesthetic.
• Do use the qualify pill component as the hero CTA—its glass morphism and integrated input/button create a memorable, functional focal point.
• Do layer shadows consistently: sm for small interactive elements, md for cards, lg for hero overlays and glass surfaces.
• Do preserve white-space in layouts; the brand's confidence comes from breathing room, not density.

**Don't**

• Don't use secondary color (#111111) for body text on warm backgrounds—it creates harsh contrast; use on-surface (#1c1c1c) instead.
• Don't apply border-radius smaller than lg (1rem) to buttons or primary containers; it contradicts the approachable, warm aesthetic.
• Don't mix featureDeck and aeonikPro weights arbitrarily; featureDeck is 400-only (display/headline), aeonikPro is 400–500 (body/labels).
• Don't use the primary orange for non-interactive elements like dividers or backgrounds; reserve it for CTAs and state changes.
• Don't apply shadows larger than lg (0 8px 32px) to standard cards—it creates visual chaos and diminishes the hierarchy.
• Don't disable the qualify pill's focus state; ensure the input and button remain keyboard-accessible with visible focus rings (outline: 2px solid rgba(255, 255, 255, 0.55)).