Voxelo

Overview

Voxelo is a 3D & AI content studio that democratizes product visualization for ecommerce, transforming simple video captures into photorealistic, interactive 3D models and AR experiences. The brand serves SMEs to enterprises across footwear, apparel, and furniture verticals. The design language embraces **Warm Minimalism with Technical Precision**—a deliberate fusion of organic, earthy color palettes (warm beiges, burnt oranges, soft creams) with geometric clarity and monospace accents. This aesthetic evokes both artisanal craft and cutting-edge technology, making complex 3D workflows feel approachable and inevitable. The UI communicates confidence without arrogance: every interaction is purposeful, every surface breathes, and every accent (the signature burnt-orange primary) guides users toward action with quiet authority.

The brand voice is direct, jargon-aware, and human-centered. Voxelo speaks to makers and merchants who value efficiency and quality equally—no breathless marketing, no false promises. The vocabulary is precise: "Capture, Create, Convert" (the core workflow), "ultra-realistic," "place-in-space AR," "UG3D®" (the proprietary tech). Tone examples: "Turn a short product video into interactive 3D in ~1 hour" (concrete, outcome-focused); "See it in your room with AR" (benefit-driven, sensory). The brand personality is collaborative and grounded—a studio partner, not a vendor.

Colors

The color system balances warmth and restraint, anchored by a burnt-orange primary (#fb5e01) that commands attention on CTAs and interactive states without overwhelming the interface. The primary is paired with a rich, earthy surface palette: the default background is a warm beige (#e8e0d2), with a lighter cream (#f5f1e8) for elevated surfaces and a deeper taupe (#d2c5b5) for recessed containers. This creates a subtle, tactile depth that feels organic rather than digital. Secondary and tertiary accents—amber (#f59022) and gold (#f4b53f)—support the primary in status indicators, badges, and secondary CTAs, maintaining the warm, craft-forward aesthetic. The text color is near-black (#0a0a08) on light backgrounds, with a muted brown (#6a6358) for secondary text and disabled states. Borders us

Typography

The type system pairs Bricolage Grotesque (a geometric, humanist sans-serif from Google Fonts) for all display, headline, and body text with DM Mono (a technical monospace) for labels, metadata, and UI chrome. This pairing reinforces the brand's dual nature: craft-forward warmth meets technical precision. Display text (60px, 700 weight, -0.04em tracking) anchors hero sections with authority; headlines (40px–28px, 600 weight) organize content hierarchy with subtle negative letter-spacing (-0.02em to -0.01em) that tightens the letterforms and adds sophistication. Body text (18px–16px, 400 weight) maintains readability at -0.005em tracking, preserving the humanist character of Bricolage. Labels and metadata use DM Mono at 11px–14px with 0.06em–0.08em tracking (uppercase, all-caps) to signal t

Layout

The layout system uses a 12-column grid with a max-width of 1200px, centered with symmetric gutters of 24px on desktop (reduced to 16px on tablet, 12px on mobile). The spacing scale is semantic: `unit: 8px` as the base increment, with named scales (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) used for margins, padding, and gaps. Section separation uses `lg` spacing (40px) for major content blocks, `md` (24px) for subsections, and `sm` (12px) for component-level spacing. Cards and containers use `md` padding (24px) as the default, with `sm` (12px) for compact inputs and list items. The design favors generous white space: no section should feel cramped, and the eye should rest between content blocks. Container max-width is 1200px on desktop, with a fluid width of 100% minus 48px gutters

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through darkness or harsh contrast. The elevation system defines three primary levels: Level 1 (Base) is the default surface with no shadow; Level 2 (Standard Card/Overlay) uses `box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12)`, a soft, diffuse shadow that suggests a card floating 12px above the base; Level 3 (Modal/Elevated Panel) uses `box-shadow: 0 24px 80px rgba(0, 0, 0, 0.14)`, a larger, more pronounced shadow indicating a modal or top-level overlay. Hover states on cards add a subtle lift: `transform: translateY(-2px)` paired with

Shapes

The shape language is **Geometric Warmth**—sharp enough to feel intentional and modern, yet rounded enough to remain approachable. Border-radius follows a deliberate scale: `sm: 4px` for small, utilitarian elements (buttons, inputs, small badges); `DEFAULT: 6px` for standard cards and list items; `md: 12px` for larger cards and modals; `lg: 14px` for mega-menu cards and hero sections; `xl: 20px` for oversized containers or special components; `full: 9999px` for pills and fully-rounded badges. Buttons use `sm` (4px) to maintain a crisp, technical feel that contrasts with the warm color palette.

Components

Action Elements Buttons are the primary driver of user intent. **Primary buttons** use the gradient background (`linear-gradient(135deg, #fb5e01 0%, #ea4a05 100%)`) with white text, 8px vertical / 20px horizontal padding, 40px height, and `rounded.sm` (4px). On hover, the gradient shifts to `linear-gradient(135deg, #ea4a05 0%, #d2400a 100%)` and the button lifts 1px (`transform: translateY(-1px)`). All button transitions use `all 0.18s cubic-bezier(0.2, 0.7, 0.2, 1)` for a snappy, controlled feel. **Secondary buttons** have a transparent background with a 1px border in `{colors.outline}` (#b3a890) and text in `{colors.on-surface}` (#0a0a08). On hover, the background fills with `{colors.surface-container-high}` and the border darkens to `{colors.on-surface}`. **Ghost buttons** (used for

Do's and Don'ts

**Do**

• Do use the burnt-orange primary (#fb5e01) exclusively for CTAs, active states, and focus indicators—it's the brand's signature accent and should feel rare and intentional.
• Do maintain the warm beige surface palette (#e8e0d2, #f5f1e8) as the default background; it's the foundation of the brand's approachable, craft-forward aesthetic.
• Do pair Bricolage Grotesque (body/headlines) with DM Mono (labels/metadata) to reinforce the dual nature of craft + precision; never mix typefaces within a single text block.
• Do apply generous spacing (md: 24px for sections, lg: 40px for major blocks) to create visual breathing room and prevent the interface from feeling cramped.
• Do use subtle, warm-tinted shadows (0 12px 32px rgba(0, 0, 0, 0.12)) for elevation; avoid harsh, cool-toned shadows that conflict with the earthy palette.
• Do round corners consistently: 4px for buttons/inputs, 12px for cards, 14px for mega-menu cards—never deviate without explicit design rationale.
• Do apply the primary gradient (linear-gradient(135deg, #fb5e01 0%, #ea4a05 100%)) to primary buttons and hover states for a sense of motion and depth.

**Don't**

• Don't use the primary color (#fb5e01) for body text, backgrounds, or non-interactive elements—reserve it exclusively for actions and focus states to maintain visual hierarchy.
• Don't apply harsh, high-contrast shadows (e.g., 0 20px 60px rgba(0, 0, 0, 0.3)) that feel digital or cold; stick to the warm, diffuse shadow scale (0.12–0.14 opacity).
• Don't mix rounded and sharp corners on similar components; if buttons use 4px, all buttons should use 4px unless there's a clear hierarchy reason (e.g., mega-menu cards at 14px).
• Don't use system fonts (system-ui, -apple-system) for body or headlines; always load Bricolage Grotesque and DM Mono from Google Fonts to maintain brand consistency.
• Don't reduce or remove border-radius on hover or active states; maintain the shape language across all interaction states to preserve visual coherence.
• Don't apply the primary color to secondary or tertiary buttons; use borders and background fills instead to preserve the accent's exclusivity.
• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds; use the on-* color tokens (#ffffff for primary buttons, #3a1a0a for primary-container badges) for proper contrast and warmth.