Nomu

Overview

Nomu is a merch automation platform that collapses the chaos of supply chain management into a frictionless 5-minute workflow. The brand serves DTC creators, communities, and consumer brands who want to ship custom products without juggling vendors, spreadsheets, or middlemen. The aesthetic is 'Playful Operationalism'—a fusion of whimsical mascot energy (the orange fish character) with clean, no-nonsense interface design. The UI evokes confidence and speed: warm accent colors (#ff7448 orange, #22c55e green, #635bff purple) pop against a warm cream background (#fff9f6), creating visual momentum without chaos. The emotional response is liberation: users feel they've escaped the maze.

Nomu's voice is direct, conversational, and slightly irreverent. The brand speaks to operators and makers, not corporate procurement teams. Vocabulary leans into action verbs ("ditch," "go," "ship") and concrete outcomes ("5 minutes," "no minimum," "production"). The tone is confident but never condescending—it assumes the user is smart and busy. Example: "Ditch the maze of tools, vendors and middlemen. Go from prompt to physical product in 5 minutes."

Colors

Nomu's color system balances operational clarity with playful energy. The primary accent is #ff7448 (warm coral-orange), used exclusively on CTAs, interactive states, and brand moments—it's the color users click. This warm tone reinforces speed and approachability, never cold or corporate. Secondary accent #22c55e (vibrant green) highlights success states, confirmations, and positive outcomes (e.g., "an inventory spreadsheet"). Tertiary #635bff (saturated purple) supports secondary actions and feature highlights (e.g., "Pay accent crypto"). The surface stack is anchored in #fff9f6 (warm cream, the page background), with progressive grays (#f5f1ed, #ede8e4) for container hierarchy. Text is #0f151d (near-black with slight warmth) for legibility on cream. The outline system uses #7a8490 (mute

Typography

Nomu's type system prioritizes clarity and speed. The display tier (60px, 500 weight, -0.02em tracking) anchors hero statements like "Create your dream merch on autopilot"—the weight is intentionally lighter (500, not 700) to feel modern and approachable rather than heavy. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure section breaks and card titles. Body copy is set in 16px (body-md) with 24px line-height for comfortable reading on cream backgrounds; longer-form copy uses 18px body-lg with 28px leading. Labels are 14px (label-md, 500 weight, 0.01em tracking) for buttons and form fields, with 12px label-sm (0.02em tracking) for badges and micro-copy. All typography uses Inter (Google Fonts), a neutral sans-serif that pairs well with the warm color palette. Appl

Layout

Nomu uses a 12-column fluid grid with a max-width of 1280px, centered on desktop. The page rhythm is generous: sections are separated by 64px (lg spacing) vertically, creating breathing room between hero, feature carousel, and CTA zones. The gutter (24px) is applied consistently to left/right margins on mobile and tablet, scaling to 40px (lg spacing) on desktop. The warm cream background (#fff9f6) acts as the primary canvas; white cards (surface-bright) float above it with subtle 1px borders (outline-variant: #c9cdd2) and soft shadows (0 4px 12px rgba(0,0,0,0.1)). Container padding follows the spacing scale: cards use 24px (md) internal padding, input fields use 12px (sm), and buttons use 12px horizontal / 12px vertical. The hero section spans full width with a grid background pattern (vis

Elevation & Depth

Nomu's depth model is subtle and functional, avoiding heavy shadows that would feel corporate. The base layer is the warm cream background (#fff9f6). Level 1 (cards, inputs) uses a 1px solid border in outline-variant (#c9cdd2) plus a soft shadow: 0 4px 12px rgba(0,0,0,0.1). This creates a clean, paper-like separation without drama. Level 2 (modals, dropdowns, popovers) elevates to 0 16px 40px rgba(0,0,0,0.12)—a slightly larger blur radius and offset to suggest floating above the page. Interactive elements (buttons, inputs) use a 200ms ease-out transition when changing states, creating a sense

Shapes

Nomu's shape language is 'Soft-Technical'—rounded enough to feel approachable and modern, but not so rounded as to feel playful or childish. Buttons and CTAs use full radius (9999px / border-radius: 9999px), creating pill-shaped forms that feel like tappable targets and reinforce the 'quick action' brand promise. Cards use 1.5rem (24px) radius, a moderate roundness that softens the rectangular form without sacrificing structure. Input fields use 0.5rem (8px) radius, a subtle rounding that keeps them functional and grid-aligned. Feature pills and badges use full radius (9999px) to match buttons

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses #ff7448 background, white text (rgb(251, 251, 251)), 12px vertical / 20px horizontal padding, full radius (9999px), and label-md typography (14px, 500 weight). On hover, the background shifts to #ff6a35 (darker orange) with a 200ms ease-out transition. The secondary button (button-secondary) uses white background with a 1px outline-variant border, dark text (#0f151d), and the same padding and radius. On hover, the background shifts to surface-container-high (#f5f1ed). Ghost buttons (button-ghost) have transparent backgrounds and primary-colored text; on hover, they gain a subtle rgba(255, 116, 72, 0.08) background. All buttons include a focus state with box-shadow: 0 0 0 3px rgba(255,

Do's and Don'ts

**Do**

• Do use #ff7448 (primary orange) exclusively on CTAs, hover states, and focus indicators—it's the brand's signature accent and should never be diluted.
• Do maintain the warm cream background (#fff9f6) as the primary canvas; it's essential to the brand's approachable, non-corporate feel.
• Do apply full radius (9999px) to buttons and pills to reinforce the 'fast, frictionless' brand promise.
• Do use the accent colors (#ff7448, #22c55e, #635bff) as inline feature tags and badges to create visual interest without overwhelming the interface.
• Do pair Inter typography with generous line-height (24px for body-md, 28px for body-lg) to ensure readability on warm backgrounds.
• Do use soft shadows (0 4px 12px rgba(0,0,0,0.1)) and 1px borders for elevation, never heavy drop shadows.

**Don't**

• Don't use pure white (#ffffff) as the page background; the warm cream (#fff9f6) is foundational to the brand identity.
• Don't apply #ff7448 to non-interactive elements or backgrounds—reserve it for CTAs, focus states, and brand moments only.
• Don't use sharp corners (0px radius) on buttons or cards; the soft-technical shape language requires at least 8px radius.
• Don't mix accent colors on a single button or interactive element; each component should use one primary color from the palette.
• Don't use system fonts (system-ui, -apple-system); always load Inter from Google Fonts to maintain brand consistency.
• Don't apply text-shadow or heavy outlines to body copy; rely on color contrast and weight for hierarchy instead.