Actuate

Overview

Actuate is an enterprise building management platform serving multi-location QSR and facilities operators with AI-powered energy optimization and predictive maintenance. The design system embodies 'Data-Driven Clarity'—a modern, accessible aesthetic that transforms complex operational intelligence into intuitive visual narratives. The brand personality is confident yet approachable: technical depth without intimidation, precision without coldness. The interface prioritizes information hierarchy and actionable insights, using a bold primary blue (#0d36ba) as the signature accent for CTAs and key interactions, paired with a warm secondary orange (#ff9733) for alerts and secondary actions. The emotional response is one of control and confidence: users feel empowered to manage their operations at scale. Voice: direct, data-informed, never jargon-heavy. Example: 'Your portfolio is running 18% above efficiency targets—here's where to focus next.'

Colors

The color palette is rooted in a clean, light-dominant aesthetic with strategic accent deployment. Primary (#0d36ba) is the brand's signature deep blue, used exclusively for primary CTAs ('Book a Demo', 'Schedule a Portfolio Review'), navigation highlights, and active states. It conveys trust and technical authority. Secondary (#ff9733) is a warm, energetic orange deployed for secondary actions, alerts, and supporting CTAs—it creates visual rhythm and draws attention to secondary pathways without competing with primary. Tertiary (#2098d1) is a lighter, cooler blue used for informational elements, badges, and tertiary interactions. The surface stack is predominantly white (#ffffff) with carefully calibrated grays: surface-container-high (#e1e1e1) for subtle dividers and hover states, surfac

Typography

The type system is anchored in Outfit (100–900 weights) for all UI text, paired with Inter as a fallback. Outfit's geometric, modern letterforms communicate technical sophistication while remaining highly legible at small sizes. Display (56px, 800 weight) is reserved for hero headlines and major section breaks; Headline-lg (40px, 800 weight) anchors page sections; Headline-md (32px, 700 weight) introduces subsections. Body-lg (18px, 500 weight) is used for descriptive copy and feature callouts, while Body-md (16px, 400 weight) serves as the default paragraph text. Label-md (15px, 500 weight) is applied to button text and form labels, ensuring clickable elements stand out. Letter-spacing is tightened on display sizes (-0.02em) to create visual impact, while body text uses 0em to 0.01em for

Layout

The layout system uses a 12-column fluid grid with a max-width of 1280px, allowing responsive scaling from mobile (single column) to desktop (multi-column layouts). The gutter is consistently 24px, creating rhythm and breathing room. Section separation uses lg spacing (40px) vertically to establish clear visual hierarchy; card-to-card spacing within sections uses md spacing (24px). The hero section spans full-width with a diagonal gradient overlay (80deg, white fade from 0–20% to transparent), creating visual interest without overwhelming content. Container padding is 24px on desktop, reducing to 16px on tablet and 12px on mobile. White-space is treated as a first-class design element: generous margins around CTAs (minimum 40px vertical clearance), ample breathing room between feature card

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids visual clutter while maintaining clear layer hierarchy. Level 1 (Base/Surface): no shadow; white background (#ffffff) with subtle 1px border at #e1e1e1. Level 2 (Cards/Containers): box-shadow: 0 4px 12px rgba(0,0,0,0.12), creating a soft lift with 12px blur radius and 4px vertical offset—this is the workhorse shadow for cards, modals, and elevated containers. Level 3 (Modals/Overlays): box-shadow: 0 16px 40px rgba(0,0,0,0.15), with increased blur (40px) and offset (16px) to create pronounced separation from the background. Hover

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used strategically to soften technical interfaces without sacrificing clarity. Buttons use lg radius (1rem / 16px) for a modern, approachable feel; inputs and form fields use DEFAULT radius (0.5rem / 8px) for a tighter, more utilitarian appearance. Cards and containers use xl radius (1.5rem / 24px) to create a premium, spacious feel. The most frequent radius in the codebase is 10px (observed 30 times), which maps to our md radius (0.75rem / 12px) for secondary UI elements like badges and small containers. Full radius (9999px) is

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses #0d36ba background with white text, 48px height, 12px vertical / 24px horizontal padding, and lg radius (16px). On hover, the background transitions to #1e40af (primary-container) over 200ms. Button-secondary uses #ff9733 background with #071b5c text, 8px vertical / 32px horizontal padding, and the same lg radius; hover state darkens to #e67e1a. Button-tertiary is transparent with a 2px solid #0d36ba border and primary text; on hover, it fills with surface-container-high (#e1e1e1). All buttons use label-md typography (15px, 500 weight) and include a 200ms ease-in-out transition on background-color and box-shadow. Focus state (keyboard navigation) adds a 3px rgba(13, 54, 186, 0.2) outline.

Containers &

Do's and Don'ts

**Do**

• Do use primary (#0d36ba) exclusively for primary CTAs and key interactive states—it's the brand's signature accent and should never be diluted or overused.
• Do maintain 40px minimum vertical spacing around primary buttons and 24px between secondary elements to create visual breathing room and guide user attention.
• Do apply lg radius (16px) to buttons and xl radius (24px) to cards to maintain the modern, approachable aesthetic—avoid sharp corners.
• Do use Outfit 800 weight for headlines and 500 weight for body text to create clear typographic hierarchy without relying solely on size.
• Do transition interactive elements (buttons, cards, inputs) over 200ms with ease-in-out timing to signal responsiveness without feeling sluggish.
• Do layer shadows using the three-level system (md for cards, lg for modals) to create depth without visual clutter—never stack multiple shadows.

**Don't**

• Don't use secondary orange (#ff9733) for primary CTAs or dominant UI elements—it's a supporting accent and should appear less frequently than primary blue.
• Don't apply shadows to text or use text-shadow for emphasis; instead, rely on typography weight, color contrast, and spatial hierarchy.
• Don't mix rounded and sharp corners on related elements (e.g., button and input in the same form)—maintain consistency within component families.
• Don't exceed 1280px container width on desktop; the layout is optimized for this max-width and wider layouts dilute visual hierarchy.
• Don't use pure black (#000000) for text or backgrounds; instead, use on-surface (#2d2d2d) for text and surface (#ffffff) for backgrounds to maintain warmth.
• Don't animate opacity or scale on hover without also transitioning color or shadow—multi-property transitions (200ms) feel more intentional than single-property changes.