Smappee

Overview

Smappee is an Energy Intelligence platform designed for sustainable living without compromise. The brand embodies "Purposeful Minimalism"—a design philosophy that strips away visual noise to reveal actionable energy data through clean typography, strategic use of teal-green accents, and generous whitespace. The interface evokes clarity and control: users feel empowered to optimize their energy consumption, manage smart charging, and store renewable power. The brand personality is confident yet approachable, speaking in precise, outcome-focused language that respects the user's intelligence. Example: "Your energy flows are now visible—optimize them in real time."

Colors

The color system is anchored by a teal-green primary (#018184) that signals trust, sustainability, and technological sophistication. This primary appears on all CTAs (buttons, links, progress indicators) and interactive focus states. The secondary accent, a warm coral-orange (#ff5c35), provides energetic contrast for secondary actions and highlights. A tertiary yellow (#fcc04d) is reserved for status indicators and badges. The surface stack progresses from bright white (#ffffff) through cool grays (#f5f8fa, #eef2f6, #e8ecf0) to a deep navy text color (#212d3a), creating a calm, professional foundation. Error states use a bold red (#e51520) for critical alerts. All interactive elements transition smoothly between states using rgba overlays (e.g., rgba(1, 129, 132, 0.08) for hover background

Typography

The type system pairs Inter (body, headlines, labels) with Soleil (buttons, CTAs) to balance approachability with authority. Display text (64px, 400 weight, -0.02em tracking) anchors hero sections with calm confidence. Headline-lg (40px, 600 weight) breaks up content sections. Body-md (16px, 400 weight, 24px line-height) ensures readability at 991px container width. Button labels use Soleil at 16px, 700 weight with -0.005em tracking to create visual distinction and encourage interaction. Small labels (12px, 500 weight, 0.02em tracking) are applied with a subtle text-shadow (0 1px 2px rgba(0, 0, 0, 0.1)) when layered over busy backgrounds to maintain legibility.

Layout

The layout operates on a 12-column grid with a fixed max-width of 1280px, allowing content to breathe on desktop while remaining responsive below 991px. Horizontal spacing uses the 30px gutter token for section separation, while vertical rhythm is maintained through 40px (lg) spacing between major sections and 24px (md) spacing between subsections. Container padding is consistently 40px on desktop, reducing to 24px on tablet. The design favors asymmetrical layouts with generous left-aligned whitespace, allowing hero imagery and accent lines (rendered in the primary teal) to guide the eye naturally through the page.

Elevation & Depth

Depth is achieved through subtle shadows and micro-interactions rather than layering. Level 1 (base surfaces) uses no shadow. Level 2 (cards, input fields) applies 0 3px 8px rgba(0, 0, 0, 0.15) to create gentle separation. Level 3 (modals, dropdowns) uses 0 8px 24px rgba(0, 0, 0, 0.12). Interactive elements respond with a 2px upward translate on hover (transform: translateY(-2px)) combined with a contextual shadow boost, creating a tactile sense of lift. Focus states add a 3px ring of rgba(1, 129, 132, 0.1) around interactive elements, providing clear keyboard navigation feedback without harsh

Shapes

The shape philosophy is "Soft-Technical"—rounded corners signal approachability while maintaining a professional edge. Buttons use full radius (border-radius: 9999px, 40px pill shape) to feel modern and inviting. Cards and containers use 0.75rem (12px) radius for a balanced, slightly softer appearance. Input fields use 0.5rem (8px) radius to feel integrated with the form ecosystem. Accent lines and decorative elements (like the curved green line in the hero) use organic curves (border-radius: 50% on pseudo-elements) to add visual interest without compromising the clean aesthetic.

Components

Action Elements Buttons are the primary interaction driver. Primary buttons (background: #018184, color: white, padding: 15px 32px, border-radius: 40px, font-family: Soleil, font-weight: 700) appear on all major CTAs. On hover, the background darkens to #005a5d and the button lifts 2px with a 200ms ease-out transition. Secondary buttons (transparent background, 2px teal border, same padding) are used for alternative actions and follow the same hover behavior. Tertiary buttons (transparent, 1px gray border, 8px 20px padding) handle lower-priority actions like "Learn more" links.

Containers & Surfaces Cards use background: #f0f4f7, padding: 24px, border-radius: 12px, and a subtle 0 3px 8px rgba(0, 0, 0, 0.15) shadow. On hover, the shadow increases to 0 8px 24px rgba(0, 0, 0, 0.12) a

Do's and Don'ts

**Do**

• Do use the teal primary (#018184) exclusively for primary CTAs, focus states, and key interactive elements—it's the brand's signature color and should never be diluted.
• Do maintain the 30px horizontal gutter and 40px vertical spacing between sections to preserve the calm, spacious aesthetic.
• Do apply Soleil font-family exclusively to button labels and CTAs to create visual hierarchy and encourage interaction.
• Do use the full rounded pill shape (border-radius: 40px) on all primary buttons to signal modernity and approachability.
• Do layer subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) on cards and containers to create gentle depth without visual clutter.
• Do combine hover states with micro-interactions: translateY(-2px) + shadow boost + 200ms ease-out transition for tactile feedback.

**Don't**

• Don't use the secondary coral (#ff5c35) or tertiary yellow (#fcc04d) on primary CTAs—reserve them for secondary actions and status indicators only.
• Don't apply hard color shifts on hover; instead, use rgba overlays (e.g., rgba(1, 129, 132, 0.08)) to maintain visual coherence.
• Don't reduce the container max-width below 1280px or the gutter below 30px—these define the spacious, professional rhythm.
• Don't mix Inter and Soleil fonts within a single button or CTA label—use Soleil exclusively for button text to maintain visual distinction.
• Don't use box-shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) on any element; excessive shadow depth contradicts the clean aesthetic.
• Don't apply focus rings or outlines without the rgba(1, 129, 132, 0.1) ring style—hard outlines break the soft-technical feel.