Ace Studio

Overview

Ace Studio is an AI-native product design studio that transforms complex B2B software into intuitive, high-impact interfaces. The brand embodies "Technological Minimalism"—a design philosophy that strips away visual noise while amplifying intent through bold color, precise typography, and architectural clarity. The aesthetic is deliberately stark: deep blacks (#000000) form the canvas, while a vibrant lime-green accent (#d4f234) and electric blue (#0099ff) punctuate key interactions, creating an energetic, forward-thinking atmosphere that signals innovation without pretense. The UI evokes the feeling of a high-performance command center—clean, purposeful, and ready for action.

The brand voice is direct, confident, and grounded in expertise. Ace speaks to senior product leaders and technical founders with clarity and specificity, avoiding hype while celebrating capability. The vocabulary is precise: "agentic design systems," "product advantage," "real outcomes." Example sentence in brand voice: "We design interfaces that your users won't just tolerate—they'll depend on."

Colors

The color system is built on a high-contrast dark foundation with two strategic accent colors. Surface (#000000) and its container variants (surface-container: #171717, surface-container-high: #2d2f2e) create depth through subtle tonal shifts rather than dramatic shadows, maintaining the austere, tech-forward aesthetic. Primary (#d4f234)—a vivid lime-green—is reserved exclusively for call-to-action buttons, interactive states, and brand-critical moments; it commands attention with 100% saturation and high luminance, ensuring accessibility and visual hierarchy. Secondary (#0099ff)—electric blue—supports status indicators, secondary CTAs, and accent elements, providing a complementary energy without competing with primary. On-surface (#ffffff) and on-surface-variant (#dedede) handle text and

Typography

The type system pairs Antonio (geometric, bold display font at 700 weight) for headlines with Spectral (high-contrast serif at 700 weight) for secondary headlines, creating a distinctive visual hierarchy that signals premium craftsmanship. Body text uses Geist (humanist sans-serif at 400–600 weights) for clarity and legibility at small sizes. Display (80px, 88px line-height, -0.04em letter-spacing) commands hero sections with architectural presence; headline-lg (48px, 56px line-height) anchors major sections; body-md (16px, 24px line-height) ensures comfortable reading at standard viewing distances. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to buttons and interactive labels, with increased tracking to enhance scannability. On small labels over busy backgrounds or dark s

Layout

The layout system uses a 12-column grid with a maximum container width of 1440px, allowing content to breathe on large displays while maintaining focus on medium screens. Spacing follows a semantic scale: unit (8px) as the base increment, with sm (12px), md (24px), lg (40px), and xl (64px) for section separation and component padding. The gutter (24px) is applied consistently to horizontal margins, creating a 48px total margin on left and right at full width. White-space is used aggressively—sections are separated by lg spacing (40px) minimum, and card-based layouts employ md padding (24px) internally. This rhythm creates visual rest and prevents cognitive overload, essential for B2B software where users spend extended periods in the interface. Container max-width (1440px) prevents line le

Elevation & Depth

Depth is conveyed through layered surfaces and subtle shadows rather than dramatic drop-shadows. The elevation system defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle hover states and micro-interactions, md (0 4px 12px rgba(0, 0, 0, 0.15)) for cards and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.25)) for prominent overlays and floating panels. Cards use a 1px solid border at outline-variant (#767f7a) to define edges without relying on shadow alone, maintaining the clean, architectural aesthetic. On hover, cards transition to surface-container-high (#2d2f2e) background with

Shapes

The shape philosophy is "Architectural Precision"—rounded corners are used sparingly and purposefully to signal interactivity and soften hard edges without compromising the austere aesthetic. Buttons use full rounding (border-radius: 9999px, or {rounded.full}) to create pill-shaped CTAs that are unmistakably clickable; this 50px height with 12px vertical padding and 24px horizontal padding creates a 44px total height, a comfortable touch target. Cards and containers use lg rounding (1rem / 16px) to provide subtle softness while maintaining architectural clarity. Input fields use DEFAULT roundi

Components

Action Elements Buttons are the primary interaction mechanism and must be visually dominant. button-primary uses {colors.primary} (#d4f234) background with {colors.on-primary} (#000000) text, {rounded.full} (9999px), and label-md typography (14px, 600 weight). Padding is 12px vertical and 24px horizontal, creating a 44px total height. On hover, transition backgroundColor to {colors.primary-fixed-dim} (#b9d80e) over 200ms with cubic-bezier(0.4, 0, 0.2, 1) easing. On active, darken further to #a8c000. button-secondary uses transparent background with 1px solid border at {colors.outline} (#858585), on-surface text, and the same rounded and typography. On hover, apply {colors.surface-container-high} (#2d2f2e) background while maintaining the border. Avoid button-secondary on dark backgroun

Do's and Don'ts

**Do**

• Do use {colors.primary} (#d4f234) exclusively for primary CTAs and critical interactive states; it is the brand's signature accent and must remain visually distinct.
• Do apply {spacing.lg} (40px) minimum between major sections to create visual breathing room and prevent cognitive overload in dense B2B interfaces.
• Do use {rounded.full} (9999px) on all buttons to create an unmistakable affordance that invites interaction.
• Do pair Antonio (display) with Spectral (headlines) and Geist (body) to maintain the premium, tech-forward typographic hierarchy.
• Do transition all interactive states (hover, focus, active) over 150–200ms with cubic-bezier(0.4, 0, 0.2, 1) easing to feel responsive without appearing jarring.

**Don't**

• Don't use {colors.primary} (#d4f234) for body text, backgrounds, or non-interactive elements; reserve it exclusively for CTAs and active states to maintain visual hierarchy.
• Don't apply shadows to cards at rest; use {colors.outline-variant} (#767f7a) borders instead to maintain the clean, architectural aesthetic.
• Don't mix more than two typefaces in a single component; stick to the defined pairing (Antonio/Spectral for display, Geist for body) to avoid visual fragmentation.
• Don't use border-radius: 0 (sharp corners) on interactive elements; minimum {rounded.DEFAULT} (0.5rem) for inputs, {rounded.lg} (1rem) for cards, {rounded.full} (9999px) for buttons.
• Don't reduce {spacing.gutter} (24px) below 16px on any screen size; white-space is essential to the brand's premium positioning and cognitive clarity.