Future Works

Overview

Future Works is an AI-native transformation engine for asset-heavy enterprises, delivering critical infrastructure projects 2× faster than traditional consulting. The brand embodies **Architectural Minimalism**—a design philosophy that prioritizes clarity, precision, and functional elegance. The visual identity is deliberately austere: a pure white canvas (rgb(255, 255, 255)) with deep charcoal text (rgb(10, 10, 10)) and a vibrant lime-green accent (rgb(220, 254, 168)) that signals innovation and energy. The UI evokes confidence and rigor: no ornament, no gradients, no soft shadows—only sharp contrast and purposeful color. Users feel they're interfacing with a system built for production, not aesthetics.

The brand voice is direct, technical, and outcome-focused. Vocabulary patterns emphasize measurable results: "twelve weeks," "de-risked," "outcome-staked," "autopilot," "infrastructure." The tone avoids hype; instead, it speaks in the language of CFOs and operations leaders. Example sentence in brand voice: "We rebuild your supply chain in twelve weeks, backed by a CFO-approved baseline and named senior experts orchestrating AI agents on outcome-staked terms."

Colors

The color system is built on a **high-contrast, minimalist palette** that prioritizes legibility and brand distinction. Primary (#0a0a0a, near-black) is the dominant text and interactive color, used on CTAs, navigation, and body copy. It conveys authority and precision. Secondary (#dcfea8, lime-green) is the signature accent—applied sparingly to highlight key value propositions, accent text ("Value realized"), and interactive states. This accent appears in only ~3% of the interface but commands attention through its vivid, almost neon quality. Tertiary (#0b5ed7, corporate blue) supports secondary actions and informational elements. Error (#fb2666, vibrant pink-red) signals warnings and destructive actions with urgency.

Surface colors follow a strict white-to-gray scale: surface (#ffffff)

Typography

The type system pairs two distinct typefaces to create visual rhythm and hierarchy. **Montreal** (fontFamily: Montreal, fontWeight: 500, fontSize: 56px, lineHeight: 64px, letterSpacing: -0.02em) is used exclusively for display and headline scales—its geometric, modern character commands attention and signals premium positioning. **Untitled Sans** (fontFamily: Untitled sans, fontWeight: 400, fontSize: 18px, lineHeight: 28px) handles all body and label text, providing warm legibility at smaller sizes. Headlines use Montreal at 500 weight (medium) rather than 700, reinforcing the minimalist aesthetic; body copy is always 400 weight for clarity. Letter-spacing is tightened on display text (-0.02em) to create density and impact, while body text uses 0em spacing for neutral readability. Apply te

Layout

The layout system uses a **12-column fluid grid** with a fixed container max-width of 1280px, centered on the viewport. Spacing follows a strict 8px unit scale: xs (4px), sm (12px), md (24px), lg (40px), xl (64px). Section separation uses lg spacing (40px) for major content blocks; internal card padding uses md spacing (24px). The gutter (horizontal margin on mobile/tablet) is 24px on all sides, scaling to 40px on desktop. White-space is generous but purposeful—never decorative. The hero section uses a 2-column layout (text left, visual right) on desktop, collapsing to single-column on mobile. Cards and list items use md padding (24px) internally, with sm spacing (12px) between list items. Container max-width of 1280px ensures readability on ultra-wide displays; no content exceeds 975px on

Elevation & Depth

Depth in this system is achieved through **subtle shadow and color contrast**, not layering or blur effects. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and borders; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and modals; lg (0 8px 32px rgba(0, 0, 0, 0.1)) for hero sections and floating elements. Shadows are always soft and spread (no sharp blur-radius), maintaining the clean aesthetic. Cards use surface-container (#f0f1f3) background with md shadow; on hover, they transition to surface-container-high (#e7e7e7) with lg shadow over 200

Shapes

The shape philosophy is **Functional Precision**—border-radius is used strategically to signal interaction type, not for aesthetic softness. Buttons use full radius (border-radius: 9999px, achieved via 50% or 5000px) to create pill-shaped CTAs that feel modern and clickable; this applies to primary and secondary buttons uniformly. Cards and containers use lg radius (1rem / 16px) for a subtle, professional appearance. Input fields use DEFAULT radius (0.5rem / 8px) to differentiate them from buttons while maintaining consistency. Modals and overlays use xl radius (1.5rem / 24px) for a premium fe

Components

Action Elements Buttons are the primary interactive component. **button-primary** uses backgroundColor: rgb(10, 10, 10), textColor: rgb(255, 255, 255), padding: 16px 28px, height: 48px, rounded: full, typography: label-md (14px, fontWeight: 500). On hover, transition backgroundColor to rgb(30, 32, 33) over 150ms with cubic-bezier(0.4, 0, 0.2, 1) timing. On active/pressed, darken further to rgb(16, 16, 16). Focus state adds a 3px ring of rgba(10, 10, 10, 0.1). **button-secondary** uses transparent background with 1px border (borderColor: rgb(184, 188, 195)), textColor: rgb(10, 10, 10), same padding and height. On hover, backgroundColor transitions to rgb(240, 241, 243) over 150ms. **button-tertiary** is text-only with text-decoration: underline, no padding, no background—used for inline

Do's and Don'ts

**Do**

• Do use the lime-green accent (#dcfea8) sparingly—only on key CTAs, value highlights, and active states to maintain impact.
• Do maintain 1px borders on inputs and secondary buttons using outline-variant (#b8bcc3); never use thicker borders.
• Do apply Montreal typeface exclusively to headlines (display, headline-lg, headline-md) at fontWeight: 500; never use it for body text.
• Do use full border-radius (9999px) on all buttons to signal interactivity; never use sharp corners on CTAs.
• Do preserve white-space: use lg spacing (40px) between major sections and md spacing (24px) inside cards.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards; never use blur-based or glassmorphism effects.

**Don't**

• Don't use gradients, blur effects, or glassmorphism—the brand is flat, high-contrast, and austere.
• Don't apply text-shadow or text-stroke effects; typography must be crisp and unadorned.
• Don't use the secondary accent (#dcfea8) as a background color for large areas; it's a highlight, not a surface.
• Don't mix Montreal and Untitled Sans weights arbitrarily; Montreal is 500 only, Untitled Sans is 400 for body.
• Don't add rounded corners to cards beyond lg radius (1rem); excessive rounding dilutes the minimalist aesthetic.
• Don't use opacity or transparency for color variation; use the defined surface and on-surface palette instead.