Beige AI

Overview

Beige AI is a creative platform designed for videographers, photographers, and content creators who demand both aesthetic refinement and technical capability. The brand embodies 'Warm Minimalism'—a design philosophy that combines the approachability of warm, earthy tones (centered on #ece1ce, a soft beige) with the precision and clarity of modern interface design. The UI evokes a sense of creative confidence: clean, uncluttered, and purposeful. Every interaction feels intentional, never frivolous. The dark canvas (#111111) serves as a neutral stage, allowing the warm accent palette to command attention without overwhelming. The emotional response is one of calm professionalism—a space where creators feel empowered to focus on their craft, not distracted by visual noise.

The brand voice is direct, encouraging, and technically literate. Beige speaks to professionals who understand composition, lighting, and post-production workflows. Vocabulary leans into creative terminology ('shoot,' 'studio,' 'edit,' 'creative work') without jargon gatekeeping. The tone is conversational but authoritative—think a mentor who has shot hundreds of projects and knows exactly what creators need. Example sentence: 'Booking a shoot has never been this easy—focus on the creative, we handle the logistics.'

Colors

The color system is anchored in a warm, sophisticated palette that prioritizes legibility and emotional resonance. Primary (#ece1ce, rgb(236, 225, 206)) is the signature accent—a soft, warm beige deployed on all call-to-action buttons, interactive elements, and brand moments. It reads as inviting and premium, never cold or corporate. On-primary is set to #1a1a1a (near-black) to ensure WCAG AAA contrast (21:1 ratio) on the primary buttons. The surface stack ranges from #050505 (surface-container-lowest, used for deeply nested UI) through #111111 (base surface) to #2d2d2d (surface-container-highest, for elevated modals and overlays). Secondary (#b18a00, a deeper golden-brown) and tertiary (#cbb38b, a muted tan) provide supporting warmth for status indicators, badges, and secondary actions. E

Typography

The type system uses a single, modern sans-serif family (ui-sans-serif / system-ui stack) across all scales, prioritizing consistency and performance. Display (64px, 700 weight, -0.02em letter-spacing) anchors hero sections and major headings with commanding presence. Headline-lg (40px, 600 weight) is reserved for section titles and modal headers. Body-md (16px, 400 weight, 24px line-height) is the workhorse for body copy, form labels, and navigation. Label-md (14px, 500 weight, 0.01em letter-spacing) is applied to buttons, badges, and UI labels to ensure crisp, scannable text. All type sizes maintain a minimum line-height of 1.5x the font size to ensure readability on both desktop and mobile. On small labels (label-sm, 12px) placed over busy backgrounds or image overlays, apply text-shado

Layout

The layout uses a fluid 12-column grid with a maximum container width of 1120px, centered on the viewport. The gutter (margin between columns) is set to 24px on desktop, reducing to 12px on tablets and 8px on mobile. White-space is treated as a first-class design element: section separation uses lg spacing (40px) to create visual breathing room, while internal card padding uses md spacing (24px). The hero section spans full width with a centered content container, allowing background imagery and gradients to extend edge-to-edge while keeping text and CTAs within the safe container. Cards and content blocks use md spacing (24px) for internal padding and lg spacing (40px) for vertical separation between sections. The design favors generous white-space over cramped layouts—this reinforces the

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic visual separation. The elevation system uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like hover states on list items, md (0 4px 12px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns, and lg (0 16px 40px rgba(0, 0, 0, 0.25)) for modals and floating panels. Shadows are soft and diffuse, never sharp or harsh, to maintain the warm, approachable aesthetic. The dark background (#111111) naturally provides contrast, so shadows are used sparingly—primarily on interactive surfaces (cards, butto

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used consistently to soften the interface while maintaining clarity and precision. Buttons use full border-radius (9999px) to create pill-shaped forms that feel friendly and clickable. Cards and containers use lg radius (1rem / 16px) for a balanced, modern appearance. Input fields and smaller UI components use DEFAULT radius (0.5rem / 8px) for a more structured, technical feel. The rationale: full-radius buttons signal 'click me' with approachability, while slightly less-rounded containers maintain visual hierarchy and prevent the in

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use the signature beige (#ece1ce) background with near-black text (#1a1a1a), full border-radius (9999px), and padding of 8px 32px for a 48px total height. Font-weight is 500 (medium) at 16px to ensure legibility and visual weight. On hover (button-primary-hover), the background shifts to primary-fixed-dim (#e8d1ab), a slightly darker beige, with a 200ms ease-out transition. Secondary buttons (button-secondary) use a transparent background with a 1px border in outline (#706e73) and on-surface text (#ffffff). On hover, the background fills with surface-container-high (#242424) and the border brightens to on-surface-variant (#d7d7d7). Ghost buttons (button-ghost) are text-only with no background

Do's and Don'ts

**Do**

• Do use primary (#ece1ce) exclusively for high-priority CTAs and brand moments—it's the signature accent and should never be diluted by overuse.
• Do maintain the dark surface (#111111) as the default background to preserve contrast and reduce eye strain in creative workflows.
• Do apply md spacing (24px) between major sections and lg spacing (40px) for visual breathing room—white-space is a design feature, not wasted space.
• Do use the full border-radius (9999px) on all buttons to signal interactivity and approachability; never use sharp corners on clickable elements.
• Do include a 200ms ease-out transition on all interactive state changes (hover, focus, active) to feel responsive without being jarring.
• Do prioritize contrast: ensure all text meets WCAG AAA standards (7:1 ratio minimum) by pairing on-surface (#ffffff) with surface (#111111).

**Don't**

• Don't use secondary (#b18a00) or tertiary (#cbb38b) as primary button backgrounds—they are supporting accents only and will dilute the brand signature.
• Don't apply shadows heavier than lg (0 16px 40px rgba(0, 0, 0, 0.25)) to avoid a heavy, dated appearance; the dark background provides sufficient depth.
• Don't mix border-radius values inconsistently—buttons are always full (9999px), cards are always lg (1rem), inputs are always DEFAULT (0.5rem).
• Don't use light backgrounds (surface-bright, surface-container-highest) for body text or large content areas; they reduce contrast and readability on the dark canvas.
• Don't animate transitions faster than 200ms or slower than 400ms—faster feels jarring, slower feels sluggish and unresponsive.
• Don't introduce new accent colors outside the defined palette (primary, secondary, tertiary, error)—consistency is the foundation of a strong brand system.