Akka

Overview

Akka is Europe's premier investment platform democratizing access to high-growth tech startups and pre-IPO companies, serving individual investors and business angels across the continent. The design system embodies 'Sophisticated Minimalism with Organic Growth'—a visual language that pairs a deep, trust-inducing dark teal foundation (#0d302d) with a vibrant, energetic accent green (#69ea9b) that signals opportunity and upward momentum. The aesthetic conveys precision, transparency, and technological confidence without sacrificing warmth; every interaction feels deliberate and rewarding. The UI transforms complex financial data into clear, navigable experiences that inspire confidence in decision-making.

Akka's voice is authoritative yet approachable, speaking to investors with respect and clarity. Tone: measured, data-driven, occasionally optimistic but never hyperbolic. The brand avoids jargon when possible, preferring concrete language: 'Rentabilidad media del 23% desde 1980' rather than 'superior risk-adjusted returns.' Personality: professional, European, slightly understated—the kind of platform a seasoned investor would trust with capital. Example sentence: 'Accede a las oportunidades tecnológicas más exclusivas de Europa, desde disruptores en fases iniciales hasta unicornios pre-IPO como Anthropic, Revolut y Epic Games.'

Colors

The color system is built on a high-contrast dark-to-light gradient that creates visual hierarchy and emotional resonance. Primary surface (#0d302d, rgb(13, 48, 45)) is a deep, sophisticated teal that evokes trust, stability, and technological sophistication—the foundation of every page. On-surface text (#e5fffd, rgb(229, 255, 253)) is a cool, light cyan that maintains 7.2:1 contrast ratio for accessibility while reinforcing the 'clarity through technology' brand promise.

Primary accent (#69ea9b, rgb(105, 234, 155)) is the signature growth color, deployed on all Call-To-Action buttons ('Lista de espera', 'Únete a la lista de espera'), interactive states, and key metrics that signal upward momentum. This vibrant, slightly desaturated green appears in gradients (--gradients--growth-light: #

Typography

The type system pairs PP Pangram (a geometric, confident sans-serif) for headlines and display text with Satoshi Variable (a humanist sans-serif) for body and UI labels, creating a visual hierarchy that balances authority with approachability. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines like 'Invierte en startups y compañías pre-IPO'; Headline-lg (48px, 700 weight) for section titles; Headline-md (32px, 600 weight) for subsections. Body-lg (18px, 400 weight, 28px line-height) is used for descriptive paragraphs and feature explanations, while Body-md (16px, 400 weight) serves as the default for form labels and secondary content. Label-md (15px, 500 weight, 20px line-height) is applied to button text and badge labels, with 0.01em tracking for subtle emphasis.

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining consistent horizontal rhythm across desktop, tablet, and mobile viewports. Container padding follows the spacing scale: 24px (md) for standard sections, 40px (lg) for major section separation, and 64px (xl) for hero and footer zones. The gutter between grid columns is 24px, ensuring adequate breathing room between content blocks. White-space is used strategically to create visual rest and guide attention: hero sections feature generous top/bottom padding (80px+), while card grids use 24px gaps between items. Mobile breakpoints compress spacing to 16px (sm) for sections and 12px (xs) for component internals, maintaining visual hierarchy at smaller scales. The design favors asymmetrical layouts (e.g., 60/40 text-

Elevation & Depth

Depth is conveyed through a layered approach combining subtle shadows, border treatments, and background color shifts rather than aggressive drop shadows. Level 1 (Base): the primary surface (#0d302d) with no shadow, establishing the foundation. Level 2 (Standard Cards): background color shifts to surface-container-high (#15423e) with a 1px border at rgba(255, 255, 255, 0.15) and a soft shadow of 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Elevated/Modals): background shifts to surface-container-highest (#1d544f) with a 1px border at rgba(255, 255, 255, 0.2) and a more pronounced shadow of 0 8px 2

Shapes

The shape philosophy is 'Technical Warmth'—rounded corners that feel modern and approachable without sacrificing clarity. Buttons use 8px (md radius) for a balanced, friendly appearance that's neither too sharp nor too soft; this radius appears on primary CTAs ('Lista de espera', 'Únete a la lista de espera'), secondary buttons, and input fields. Cards and elevated containers use 16px (lg radius, 1rem) to create a more generous, inviting feel for content blocks and modals. The full radius (9999px) is reserved for badges, pills, and circular avatars. Input fields use 8px (md) to match button st

Components

Action Elements Buttons are the primary interaction mechanism and use the full Material 3 token system. Button-primary (background: #69ea9b, text: #0d302d, padding: 16px 24px, height: 48px, radius: 8px) is the dominant CTA, appearing in header navigation ('Lista de espera'), hero sections, and form submissions. On hover, background shifts to #1de99c (primary-fixed-dim) with a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition. Button-secondary uses a transparent background with a 1px border at #69ea9b and text color #69ea9b; on hover, background becomes rgba(105, 234, 155, 0.08). Both button variants use Satoshi Variable at 15px, 500 weight, with 0.01em tracking for subtle emphasis.

Containers & Surfaces Cards (background: rgba(0, 0, 0, 0), border: 1px solid rgba(255, 255, 255, 0.15),

Do's and Don'ts

**Do**

• Do use the primary green (#69ea9b) exclusively for CTAs, active states, and growth-related metrics—never for neutral UI elements or backgrounds.
• Do maintain the 1px border at rgba(255, 255, 255, 0.15) on all cards and elevated surfaces to create subtle depth without visual clutter.
• Do apply 24px (md) spacing between major sections and 12px (sm) between component internals to create consistent visual rhythm.
• Do use PP Pangram for all headlines (display, headline-lg, headline-md) and Satoshi Variable for body text and UI labels—never mix typefaces within a single hierarchy level.
• Do include a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition on all interactive state changes (hover, focus, active) to signal interactivity.
• Do preserve the dark teal surface (#0d302d) as the dominant background—never use white or light gray as primary page background.

**Don't**

• Don't use the secondary blue (#6f8eff) or tertiary rose (#c7385f) for primary CTAs—these are supporting accents only.
• Don't apply border-radius greater than 16px (lg) to buttons or standard cards; this dilutes the 'technical warmth' aesthetic.
• Don't add drop shadows greater than 0 8px 24px rgba(0, 0, 0, 0.2)—excessive shadows undermine the minimalist design philosophy.
• Don't use system fonts (Arial, Helvetica) for body text in final designs; always specify Satoshi Variable or PP Pangram via @font-face or Google Fonts.
• Don't introduce new accent colors outside the defined palette (primary green, secondary blue, tertiary rose)—this fragments the visual identity.
• Don't reduce padding below 12px (xs) on interactive elements; this compromises touch targets and accessibility on mobile devices.