NMA.vc

Overview

NMA.vc embodies a 'Tech-Forward Minimalism' aesthetic—a design philosophy that prioritizes clarity, directness, and purposeful use of color to guide user attention. The brand serves venture-backed founders and corporate innovation teams, delivering acceleration programs and advisory services with the precision of a technical instrument and the warmth of a trusted partner. The UI employs a predominantly white canvas (rgb(255, 255, 255)) with deep charcoal text (rgb(55, 53, 47)) as the foundation, punctuated by a signature lime-green accent (rgb(88, 192, 65)) that signals actionability, growth, and forward momentum. This accent appears on primary CTAs, key interactive elements, and brand touchpoints, creating a visual hierarchy that feels both energetic and controlled.

The brand voice is direct, confident, and grounded in operational expertise. NMA speaks in the language of founders—concrete, outcome-focused, and free of corporate jargon. Tone examples: 'We accelerate early-stage tech startups' (not 'We facilitate innovation ecosystems'). 'Venture clienting' (not 'strategic partnership optimization'). The typography system uses Space Grotesk exclusively, a geometric sans-serif that conveys technical sophistication while remaining approachable. Example sentence in brand voice: 'Since 2015, we've backed 200+ startups through acceleration, investment, and venture services—we have the model that works for you.'

Colors

The color system operates on a principle of 'Intentional Restraint': a clean white surface (rgb(255, 255, 255)) serves as the default canvas, with a carefully curated neutral palette for secondary surfaces and text. Primary (rgb(88, 192, 65)) is the brand's signature accent—a vibrant, slightly desaturated lime-green that appears exclusively on CTAs, active states, and brand-critical interactive elements. This color is never used for body text, backgrounds, or passive UI; it is reserved for moments of user action and brand assertion. Secondary colors (teal rgb(15, 123, 108) and blue rgb(11, 110, 153)) are used sparingly for status indicators, secondary CTAs, and data visualization. On-surface text defaults to rgb(55, 53, 47), a warm charcoal that reads comfortably against white at 16px body

Typography

Space Grotesk is the sole typeface family, loaded in weights 400 (regular), 500 (medium), 600 (semibold), and 700 (bold) via @font-face declarations. The type scale is built on a geometric progression: display (60px, 700 weight) for hero headlines, headline-lg (40px, 700 weight) for section titles, headline-md (28px, 600 weight) for subsections, title-lg (20px, 600 weight) for card headers, body-lg (18px, 400 weight) for introductory paragraphs, body-md (16px, 400 weight) for standard body copy, label-md (14px, 600 weight) for UI labels and button text, and label-sm (12px, 700 weight) for badges and metadata. Line-height is set to 1.5x the font size for body text (28px for 18px body-lg, 24px for 16px body-md) to ensure comfortable reading at typical viewing distances. Headlines use tighter

Layout

The page layout uses a fluid 12-column grid with a maximum container width of 1200px, centered on the viewport. Horizontal padding follows a responsive scale: 24px (md spacing) on desktop, reducing to 24px on tablet and mobile (enforced via CSS media queries at 680px breakpoint). Vertical rhythm is governed by the lg spacing token (40px) for section separation, md spacing (24px) for component padding and card interiors, and sm spacing (12px) for internal element spacing within cards or lists. The hero section uses a 240px bottom padding to create breathing room before secondary content. Grid gutters are set to 24px between columns. Container max-width is 1200px, with a minimum safe-area inset of 24px on mobile devices (env(safe-area-inset-left) and env(safe-area-inset-right)). White space

Elevation & Depth

Depth in this system is achieved through a three-tier shadow and surface hierarchy, avoiding the glassmorphism or blur effects common in contemporary design. Level 1 (Base/Flat): no shadow, surface color rgb(255, 255, 255) with a 1px border at rgba(221, 221, 221, 1) for definition. Level 2 (Raised/Card): box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), used on standard cards, input fields, and default button states. Level 3 (Elevated/Modal): box-shadow 0 8px 24px rgba(0, 0, 0, 0.12), reserved for modals, dropdowns, and hover states on interactive elements. Hover transitions apply a 200ms ease-in-out

Shapes

The shape philosophy is 'Technical Precision'—minimal rounding that signals approachability without sacrificing the geometric clarity of the brand. Border-radius follows a strict scale: sm (3px) for small UI elements like badges and tight inputs, DEFAULT (4px) for standard buttons and form fields, md (6px) for cards and larger containers, lg (8px) for modals and prominent surfaces, xl (12px) for hero sections and full-width containers, and full (9999px) for pill-shaped elements (tags, badges, rounded buttons). Buttons use DEFAULT (4px) to maintain a technical feel while remaining friendly. Car

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use background-color rgb(88, 192, 65), text-color rgb(255, 255, 255), padding 12px 16px, height 40px, border-radius 4px, and label-sm typography (12px, 700 weight). On hover, background-color transitions to rgb(74, 173, 47) over 150ms. On active/pressed, background-color becomes rgb(61, 143, 38). Secondary buttons use a transparent background with a 1px border in primary color, same padding and height, and text-color rgb(88, 192, 65). On hover, background-color becomes rgb(194, 244, 77) (primary-container) with text-color rgb(26, 55, 0) (on-primary-container). All buttons include a transition property: 'background-color 150ms ease-in-out, color 150ms ease-in-out' to signal responsiveness.

Containers & Sur

Do's and Don'ts

**Do**

• Do use primary green (rgb(88, 192, 65)) exclusively on CTAs, active states, and brand-critical interactive moments—never on passive backgrounds or body text.
• Do maintain 24px (md) padding inside cards and 40px (lg) spacing between major sections to create visual breathing room and reduce cognitive load.
• Do apply Space Grotesk at 700 weight for all headlines and 600 weight for subheadings to create visual hierarchy and technical authority.
• Do use 150ms ease-in-out transitions on all interactive state changes (hover, focus, active) to signal responsiveness without distraction.
• Do keep border-radius between 3–8px to maintain the 'Technical Precision' aesthetic; avoid rounded corners larger than 12px except for full-width hero sections.

**Don't**

• Don't use primary green on body text, backgrounds, or passive UI elements—it is reserved for actionable moments only.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12); deeper shadows dilute the clean, minimalist aesthetic.
• Don't mix typefaces; Space Grotesk is the sole font family across all weights and sizes.
• Don't use border-radius larger than 12px on standard components; reserve xl (12px) for hero sections and full-width containers only.
• Don't apply transparency, gradients, or blur effects to surfaces; the system relies on solid colors, precise shadows, and 1px borders for hierarchy.