The Heart

Overview

The Heart is a venture builder operating at the intersection of innovation and execution. The design system embodies **Architectural Minimalism**—a philosophy that strips away visual noise to expose pure functional clarity. The brand serves founders, corporate partners, and research institutions seeking to transform breakthrough ideas into scalable companies. The aesthetic is deliberately austere: a monochromatic foundation (white #ffffff, black #191919, grays from #cccccc to #999999) punctuated by a single, commanding red accent (#e3151b) that appears exclusively on calls-to-action, critical UI elements, and brand moments. This restraint creates psychological weight—when red appears, users know it matters. The emotional response is one of confidence without arrogance: professional, decisive, and grounded in execution rather than hype.

The brand voice is direct, evidence-based, and action-oriented. Vocabulary favors concrete nouns (ventures, founders, builders, scale) over abstract adjectives. Tone is conversational but never casual—think a seasoned operator explaining strategy over coffee, not a cheerleader. Example sentence in brand voice: "We identify breakthrough research and build the company around it—not the other way around." The design system reinforces this through typography choices (Raleway at 700 weight for headlines conveys authority), generous whitespace (breathing room signals confidence), and the strategic deployment of the red accent (red buttons say "act now", not "maybe consider").

Colors

The color system operates on a principle of **maximum contrast and intentional restraint**. The primary palette is a near-monochromatic stack: pure white (#ffffff) as the dominant surface, a range of grays (#ececec, #dddddd, #cccccc, #999999) for hierarchy and depth, and near-black (#191919) for primary text. This creates a clean, professional canvas that feels corporate without being sterile. The primary accent color is a vivid, slightly desaturated red (#e3151b, RGB 227, 21, 27)—the brand's signature. This red is used exclusively on primary CTAs ("Discover our services", "Contact us"), hover states on interactive elements, and brand-critical moments. It must never appear on passive surfaces or body text. Secondary colors support specific use cases: blue (#0056a4) for links and secondary

Typography

The type system centers on **Raleway**, a geometric sans-serif that conveys modern professionalism while maintaining warmth. The hierarchy is built on weight and scale rather than multiple typefaces. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections and major announcements; Headline-lg (40px, 700 weight) commands section introductions; Headline-md (28px, 600 weight) breaks up content; Title-lg (20px, 600 weight) labels subsections; Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) carry narrative content with 28px and 24px line-heights respectively, ensuring readability at arm's length. Label-md (14px, 600 weight, 0.01em tracking) is used for button text, form labels, and UI chrome—the weight and tracking give it presence despite its size. Label-sm (12px, 500

Layout

The layout system uses a **12-column fluid grid** with a maximum container width of 1440px, ensuring the design scales gracefully from mobile (320px) to ultra-wide displays. The spacing scale is semantic: unit (8px) is the baseline; xs (4px) for micro-adjustments; sm (12px) for tight grouping; md (24px) for standard section padding and component spacing; lg (40px) for major section separation; xl (64px) for hero-to-content transitions. Gutter width is fixed at 24px on desktop, reducing to 16px on tablet and 12px on mobile. The container-max of 1440px prevents content from stretching excessively on large screens. Whitespace is generous—sections are separated by lg (40px) minimum, creating visual breathing room that reinforces the brand's confidence. Cards and content blocks use md (24px) in

Elevation & Depth

Depth in this system is achieved through **subtle shadow layering and border definition**, not through color darkening or glassmorphism. The elevation scale has three levels: sm (0 3px 8px rgba(0, 0, 0, 0.06)) for cards and minor containers—a barely perceptible lift; md (0 3px 8px rgba(0, 0, 0, 0.15)) for modals, popovers, and elevated cards—a clear but not aggressive shadow; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for hero overlays and top-level modals. All shadows use a 3px blur radius minimum and 8px spread to maintain softness. Borders are used sparingly: 1px solid #cccccc (outline-variant) se

Shapes

The shape philosophy is **Geometric Precision with Approachable Softness**—sharp enough to feel modern and corporate, rounded enough to avoid coldness. Border-radius follows a deliberate scale: sm (4px) for subtle rounding on inputs and small UI elements; DEFAULT (6px) for standard cards and containers; md (12px) for medium-emphasis cards and panels; lg (15px) for larger cards and secondary CTAs; xl (24px) for primary buttons and hero-adjacent elements; full (9999px) for badges and pill-shaped elements. The primary CTA button uses xl (24px) radius, creating a distinctive pill shape that signal

Components

Action Elements Primary buttons use {colors.primary} (#e3151b) background with {colors.on-primary} (#ffffff) text, {typography.label-md} (14px, 600 weight), {rounded.xl} (24px), and padding 12px 24px for a 48px total height. On hover, transition the background to #c41812 over 200ms using cubic-bezier(0.2, 0, 0, 1). The button must never have a shadow; its color provides all visual hierarchy. Secondary buttons are transparent with a 1px solid {colors.outline} border (#cccccc), {colors.on-surface} text (#191919), and the same rounded/padding as primary. On hover, fill the background with {colors.surface-container-high} (#d9d9d9) and darken the border to {colors.on-surface} (#191919). Both button variants use font-weight: 600 and letter-spacing: 0.01em for crispness.

Containers & Sur

Do's and Don'ts

**Do**

• Do use the red accent (#e3151b) exclusively on primary CTAs, critical interactive states, and brand moments—never on passive surfaces or body text.
• Do maintain generous whitespace (lg spacing, 40px minimum) between major sections to reinforce confidence and clarity.
• Do apply Raleway 700 weight to all headlines and 600 weight to labels and secondary headings for visual hierarchy.
• Do use the full surface stack (white → grays → near-black) for subtle layering; avoid introducing new colors outside the defined palette.
• Do transition all interactive states (button hover, card hover, input focus) over 200ms using cubic-bezier(0.2, 0, 0, 1) for smooth, professional motion.
• Do apply 1px solid borders (#cccccc) to cards and containers to define edges without visual heaviness.
• Do use pill-shaped buttons (24px radius) for primary CTAs to create a memorable, clickable target.

**Don't**

• Don't use the red accent on secondary buttons, disabled states, or passive UI elements—it must remain the sole chromatic focal point.
• Don't mix Raleway with other typefaces; the system is single-font by design for consistency and clarity.
• Don't apply shadows heavier than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12))—the system is flat-first with subtle depth.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the geometric precision.
• Don't reduce whitespace to fit content; instead, reflow, truncate, or use smaller type sizes at responsive breakpoints.
• Don't apply text-shadow or other effects to body text; reserve text-shadow for small labels over complex backgrounds only.
• Don't introduce new colors (blues, greens, purples) for primary UI elements; use secondary/tertiary colors only for status indicators or supporting content.