Nitrous

Overview

Nitrous is a design-led B2B SaaS agency that marries strategic positioning with high-fidelity visual execution. The brand embodies a "Bold Minimalism" aesthetic—a design philosophy that rejects visual noise in favor of decisive, high-contrast compositions. The deep navy-to-black background (#020010) acts as a canvas for vivid accent colors (primary red #e91239, secondary coral #f93535, accent gold #ffb546), creating an atmosphere of precision and energy. The interface communicates confidence, clarity, and conversion-focused intent. Every pixel serves a purpose; every interaction is deliberate.

The Nitrous voice is direct, strategic, and outcome-oriented. The brand speaks to GTM leaders, product teams, and founders who value both aesthetics and measurable results. Vocabulary patterns emphasize motion, growth, and transformation: "power up," "drive," "deliver," "craft." The tone avoids hype; instead, it grounds claims in tangible deliverables (Webflow Premium Partner status, case studies, conversion metrics). Example sentence in brand voice: "Power up your GTM with strategic positioning and visual storytelling, delivered by our full-service in-house crew."

Colors

The Nitrous color system operates on a high-contrast, dark-first principle. The primary surface (#020010) is near-absolute black, establishing a premium, focused environment. This deep foundation is paired with a vivid primary accent (#e91239)—a true red-magenta that commands attention on CTAs, links, and interactive states. The secondary color (#f93535) provides a slightly warmer coral tone for supporting actions and highlights. Tertiary (#ffb546) introduces a warm gold accent for badges, status indicators, and secondary information layers.

Usage rules: Primary (#e91239) is reserved for the most critical CTAs ("Book a call" button), active navigation states, and focus indicators. It must always appear on {colors.surface} or {colors.surface-container} backgrounds with sufficient contrast

Typography

The Nitrous type system pairs Sora Variable (headlines, display) with Inter Variable (body, UI labels) and Montserrat (accent labels, badges). This combination creates a visual hierarchy that balances geometric precision (Sora's clean letterforms) with approachable warmth (Inter's humanist proportions). Display (100px, weight 440) is reserved for hero headlines and major section titles, commanding the viewer's attention with its scale and negative space. Headline-lg (56px, weight 600) and headline-md (40px, weight 600) break content into digestible sections, each with tight line-height (64px and 48px respectively) to maintain visual cohesion. Body-lg (18px, weight 350) and body-md (16px, weight 400) use lighter weights to reduce visual weight on dark backgrounds, improving readability at s

Layout

Nitrous employs a 12-column fluid grid with a max-width of 1280px, allowing content to breathe on desktop while remaining responsive on smaller viewports. The page rhythm is governed by a semantic spacing scale: {spacing.unit} (8px) as the base increment, with {spacing.md} (24px) used for standard padding and margins within components, {spacing.lg} (40px) for section separation, and {spacing.xl} (64px) for major layout breaks (hero to content, content to footer). The gutter width is set to {spacing.gutter} (24px), creating consistent horizontal breathing room. Container max-width of 1280px ensures that content remains scannable and focused, preventing line-length from exceeding ~75 characters on body text. White-space is treated as a design element, not wasted real estate: generous margins

Elevation & Depth

Depth in Nitrous is conveyed through a restrained shadow system and strategic use of the surface-container stack, avoiding the visual heaviness of deep shadows on dark backgrounds. Level 1 (Base): the primary surface (#020010) with no shadow, establishing the foundation. Level 2 (Standard Cards/Components): {colors.surface-container} (#15093d) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle separation from the base. Level 3 (Elevated Cards/Modals): {colors.surface-container-high} (#1f1050) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), signaling modal or prominent content. Int

Shapes

Nitrous employs a "Precision Rounded" shape philosophy—a middle ground between sharp corners and soft, organic curves. This approach reflects the brand's balance between technical rigor (Webflow development) and approachable design. Buttons and primary CTAs use {rounded.full} (9999px, pill-shaped), signaling action and forward momentum. Cards and containers use {rounded.lg} (1rem, 16px), providing visual softness while maintaining a structured, professional appearance. Input fields and form elements use {rounded.DEFAULT} (0.5rem, 8px), a subtle curve that aids visual scanning without introduci

Components

Action Elements Buttons are the primary interaction mechanism and must be visually distinct. The button-primary component uses {colors.primary} (#e91239) background with {colors.on-primary} (white) text, {rounded.full} for shape, and a 2px solid border matching the background. Height is fixed at 48px (touch-friendly), with padding 12px 28px to accommodate text. On hover, transition to button-primary-hover: background shifts to {colors.primary-fixed} (#ff5577), border updates to match, and box-shadow elevates to {elevation.md}. Transition timing: 200ms cubic-bezier(0.4, 0, 0.2, 1) for snappy, predictable motion. Active state (button-primary-active) uses {colors.inverse-primary} (#ff005c) to signal press. Secondary buttons (button-secondary) invert the logic: transparent background, {col

Do's and Don'ts

**Do**

• Do use {colors.primary} (#e91239) exclusively for primary CTAs and active states—it's the brand's signature accent and must remain visually dominant.
• Do maintain the dark-first aesthetic: {colors.surface} (#020010) is the foundation; never lighten the background to near-white unless explicitly designing a light-mode variant.
• Do apply letter-spacing of -0.04em to display headlines and -0.02em to headline-lg to reinforce the brand's precision-focused aesthetic.
• Do use {spacing.lg} (40px) and {spacing.xl} (64px) for section breaks to create visual breathing room and guide the viewer's eye through content hierarchy.
• Do transition interactive elements over 200–240ms using cubic-bezier(0.4, 0, 0.2, 1) for snappy, predictable motion that feels responsive without being jarring.

**Don't**

• Don't use {colors.secondary} (#f93535) or {colors.tertiary} (#ffb546) on primary CTAs—these are supporting accents and dilute the brand's visual focus.
• Don't apply shadows deeper than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.2)) on dark backgrounds; excessive shadows flatten the interface and reduce readability.
• Don't mix rounded-corner values within a single component family (e.g., don't use {rounded.md} on one button and {rounded.lg} on another in the same context).
• Don't center-align body text; use left-aligned text (18px, line-height 28px) to maintain a strong left edge and improve scannability.
• Don't use system fonts (system-ui, Arial, sans-serif) for headlines or body text—always specify Sora Variable, Inter Variable, or Montserrat to maintain brand consistency.