Sparc Group

Overview

Sparc Group embodies Architectural Minimalism with Sustainable Pragmatism—a design language that mirrors the company's mission to build infrastructure for a sustainable future. The UI aesthetic combines a serene teal-and-white palette (primary #14363f, secondary #abccbd) with clean geometric forms, evoking both corporate stability and environmental consciousness. The brand serves entrepreneur-driven holding companies and their stakeholders, communicating trustworthiness, operational clarity, and forward-thinking vision through restrained typography and purposeful whitespace.

The voice is direct, professional, and optimistic without hyperbole. Sparc communicates in declarative sentences: "Installing for a sustainable future." "By entrepreneurs, for entrepreneurs." The vocabulary emphasizes coordination, acquisition, and comprehensive solutions—never buzzwords, always substance. Brand personality: methodical, collaborative, and grounded in real-world infrastructure challenges.

Colors

The color system is rooted in a dual-tone palette: a deep teal primary (#14363f, rgb(20, 54, 63)) anchors trust and authority, while a soft sage secondary (#abccbd, rgb(171, 204, 189)) introduces warmth and sustainability. The surface stack uses a light green-tinted white (#eff5f3, rgb(239, 245, 243)) as the dominant background, creating a calm, nature-adjacent canvas. Primary (#14363f) is reserved for CTAs, headers, and interactive focus states—it commands attention without aggression. Secondary (#abccbd) appears on accent buttons, icons, and hover states, softening the interface while maintaining visual hierarchy. Tertiary (#7db099) supports status indicators and supplementary UI elements. The outline color (#505050) provides subtle borders at 1px width; outline-variant (#d0d0d0) is used

Typography

Poppins (400, 500, 600, 700 weights) is the sole typeface, chosen for its geometric clarity and approachability—qualities that align with Sparc's engineer-meets-entrepreneur positioning. Display (70px, 400 weight, -0.02em tracking) anchors hero sections with commanding presence; headline-lg (40px, 600 weight) structures major sections; headline-md (28px, 600 weight) subsections; title-lg (20px, 600 weight) card headers. Body text uses 16px at 400 weight with 24px line-height (1.5 unitless), ensuring legibility on light backgrounds. Labels employ 600 weight at 14px with 0.01em tracking for UI controls and badges. On hero overlays with photographic backgrounds, apply text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) to maintain contrast over imagery. Letter-spacing is conservative (never exceeding 0

Layout

The layout follows a 12-column fluid grid with a max-width of 1280px (container-max), centered with mx-auto. Sections use lg spacing (40px) for vertical rhythm between major blocks; gutter (24px) separates columns and card groups. The hero section spans full-width with a background image overlay (dark teal gradient rgba(20, 54, 63, 0.4) to rgba(11, 20, 24, 0.05)), allowing the h1 (70px, white text) to sit prominently. Content cards use md padding (24px) internally; section containers use lg (40px) top/bottom margins. Mobile breakpoints compress to sm spacing (12px) and reduce font sizes by 20–30%. The design favors generous whitespace: minimum 40px margins around text blocks, 24px gutters between card columns. Container queries enable responsive typography scaling without media-query bloat

Elevation & Depth

Depth is achieved through subtle shadows and layered surfaces rather than dramatic drop-shadows. Level 1 (Base): flat surface (#eff5f3) with no shadow. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), border: 1px solid #d0d0d0, background: rgba(255, 255, 255, 0.95). Level 3 (Elevated/Modal): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), border: 1px solid #cce0d7, background: #ffffff. Hover states transition shadows upward (md → lg) over 200ms. Interactive elements (buttons, inputs) use no shadow at rest; on focus, they gain a 3px inset ring at rgba(20, 54, 63, 0.1). The progre

Shapes

The shape language is Soft-Technical: rounded corners communicate approachability while maintaining professional geometry. Buttons use full radius (9999px) for primary CTAs, creating pill-shaped affordances that feel modern and clickable; secondary buttons use md radius (12px) for a more structured appearance. Cards employ lg radius (16px) to soften edges without appearing playful. Input fields use full radius (9999px) to match button language and create a cohesive input ecosystem. Icons and badges use full radius (9999px) for circular consistency. Dividers and borders remain sharp (0px radius

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (#14363f background, #abccbd text, 48px height, 12px 32px padding, full radius) use 600-weight labels and transition to primary-container (#2b4a52) on hover over 200ms. Icon buttons pair a circular secondary background (#abccbd, 48px diameter) with a centered arrow or chevron; on hover, the background shifts to tertiary (#7db099). Secondary buttons (#e9ecef background, #14363f text, md radius, 15px padding) include a 1px outline and transition to surface-container-highest on hover. All buttons disable with opacity: 0.5 and cursor: not-allowed.

Containers & Surfaces Cards are the primary content vessel: white background (rgba(255, 255, 255, 0.95)), lg radius (16px), 32px 40px padding, and md shadow (0 3px

Do's and Don'ts

**Do**

• Do use primary (#14363f) exclusively for CTAs, focus states, and primary navigation—never for body text or backgrounds.
• Do apply lg spacing (40px) between major sections to create breathing room and visual hierarchy.
• Do pair Poppins 600-weight with 40px+ font sizes for headlines; reserve 400-weight for body and 500-weight for labels.
• Do transition all interactive states (hover, focus, active) over 200ms using cubic-bezier(0.4, 0, 0.2, 1) for consistency.
• Do layer cards with md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) and 1px outline at #d0d0d0 for subtle depth.
• Do use full radius (9999px) for all buttons and input fields to create a unified, modern interaction language.

**Don't**

• Don't use secondary (#abccbd) or tertiary (#7db099) as primary text colors; reserve them for accents, badges, and hover states.
• Don't apply shadows heavier than lg (0 8px 24px rgba(0, 0, 0, 0.12)) or the interface will feel heavy and dated.
• Don't mix typefaces; Poppins is the sole font family across all weights and sizes.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii break the system.
• Don't apply text-shadow to body text on light backgrounds; reserve shadows for hero overlays and small labels over busy imagery.
• Don't compress spacing below sm (12px) for gutter or padding; the design relies on generous whitespace for clarity.