Pure Ventures

Overview

Pure Ventures embodies **Sustainable Minimalism**—a design philosophy that marries austere, purposeful restraint with vibrant ecological accents. The brand serves impact-driven investors and circular-economy entrepreneurs, transforming complex sustainability narratives into clear, confident visual statements. The UI evokes trust through a dark, grounded palette (deep forest green #0a2221 as the dominant surface) while the luminous primary green (#4cde8b) signals growth, renewal, and the transformative power of circular business models. The aesthetic is neither cold nor corporate; it is deliberate, human-centered, and optimistic about systemic change.

Voice: measured, authoritative, and solution-oriented. Pure Ventures speaks in declarative statements backed by conviction. Vocabulary favors precision over flourish—"durable leaders," "circular economy," "initiatives"—reflecting the seriousness of the mission. The tone is never breathless or hyperbolic; instead, it conveys quiet confidence. Example: "We've assembled five complementary expertise areas to cover the entire chain of second-life value."

Colors

The color system is rooted in **ecological authenticity and visual clarity**. Primary (#4cde8b) is the signature accent—a vibrant, slightly desaturated green that appears on all call-to-action buttons, active navigation states, and key interactive elements. It reads as growth and environmental stewardship without veering into cliché. Secondary (#fd9676, a warm terracotta) and Tertiary (#999cff, a muted lavender) provide supporting accents for status badges, highlights, and secondary actions, ensuring visual variety without chaos.

The surface stack is anchored in a deep, sophisticated dark green (#0a2221) that serves as both background and primary container. This color is not pure black—it retains warmth and depth, evoking natural materials and grounded stability. On-surface text is pure w

Typography

The type system employs **Manrope** as the primary typeface—a geometric sans-serif that conveys modernity and clarity—paired with **Satoshi** for button labels and micro-interactions, adding a touch of personality. The hierarchy is built on weight and scale rather than multiple typefaces: Display (72px, 500 weight) anchors hero sections with authority; Headline-lg (48px, 600 weight) and Headline-md (32px, 600 weight) structure content sections; Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) carry narrative copy. Label-md (16px, 400 weight, Satoshi) is reserved for button text and interactive labels, ensuring they feel distinct and actionable.

Letter-spacing is calibrated for legibility and sophistication: Display and Headline-lg use -0.02em to -0.015em negative tracking, tighte

Layout

Pure Ventures employs a **fluid-to-fixed grid model** with a maximum container width of 1280px (991px on tablet breakpoints), ensuring content remains readable and focused on larger screens while adapting gracefully to mobile. The 12-column grid provides flexibility for asymmetric layouts—hero sections often span full width, while content cards use 4-6 column spans, creating visual rhythm through varied proportions.

White-space philosophy centers on **generous breathing room**: section separation uses lg spacing (40px) as the baseline, with xl spacing (64px) reserved for major section breaks (e.g., hero to featured companies). Gutter spacing (24px) is applied consistently between grid columns and around container edges, creating a cohesive margin system. The spacing scale is semantic—md (

Elevation & Depth

Depth in Pure Ventures is achieved through **subtle shadow layering and surface-color stratification** rather than dramatic drop shadows. The elevation system defines three levels:

**Level 1 (Base)**: The dark green surface (#0a2221) serves as the ground plane with no shadow. This is the default for body backgrounds and neutral containers.

**Level 2 (Standard Card/Hover)**: Cards and interactive elements use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft, close shadow that lifts elements 4-8px above the base. This shadow is applied to `.card` and `.button-secondary` states, signaling inte

Shapes

The shape philosophy is **Architectural Precision**—rounded corners are used strategically to soften hard edges while maintaining a sense of structure and intentionality. Buttons and primary interactive elements use lg radius (1rem / 16px), creating a friendly, approachable feel without sacrificing professionalism. Cards and containers use lg radius (1rem) for consistency, establishing a cohesive visual language. Input fields and secondary components use DEFAULT radius (0.5rem / 8px), a tighter radius that signals utility and precision. Badge elements use full radius (9999px), creating pill-sh

Components

Action Elements Buttons are the primary affordance for user intent. **Button-primary** uses primary green (#4cde8b) background with dark text (on-primary: #0a2221), 48px height, 24px horizontal padding, and lg radius (1rem). The label uses Satoshi 16px 400 weight for a friendly, approachable tone. On hover, the background shifts to primary-fixed-dim (#259454) with a 200ms ease transition, providing clear feedback without animation overload. Focus states add a 3px rgba(76, 222, 139, 0.1) box-shadow for keyboard accessibility.

**Button-secondary** uses a transparent background with a 1px primary border and on-surface text, maintaining visual hierarchy while offering an alternative action path. Hover state applies surface-container-high (#1f3a39) background, creating a subtle fill effect

Do's and Don'ts

**Do**

• Do use primary green (#4cde8b) exclusively on interactive elements—buttons, links, focus states, and active navigation. Never apply it to body text or large surface areas.
• Do maintain minimum 4.5:1 contrast between text and background; use on-surface (#ffffff) for primary text and on-surface-variant (#dbd2bb) for secondary text over dark surfaces.
• Do apply lg radius (1rem) to primary interactive components (buttons, cards) and DEFAULT radius (0.5rem) to utility elements (inputs, secondary controls) to create visual hierarchy through shape.
• Do use the spacing scale semantically: lg (40px) for section separation, md (24px) for card padding, sm (12px) for label-to-icon spacing. Never hardcode arbitrary pixel values.
• Do apply 200ms ease transitions to hover and focus states on interactive elements; avoid animations longer than 300ms to maintain responsiveness and user agency.

**Don't**

• Don't use secondary (#fd9676) or tertiary (#999cff) as primary interactive colors; reserve them for badges, alerts, and supporting accents only.
• Don't apply shadows darker than 0.2 opacity or larger than 24px blur radius; the design system prioritizes subtle elevation over dramatic depth.
• Don't mix border-radius values within a single component family (e.g., don't use both DEFAULT and lg on button variants); consistency reinforces system coherence.
• Don't use pure white (#ffffff) for body backgrounds or large surface areas; always use surface colors (#0a2221, #162d2c) to maintain the grounded, ecological aesthetic.
• Don't apply text-shadow or text-stroke to body copy; reserve these techniques for small labels over busy backgrounds where legibility is compromised.