CheckAI

Overview

CheckAI is an AI-powered execution operating system that redefines task management by tracking outcomes rather than mere activity completion. The design system embodies "Precision Futurism"—a movement that combines dark atmospheric interfaces with vibrant teal-to-violet gradients to convey intelligence, momentum, and forward-thinking execution. The brand serves teams and enterprises who demand accountability through AI-driven performance scoring and outcome validation. The visual language evokes clarity through contrast: deep navy-black surfaces (#191924) provide a calm, focused canvas, while the signature teal primary (#14b8a6) and violet secondary (#8b5cf6) create dynamic focal points that guide users toward critical actions and insights. Voice: authoritative yet approachable, data-driven but human-centered. Example: "Your team shipped 3× faster—here's what changed."

Colors

The color system is built on a dark-first philosophy optimized for extended focus sessions and AI-heavy interfaces. Primary (#14b8a6, a vibrant teal) is reserved exclusively for call-to-action buttons, active states, and outcome-positive indicators—it signals execution success and forward momentum. Secondary (#8b5cf6, a rich violet) supports accent moments, secondary CTAs, and AI-specific UI elements, creating visual hierarchy without competing for attention. Tertiary (#2dd4bf, a lighter cyan) is used for confirmations, success states, and supporting highlights. The surface stack progresses from surface-dim (#0f1117) for the deepest backgrounds through surface-container (#1a1a2e) for standard cards, to surface-container-highest (#303045) for elevated modals and floating elements. On-surfac

Typography

The type system pairs Plus Jakarta Sans (display, headlines) with Inter (body, labels) to balance personality with legibility. Plus Jakarta Sans at 700 weight conveys confidence and authority—used for display (60px, -0.04em letter-spacing) and headlines (40px, -0.02em). Inter provides neutral, highly readable body text at 16–18px with 24–28px line-height, ensuring comfortable reading during extended task management sessions. Label-md (14px, 600 weight, 0.01em tracking) is applied to all interactive elements (buttons, chips, badges) to create visual consistency and scanability. Monospace (IBM Plex Mono, 14px) is reserved for code snippets, task IDs, and technical metadata. All text over busy backgrounds or gradients should apply a subtle text-shadow (0 2px 4px rgba(0, 0, 0, 0.15)) to ensure

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px and 24px gutters, ensuring content remains scannable on desktop while maintaining breathing room. The spacing scale (4px unit, with sm/md/lg/xl increments) creates a predictable rhythm: 24px (md) separates major sections, 40px (lg) divides distinct page regions, and 12px (sm) provides micro-spacing within components. The dark background (#191924) acts as a neutral canvas that recedes, allowing content and interactive elements to advance. White-space is generous—cards and modals use 24px padding (md) internally, with 40px (lg) spacing between major content blocks. This breathing room reduces cognitive load and emphasizes the quality of each element. Container max-width of 1280px prevents line-length from exceed

Elevation & Depth

Depth is conveyed through a layered shadow and backdrop-filter system that creates visual separation without relying on color shifts. Level 1 (Base): the background surface (#191924) with no shadow. Level 2 (Standard Cards): surface-container (#1a1a2e) with a 1px border (outline-variant, #3d4556) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), creating subtle depth. Level 3 (Elevated/Modals): surface-container-highest (#303045) with a 1px border (outline, #5a6478), box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), and backdrop-filter: blur(10px) for glassmorphic depth. Interactive elements (buttons,

Shapes

The shape philosophy is "Technical Softness"—rounded corners are applied consistently to create approachability without sacrificing precision. Buttons and chips use lg (1rem / 16px) border-radius, creating a friendly, modern appearance while remaining clearly clickable. Cards and input fields use DEFAULT (0.5rem / 8px) for subtle definition. Modals and elevated surfaces use xl (1.5rem / 24px) for emphasis and visual distinction. Full (9999px) is reserved for badges and avatar containers. The rationale: larger radii on primary interactive elements (buttons, chips) signal affordance and encourag

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 48px height with 12px vertical and 24px horizontal padding. Primary buttons (#14b8a6 background, white text) are reserved for high-priority actions ("Request Pilot", "Ship Execution"). Hover state transitions to primary-container (#0d9488) with an elevated shadow (0 6px 20px rgba(20, 184, 166, 0.35)) and a -2px vertical lift. Secondary buttons use a transparent background with a 1px outline and transition to surface-container-high on hover, maintaining visual hierarchy. All button text uses label-md typography (14px, 600 weight, 0.01em tracking) for consistency. Transitions use cubic-bezier(0.22, 1, 0.36, 1) over 200ms to feel responsive.

Containers & Surfaces Cards are the primary content container

Do's and Don'ts

**Do**

• Do use primary (#14b8a6) exclusively for high-priority CTAs, success states, and outcome-positive indicators—it's the brand's signature accent and should feel rare and valuable.
• Do apply 24px (md) padding to all cards and containers, and 40px (lg) spacing between major sections, to maintain visual breathing room and reduce cognitive load.
• Do use Plus Jakarta Sans at 700 weight for headlines and display text to convey authority; reserve Inter for body and labels to ensure legibility.
• Do transition all interactive elements using cubic-bezier(0.22, 1, 0.36, 1) over 200–250ms to create a responsive, deliberate feel that matches the brand's precision.
• Do apply a 1px border (outline-variant or outline) to all cards and modals, combined with subtle shadows, to create clear visual separation without relying on color shifts.

**Don't**

• Don't use primary (#14b8a6) for body text, backgrounds, or non-interactive elements—it dilutes the accent's impact and confuses the interaction model.
• Don't apply border-radius smaller than 0.5rem (8px) to buttons or interactive elements; it reduces affordance and feels cramped against the brand's technical-softness philosophy.
• Don't exceed 1280px container width or use gutters smaller than 24px; the layout system depends on generous white-space to reduce cognitive load in data-heavy interfaces.
• Don't use transitions longer than 300ms or easing functions other than cubic-bezier(0.22, 1, 0.36, 1); slower animations feel sluggish and undermine the brand's execution-focused personality.
• Don't apply multiple shadows or glows to a single element; the elevation system relies on clear, single-layer depth cues to maintain visual hierarchy and prevent visual noise.