brand.ai

Overview

brand.ai is a machine-learning platform that transforms static brand guidelines into executable intelligence for distributed teams and AI agents. The design system embodies Architectural Minimalism—a refined aesthetic rooted in Swiss typography and grid discipline, where every pixel serves a functional purpose. The visual language prioritizes clarity over decoration: a monochromatic foundation (off-white #f7f5f2, near-black #1b1b1b, warm grays #8c877d) with a single accent yellow (#f6ce15) reserved for status, highlights, and secondary calls-to-action. The emotional response is one of precision and trustworthiness—the interface feels engineered, not designed; it whispers rather than shouts.

The brand voice is technical yet approachable, speaking to both creative directors and engineering teams without condescension. Vocabulary favors concrete nouns ("brand ontology," "machine-readable," "living guidelines") over abstract adjectives. The tone is confident but never breathless—example: "Your brand is your most valuable asset. brand.ai makes it machine-readable so every team, tool, and agent gets it right." Personality traits: precise, calm, solution-oriented, slightly austere. The UI celebrates negative space and typographic hierarchy as primary design moves, reflecting a belief that simplicity is sophistication.

Colors

The color system operates on a principle of monochromatic restraint with strategic accent deployment. The primary surface palette consists of a warm off-white (#f7f5f2) as the dominant background, paired with a near-black on-surface text color (#1b1b1b) for maximum legibility at 18px body size. Mid-tone grays (#8c877d for secondary text, #d2d2d2 for dividers) create visual hierarchy without introducing competing hues. The surface stack uses subtle luminance shifts: surface-container (#ebe9e6) for grouped content, surface-container-high (#e0ddd8) for hover states, and surface-container-highest (#d2d2d2) for active/pressed states—each step a 5–8% shift in lightness, creating depth through restraint rather than saturation.

Primary (#ffffff) is the call-to-action button background, paired wit

Typography

The type system is built on ABC Monument Grotesk, a geometric sans-serif with a distinctive, slightly condensed character that reinforces the brand's technical personality. Display (80px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major section breaks, commanding attention through scale and negative space rather than color. Headline-lg (56px) and headline-md (40px) use the same -0.02em tracking, creating a unified hierarchy that feels intentional. Body text (18px at 400 weight, 28px line-height) is set generously to ensure readability on screens; the 1.56 line-height ratio (28/18) provides breathing room without feeling loose. Labels and UI text use ABC Monument Grotesk Semi-Mono (14px, 400 weight, -0.04em tracking), a monospaced variant that adds technical cred

Layout

The page layout uses a 12-column grid with a fixed max-width of 1200px, centered with horizontal padding of 100px on desktop (reduced to 40px on tablet, 24px on mobile). The rhythm is built on a spacing scale where the base unit is 8px: xs (4px), sm (12px), md (24px), lg (40px), xl (64px). Section separation uses lg spacing (40px) for visual breathing room; card padding uses md (24px). The layout philosophy embraces generous whitespace—content never fills the viewport edge-to-edge. Hero sections use a 30rem top margin (480px), creating a dramatic pause before the main message. The footer is a sticky, full-height container (100vh on desktop) that uses a dark background (#141414) with a canvas-based animated sprite, creating a visual anchor. Container widths vary by content type: narrow text

Elevation & Depth

Depth is conveyed through subtle shadow and layering rather than aggressive drop-shadows. The elevation system uses three levels: sm (0 1px 2px rgba(0,0,0,0.06)) for minor interactive elements like hover states on list items, md (0 3px 8px rgba(0,0,0,0.15)) for cards and modals, and lg (0 8px 24px rgba(0,0,0,0.12)) for floating elements like media overlays. The dark-mode footer uses a different approach: a sticky container with backdrop-filter: blur(3rem) and background-color: rgba(0,0,0,0.73), creating a frosted-glass effect that separates it from the content below. Modals use a semi-transpar

Shapes

The shape philosophy is Soft-Technical: rounded corners are used strategically to soften the geometric rigor of the typography and grid, but never so much that the interface feels playful or organic. Buttons and inputs use 6px border-radius (0.4285em at 14px font size, or 1rem at 16px), creating a subtle softness that feels contemporary without being trendy. Cards use 1rem (16px) for a slightly more generous curve, distinguishing them from interactive elements. The full-radius (9999px) is reserved exclusively for badges and status indicators, where the circular form signals a distinct visual c

Components

Action Elements Buttons follow a strict two-state system: primary (white background, near-black text, 40px height, 10px vertical / 19px horizontal padding) and secondary (near-black background, white text, same dimensions). Both use ABC Monument Grotesk Semi-Mono at 14px with -0.04em tracking for technical credibility. Hover states shift the background color by one step in the surface stack (primary-hover uses primary-fixed-dim #ebe9e6, secondary-hover uses surface-container-high #e0ddd8) and apply a 0.25s transition. Active/pressed states apply transform: scale(0.985) for tactile feedback. Outline buttons use a 1px border at {colors.outline} with transparent background, filling to surface-container on hover. All buttons have cursor: pointer and -webkit-user-select: none to prevent tex

Do's and Don'ts

**Do**

• Do use ABC Monument Grotesk for all body and display text; reserve Semi-Mono exclusively for UI labels, buttons, and technical content.
• Do maintain the 1.56 line-height ratio (28px for 18px body) to ensure readability and breathing room.
• Do apply 0.25s transitions to all interactive state changes (hover, focus, active) for responsive but not jarring feedback.
• Do use the secondary yellow (#f6ce15) sparingly—no more than 2–3% of the interface—to preserve its accent impact.
• Do embrace negative space: never fill the viewport edge-to-edge; use lg spacing (40px) for section separation.
• Do apply box-shadow only on hover or elevated states; default interactive elements should be flat.

**Don't**

• Don't use font weights other than 400 and 700; intermediate weights introduce visual noise and dilute hierarchy.
• Don't apply border-radius to text or typography; reserve it for containers and interactive surfaces only.
• Don't use color transitions longer than 0.25s; the interface should feel responsive, not sluggish.
• Don't introduce new accent colors beyond the primary white, secondary yellow, and error red; the monochromatic palette is the brand.
• Don't use drop-shadows on default button or card states; shadows signal elevation and should appear only on interaction.
• Don't set line-height below 1.4 for body text; the generous spacing is essential to the refined aesthetic.