Nimo

Overview

Nimo is a digital design studio brand that embraces **Architectural Minimalism**—a philosophy of radical reduction paired with strategic accent color. The aesthetic is deliberately austere: a near-black canvas (#111111) serves as the primary surface, creating a gallery-like environment where content and interaction become the focal point. The brand personality is precise, confident, and unapologetically bold. The UI evokes a sense of technical sophistication and creative clarity, as if viewing design work through a professional studio lens. Voice: direct, economical, never decorative. Example: 'We elevate brands through digital design—every pixel intentional, every interaction purposeful.'

Colors

The color system operates on a **high-contrast, accent-driven model**. Primary (#d6f345, a vivid lime-green) is the brand's signature accent, deployed exclusively on call-to-action buttons, interactive focus states, and key brand moments. It appears sparingly but with maximum impact against the dark surface stack. Secondary (#005aff, electric blue) and Tertiary (#DC3DF1, magenta) serve as supporting accents for secondary actions, status indicators, and gradient overlays. The surface stack is deliberately monochromatic: surface (#111111), surface-container (#151515), surface-container-high (#202020), and surface-container-highest (#2c2c2c) create subtle depth through incremental lightness shifts of 5–10% rather than color variation. On-surface text is set at #b5b5b5 (mid-gray) for body copy

Typography

The type system pairs **Space Grotesk** (geometric, technical, display-focused) for headlines and **Inter** (humanist, neutral, highly legible) for body and UI text. Display (120px, 700 weight, -0.04em tracking) commands attention in hero sections; Headline-lg (48px, 600 weight) anchors section breaks; Body-lg (18px, 400 weight, 28px line-height) ensures comfortable reading at standard viewing distance. Label-md (14px, 600 weight, 0.01em tracking) is used for button text and form labels, with tight line-height (20px) to maintain compact button proportions. On dark backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to small labels (12px and below) when layered over busy imagery to preserve legibility. Headline weights (600–700) create visual hierarchy without requiring size jumps;

Layout

The layout operates on a **12-column fluid grid** with a max-width of 1280px, centered on viewport. Spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (12px) for component padding, md (24px) for section gutters, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The gutter width is fixed at 24px, creating consistent breathing room between grid columns. Container padding is typically md (24px) on desktop, reducing to sm (12px) on tablet and xs (4px) on mobile. White-space is treated as a design material: generous margins between sections (lg spacing) prevent visual fatigue on the dark background, while tight internal padding (sm spacing) within cards creates a sense of density and focus. Section rhythm alternates between full-width dark

Elevation & Depth

Depth is conveyed through a **flat-with-subtle-shadows** model rather than traditional drop shadows. Level 1 (Base): the surface (#111111) with no shadow, serving as the default canvas. Level 2 (Elevated Cards): surface-container (#151515) with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), creating a soft lift. Level 3 (Modals/Overlays): surface-container-high (#202020) with box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), establishing clear separation. Hover states on interactive elements trigger a transition to the next elevation level (e.g., card-hover applies md shadow and shifts background to sur

Shapes

The shape philosophy is **Technical Precision with Approachability**. Buttons use full border-radius (9999px) to create pill-shaped affordances that feel modern and clickable; this applies to all primary and secondary buttons (padding: 6px 30px, height: 44px). Cards and containers use sm (4px) or DEFAULT (5px) radius for subtle definition without softness—sharp enough to feel intentional, rounded enough to avoid harshness. Input fields use DEFAULT (5px) radius to match card styling. Badges use full (9999px) radius to distinguish them as discrete, self-contained elements. The rationale: full-ra

Components

Action Elements Buttons are the primary interactive surface. **button-primary** uses backgroundColor: {colors.primary} (#d6f345), textColor: {colors.on-primary} (#171619), rounded: {rounded.full} (9999px), padding: 6px 30px, height: 44px, fontSize: 16px, fontWeight: 600. On hover, **button-primary-hover** shifts backgroundColor to {colors.primary-fixed-dim} (#b0a58f) with a 200ms ease-out transition. **button-secondary** uses backgroundColor: {colors.surface-container-high} (#202020), textColor: {colors.on-surface} (#b5b5b5), same dimensions and radius. On hover, it shifts to surface-container-highest (#2c2c2c) and textColor becomes primary (#d6f345), creating a visual inversion that signals secondary priority.

Containers & Surfaces **card** component uses backgroundColor: {colors

Do's and Don'ts

**Do**

• Do use primary (#d6f345) exclusively for primary CTAs and focus states—never for body text or secondary UI.
• Do maintain the dark surface stack (surface → surface-container → surface-container-high) to create subtle depth; avoid jumping more than one level in the stack.
• Do apply Space Grotesk to headlines (display, headline-lg, headline-md) and Inter to body and UI text for clear typographic hierarchy.
• Do use lg spacing (40px) between major sections and md spacing (24px) for component gutters to prevent visual fatigue on dark backgrounds.
• Do apply transition: all 200ms ease-out to interactive elements (buttons, cards, inputs) for smooth, predictable state changes.

**Don't**

• Don't use secondary (#005aff) or tertiary (#DC3DF1) as primary button backgrounds—reserve them for accents, badges, and gradient overlays.
• Don't apply shadows heavier than lg (0 16px 40px rgba(0, 0, 0, 0.5)) or the UI will feel disconnected from the dark background.
• Don't mix Space Grotesk and Inter within a single headline or body paragraph—maintain clear typographic separation by role.
• Don't reduce padding below xs (4px) or increase gutter spacing beyond xl (64px) without explicit design rationale; the system is calibrated for visual rhythm.