TOTEME

Overview

TOTEME is a luxury minimalist fashion brand that communicates through architectural precision and deliberate restraint. The design system embodies 'Refined Austerity'—a movement that rejects ornamentation in favor of structural clarity, using a monochromatic palette (near-black #090909 and off-white #ffffff) with surgical grid alignment and generous negative space. The brand serves discerning customers who view fashion as a form of intellectual expression rather than decoration. Every interface element is stripped to its functional essence: no gradients, no shadows beyond necessity, no visual noise. The emotional response is one of calm authority—the user feels they are navigating a space designed by architects, not marketers.

TOTEME's voice is precise, economical, and never breathless. The brand speaks in declarative statements without superlatives. Example: 'Uniforms signed TOTEME. Exclusive pieces. Fast shipping.' The vocabulary is direct (no 'curated,' no 'artisanal'), the sentence structure is short and parallel, and the tone assumes the customer already understands quality. Typography is the primary design tool—weight and scale do the work that color cannot. The brand personality is confident without arrogance, minimal without coldness, and intellectual without pretension.

Colors

The TOTEME color system operates on a principle of chromatic restraint: the palette is fundamentally monochromatic, with black (#090909) and white (#ffffff) as the primary anchors, supported by a carefully calibrated grayscale that provides visual hierarchy without introducing color. Primary (#090909) is the brand's signature near-black, used for all interactive elements (buttons, links, focus states) and primary text. On-primary (#ffffff) ensures maximum contrast for accessibility and legibility. The surface stack progresses from pure white (surface: #ffffff) through increasingly warm grays (surface-container-low: #f6f5f3, surface-container: #ebebeb, surface-container-high: #dfdedb) to create subtle depth without resorting to shadows. On-surface-variant (#9e9d9b) is used for secondary tex

Typography

The TOTEME type system uses Toteme Sans exclusively—a custom typeface designed to embody the brand's architectural philosophy. The system defines eight typographic levels, each with precise metrics: display (56px, 700 weight, -0.02em letter-spacing) for hero moments; headline-lg (40px, 700 weight) for section titles; headline-md (28px, 700 weight) for subsections; title-lg (20px, 700 weight) for card headers; body-lg (18px, 400 weight) for long-form content; body-md (16px, 400 weight) for standard UI text; label-md (14px, 700 weight, 0.02em letter-spacing) for buttons and form labels; and label-sm (12px, 700 weight, 0.03em letter-spacing) for badges and metadata. Weight is the primary differentiator—the system uses only 400 (regular) and 700 (bold), never intermediate weights. Line-height

Layout

TOTEME uses a fixed 12-column grid with a maximum container width of 1023px, centered on the viewport with symmetric gutters of 24px on desktop and 12px on mobile. The spacing scale is semantic: unit (8px) is the base increment; xs (4px) is used only for micro-spacing within components; sm (12px) separates inline elements; md (24px) is the standard margin between sections and the default padding inside cards; lg (40px) separates major content blocks; and xl (64px) is reserved for hero sections and full-width spacing. White space is treated as a design material, not a void—every gap is intentional and measured. Sections are separated by lg spacing (40px) on desktop, reducing to md (24px) on tablet and sm (12px) on mobile. Cards and containers use md (24px) internal padding consistently. The

Elevation & Depth

TOTEME rejects traditional shadow-based depth in favor of a flat, planar aesthetic where hierarchy is conveyed through color, typography, and spatial arrangement rather than simulated 3D effects. When elevation is necessary—for modals, dropdowns, or floating elements—use a single, subtle shadow: box-shadow: 0 0 15px rgba(0, 0, 0, 0.1). This shadow is applied only to elements that must visually separate from the background (e.g., floating action buttons, modal overlays, toast notifications). The shadow blur is 15px with 0px offset and 10% opacity, creating a soft halo effect that suggests depth

Shapes

TOTEME's shape philosophy is 'Architectural Minimalism'—corners are sharp or subtly rounded, never organic or heavily beveled. The rounded scale progresses from sm (4px) for small UI elements like badges and inline buttons, through DEFAULT (5px) for standard buttons and inputs, to md (10px) for list items and secondary containers, lg (25px) for larger cards and modals, and xl (40px) for hero sections and full-width containers. Full (50%) is reserved for circular avatars and icon buttons only. Buttons use rounded: DEFAULT (5px) to signal their functional nature while maintaining the architectur

Components

Action Elements Buttons are the primary interactive element and use a consistent 48px height (including padding) to meet accessibility targets. Primary buttons (button-primary) have backgroundColor: {colors.primary} (#090909), textColor: {colors.on-primary} (#ffffff), rounded: {rounded.DEFAULT} (5px), padding: 12px 24px, and a 1px solid border in {colors.primary}. On hover (button-primary-hover), the background shifts to {colors.primary-container} (#121212) and the text to {colors.on-primary-container} (#f6f5f3), with a 200ms ease transition. Secondary buttons (button-secondary) are transparent with a 1px border in {colors.primary}, textColor: {colors.primary}, and the same padding and height. On hover, the background becomes {colors.surface-container} (#ebebeb). All buttons use typogr

Do's and Don'ts

**Do**

• Do use the monochromatic palette as your primary design tool—let black, white, and grays carry the visual hierarchy, not color.
• Do apply consistent 8px spacing increments throughout; snap all elements to the grid and never use arbitrary pixel values.
• Do use Toteme Sans exclusively; weight (400 vs. 700) and size are the only typographic variables, never intermediate weights or serif fallbacks.
• Do apply 1px solid borders in surface-container-high (#dfdedb) to define edges; never use blurred or soft borders.
• Do use 200ms ease transitions on all interactive state changes (hover, focus, active) to signal interactivity without animation.
• Do maintain a 4.5:1 minimum contrast ratio on all text; test label-sm elements over surface-container backgrounds with text-shadow: 0 1px 2px rgba(0, 0, 0, 0.04).
• Do use the full 1023px container width on desktop to maximize negative space and reinforce the minimalist aesthetic.
• Do reserve the error color (#eb5757) for validation and alerts only; never use it as a primary accent or call-to-action.

**Don't**

• Don't introduce color beyond the monochromatic palette and error red; no gradients, no accent colors, no brand-specific hues.
• Don't use shadows for depth; the only permitted shadow is box-shadow: 0 0 15px rgba(0, 0, 0, 0.1) for floating elements like modals.
• Don't apply border-radius greater than 10px to cards or buttons; anything beyond lg (25px) feels organic and contradicts the architectural aesthetic.
• Don't use intermediate font weights (500, 600) or serif typefaces; Toteme Sans at 400 or 700 only.
• Don't add padding or margins that don't align to the 8px grid; every spacing value must be a multiple of 8px.
• Don't apply opacity changes to text for hierarchy; use weight, size, and color instead.
• Don't use animated transitions longer than 300ms; keep motion subtle and purposeful, never decorative.
• Don't override the 48px minimum height for buttons or inputs; accessibility and consistency require this standard.