TRIONN

Overview

TRIONN is an independent AI-powered digital studio that crafts meaningful brand experiences through strategy, design, and technology. The design system embodies 'Architectural Minimalism with Dynamic Accents'—a high-contrast, precision-driven aesthetic that pairs a near-black canvas (#040508) with crisp light neutrals (#d8d8d8) and strategic bursts of warm orange-red (#ff6b35) to signal interactivity and energy. The brand serves ambitious global brands seeking premium digital products, immersive experiences, and strategic clarity. The UI evokes a sense of technological sophistication, clarity, and intentional restraint—every pixel serves a purpose, every interaction feels deliberate.

The voice is direct, precise, and unapologetically technical without being cold. TRIONN speaks in declarative statements: 'Designed to mean something.' 'Hold to blast. Dare to touch the lines.' The vocabulary favors action verbs, architectural metaphors, and forward momentum. Tone is confident but never breathless; the brand respects the user's intelligence and time. Example sentence in brand voice: 'We build websites, AI products, brands, and systems for clarity, scale, and impact.'

Colors

The color system is rooted in extreme contrast and intentional restraint. The primary surface (#040508, rgb(4, 5, 8)) is a near-absolute black that anchors the entire interface and provides maximum legibility for light text. On-surface text (#d8d8d8, rgb(216, 216, 216)) is a warm light gray—not pure white—which reduces eye strain and maintains visual warmth against the cold background. The outline color (#434343, rgb(67, 67, 67)) serves as a subtle divider and border accent, while outline-variant (#555555) provides a slightly lighter alternative for secondary dividers and disabled states.

Primary (#ffffff) is reserved exclusively for call-to-action buttons and interactive elements that demand immediate attention. It is never used for body text or passive surfaces. On-primary (#040508) ens

Typography

The type system pairs two distinct typefaces to create visual hierarchy and emotional resonance. Familjen Grotesk (400 weight, -0.02em letter-spacing) is used for display and headline scales (80px down to 32px), delivering a clean, geometric presence that feels contemporary and architectural. Neue Haas Display (400 weight, 0em letter-spacing) handles body and label scales (18px down to 14px), providing excellent legibility and a slightly warmer, more humanistic feel. Martian Mono (400 weight, 0.05em letter-spacing) is reserved for the smallest label-sm scale (12px) and technical metadata, reinforcing the brand's tech-forward positioning.

Line-height is set generously: display text uses 88px (1.1x), headlines use 56px (1.17x), and body text uses 28px (1.56x), creating ample breathing room

Layout

The layout system uses a 12-column grid with a maximum container width of 1440px, providing flexibility for both desktop and responsive scales. The spacing scale is anchored to 4px units: xs (4px), sm (12px), md (24px), lg (40px), xl (64px). The gutter between sections is consistently 32px, creating a rhythm that feels spacious without being wasteful. White-space is used strategically to separate content zones and reduce cognitive friction—sections are separated by lg spacing (40px), while internal card padding uses md spacing (24px).

The page rhythm follows a 'breathing' model: hero sections occupy 100% viewport height with generous padding (32px horizontal, 40px vertical minimum), allowing the headline and accent elements to command attention. Content sections below use the full 1440px

Elevation & Depth

Depth in this system is achieved through layering, borders, and subtle shadows rather than dramatic drop-shadows. The elevation model uses three primary levels: Level 1 (Base) is the surface itself (#040508) with no shadow; Level 2 (Standard Card) uses a 1px solid border at #434343 (outline) with a soft shadow of 0 4px 12px rgba(0, 0, 0, 0.15); Level 3 (Elevated/Modal) uses the same border treatment but with a stronger shadow of 0 16px 40px rgba(0, 0, 0, 0.2). The border is the primary visual separator—it creates a crisp, architectural edge that feels intentional and technical. Shadows are sof

Shapes

The shape philosophy is 'Geometric Precision with Selective Softness.' Most UI elements use sharp, technical border-radii: buttons and badges use full (9999px) for pill-shaped CTAs, cards use md (8px) for a subtle softness that prevents harshness, and inputs use DEFAULT (4px) for minimal rounding that maintains a technical feel. The 8px radius on cards is the sweet spot—it's soft enough to feel contemporary and approachable, but sharp enough to maintain the architectural, grid-like precision that defines the brand. Larger elements like modals and panels use lg (12px) to create visual hierarchy

Components

Action Elements Buttons are the primary interactive element and come in three variants: primary (white background, full radius 9999px, 48px height, 12px 32px padding), secondary (transparent with 1px border at rgba(255, 255, 255, 0.2), full radius), and accent (orange-red background #ff6b35, full radius, same padding). All buttons use label-md typography (14px, 400 weight). On hover, primary buttons transition to primary-fixed-dim (#d8d8d8) with a 150ms ease-out timing function. Secondary buttons gain a background of rgba(255, 255, 255, 0.1) and a brighter border at rgba(255, 255, 255, 0.3). Accent buttons transition to secondary-fixed-dim (#ff6b35 darkened by 15%). All button transitions use cubic-bezier(0.4, 0, 0.2, 1) for a snappy, responsive feel.

Containers & Surfaces Cards u

Do's and Don'ts

**Do**

• Do use primary (#ffffff) exclusively for CTAs and interactive elements—never for passive surfaces or body text.
• Do maintain the 1px border on all cards and elevated surfaces; it is the primary visual separator and creates architectural precision.
• Do apply the full radius (9999px) only to buttons and badges; use md (8px) for cards and DEFAULT (4px) for inputs to maintain visual hierarchy.
• Do use the secondary accent (#ff6b35) sparingly—only on hero elements, key interactive states, and status badges to signal energy and forward momentum.
• Do pair Familjen Grotesk for headlines and Neue Haas Display for body text; never mix typefaces within a single scale.
• Do use md spacing (24px) for section separation and card padding; it is the rhythm anchor for the entire layout.
• Do apply focus shadows (0 0 0 3px rgba(255, 255, 255, 0.1)) to interactive elements on focus; they signal interactivity without breaking minimalism.

**Don't**

• Don't use pure white (#ffffff) as a background or surface color; it breaks the dark, architectural aesthetic. Use surface-container (#161b24) or surface-container-high (#242a35) instead.
• Don't apply drop-shadows larger than 0 16px 40px rgba(0, 0, 0, 0.2); the system relies on borders and subtle shadows, not dramatic depth.
• Don't use rounded corners larger than lg (12px) on cards or panels; it softens the technical precision that defines the brand.
• Don't mix typeface weights within a single scale; Familjen Grotesk and Neue Haas Display are both 400 weight for consistency.
• Don't use the secondary accent (#ff6b35) on passive elements like dividers or disabled states; reserve it for active, interactive moments.
• Don't reduce padding below sm (12px) on buttons or cards; the system values breathing room and legibility over density.
• Don't apply text-shadow to body text or headlines; use it only on small labels (label-sm) over busy backgrounds to maintain legibility.