Tenity

Overview

Tenity embodies a "Bold Minimalism" aesthetic—a fintech-forward design language that pairs a deep, near-black canvas (#000000) with a vibrant hot-pink accent (#ff3e60) to signal innovation, urgency, and forward momentum. The brand serves founders, venture capitalists, and corporate innovation teams seeking clarity amid complexity. The UI evokes technological precision and confidence: every interface element is intentional, every interaction purposeful. The emotional response is one of clarity and empowerment—users feel they are accessing a sophisticated, insider platform.

Tenity's voice is direct, confident, and unadorned. The brand avoids breathless hype; instead, it speaks in concrete terms about what it does and why it matters. Vocabulary leans technical but remains accessible: "hybrid model," "convergence," "acceleration," "founders." Tone is peer-to-peer, never patronizing. Example sentence in Tenity's voice: "We back early-stage founders and partner with leading institutions—because the best fintech emerges at the intersection of capital, expertise, and audacity."

Colors

The color system is built on a high-contrast dark foundation with strategic accent deployment. **Primary (#ff3e60)** is the brand's signature hot pink, used exclusively on primary CTAs (Subscribe, Contact buttons), focus states, and key interactive elements. It commands attention without overwhelming—appearing on a 40px button with 8px 24px padding and 50% border-radius. **Secondary (#2fa1d6)** is a cool cyan-blue, reserved for secondary actions, data visualization, and supporting UI elements; it provides visual rhythm without competing with primary. **Tertiary (#4688f0)** is a brighter blue, used sparingly for tertiary actions and status indicators. **Surface stack** ranges from pure black (#000000) at the base to progressively lighter grays (#0a0a0a → #3a3a3a) for layered depth. **On-sur

Typography

The type system pairs Diagramm (a geometric sans-serif) for display and body text with IBM Plex Sans for labels and UI microcopy. Display sizes (64px, 600 weight) command hero sections with -0.02em letter-spacing to tighten the letterforms; headline-md (32px, 600 weight) anchors section breaks. Body text runs at 16–18px with 400 weight and 24–28px line-height, ensuring legibility on dark backgrounds. Labels (14px, 600 weight) use IBM Plex Sans with 0.01em letter-spacing for precision. On small labels over busy backgrounds (e.g., badge components), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) to ensure readability. The type hierarchy reinforces information hierarchy: larger, bolder text signals importance; smaller, lighter text recedes. Font loading is optimized via @font-face declaratio

Layout

The layout operates on a 12-column grid with a max-width of 1100px, centered on the viewport. The design favors a fluid, full-bleed hero section that extends edge-to-edge, then constrains content below to the container max-width. Spacing follows a semantic scale: **xs (4px)** for micro-interactions (icon padding), **sm (12px)** for component internal spacing, **md (24px)** for section gutters and card padding, **lg (40px)** for major section separation, **xl (64px)** for hero-to-content transitions. White-space is generous but purposeful—the dark background absorbs visual weight, so breathing room prevents cognitive overload. Cards and containers use 24px padding (md) with 12px gaps between elements. The gutter (24px) is applied consistently to left/right margins on desktop, scaling down o

Elevation & Depth

Depth is conveyed through a minimal shadow system and strategic use of surface-container tokens rather than aggressive drop shadows. **Level 1 (Base)**: Pure black background (#000000) with no shadow. **Level 2 (Standard Cards)**: surface-container (#1a1a1a) with a 1px border at surface-container-high (#2c2c2c) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). **Level 3 (Elevated/Modals)**: surface-container-high (#2c2c2c) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25). Hover states lift cards by transitioning background-color over 200ms, creating a subtle depth shift without animation bloat. Fo

Shapes

The shape language is **"Technical Precision with Organic Warmth"**—a hybrid of sharp geometric forms and softened corners. **Buttons** use 50% border-radius (full pill shape) to signal friendliness and approachability, contrasting with the austere dark background. **Cards and containers** use 12px border-radius (lg) for a balanced, modern feel—not too sharp (which would feel cold), not too rounded (which would feel playful). **Input fields** use 4px border-radius (DEFAULT) for a more utilitarian, technical appearance. **Badges and small UI elements** use 50% border-radius to maintain visual c

Components

Action Elements Primary buttons (button-primary) use #ff3e60 background with white text, 40px height, 8px 24px padding, and 50% border-radius. On hover, background transitions to #cc3250 (primary-container) over 200ms. Secondary buttons (button-secondary) have transparent background with 1px outline at #858585, white text, and the same dimensions; on hover, background becomes surface-container-high (#2c2c2c) with outline shifting to primary (#ff3e60). Ghost buttons (button-ghost) are transparent with no border, used for tertiary actions; on hover, they gain a subtle rgba(255, 255, 255, 0.05) background. All buttons use label-md typography (14px, 600 weight, IBM Plex Sans).

Containers & Surfaces Cards (card component) have surface-container (#1a1a1a) background, 12px border-radius,

Do's and Don'ts

**Do**

• Do use primary (#ff3e60) exclusively on high-priority CTAs and focus states—it is the brand's signature accent and loses impact through overuse.
• Do maintain high contrast: white text on black background (WCAG AAA compliant at 21:1 ratio) ensures accessibility and reinforces the bold aesthetic.
• Do apply 24px (md) padding to cards and 12px (sm) to component internals—this spacing rhythm creates visual breathing room and prevents cognitive overload.
• Do use 50% border-radius on buttons and badges to humanize the austere dark canvas without sacrificing sophistication.
• Do transition all interactive states over 200ms ease-out to maintain perceived responsiveness and polish.

**Don't**

• Don't use secondary (#2fa1d6) or tertiary (#4688f0) as primary CTAs—they dilute the brand's visual identity and confuse hierarchy.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.25)—aggressive shadows conflict with the minimalist aesthetic and feel dated.
• Don't reduce padding below 8px on buttons or 12px on cards—the dark background demands generous white-space to prevent visual fatigue.
• Don't mix rounded and sharp corners on related components (e.g., buttons and inputs)—consistency reinforces the technical-yet-warm positioning.
• Don't animate opacity or transforms on hover for more than 300ms—the brand values precision and speed; sluggish interactions feel untrustworthy.