TRIONN Design System

Overview

TRIONN presents itself as an AI-powered creative studio operating in the space between brutalist minimalism and refined Swiss editorial design. The visual system is built on a near-black void—a deep, absorptive darkness that allows the studio's work and words to emerge with theatrical precision. There is no gradient wash, no atmospheric blur, no soft ambient glow; instead, the design relies on absolute contrast between the dark substrate and carefully placed elements of {colors.ink} (#d8d8d8—a cool, restrained mid-gray) and pure {colors.accent} (#ffffff) voltage points.

The typography defines the entire experience. Familjen Grotesk Variable operates at massive scales—{typography.display-lg} at 90px with a compressed line height of 81px and aggressively negative letter-spacing of -5.4px. This is not merely large type; it is architectural lettering, where characters interlock with intentional tightness. Headlines feel carved rather than set. Below this monumental layer, Neue Haas Display Roman (a custom-hosted face with Arial fallback metrics) handles body copy at {typography.body-md}'s 16.2px, delivering the warmth and precision expected from a studio rooted in European typographic tradition. A third face, PP Editorial New Ultralight, and Martian Mono Light are loaded in the font stack for potential micro-copy accents and technical annotations, though they appear sparingly in the extracted DOM.

Brand voltage is deployed with extreme restraint. It does not live in a saturated primary color—indeed, the "primary" token maps to the same {colors.ink} value used for body text. Instead, brand emphasis manifests through shape language (the ubiquitous {rounded.pill} treatment on interactive elements) and opacity modulation: translucent circles of {colors.surface-translucent} (rgba(216, 216, 216, 0.1)) serve as icon button backgrounds, brightening to 0.2 opacity on hover. The only true chromatic departure is the solid-white CTA button ({component.cta-primary-button})—a floating pill of pure {colors.accent} that acts as the singular call-to-action anchor across the experience.

The shape vocabulary is intentionally narrow: nearly every interactive element resolves either to a perfect circle/pill ({rounded.pill} at 9999px) or a subtly rounded rectangle ({rounded.md} at **7.2px). This binary—either infinite roundness or barely-perceptible softness—creates a visual rhythm that feels both futuristic (the pill) and grounded (the slight radius). Input fields, notably, carry {rounded.md}`, distinguishing them from the more "designed" button elements.

Sub-systems observable in the DOM suggest a loading/preloader dialect (the pl-overlay system with slot-machine counters, flying-plus animations, and tagline word-reveal sequences) distinct from the editorial content dialect (section-based layouts with generous vertical rhythm). A form/contact dialect also emerges with transparent-background inputs carrying subtle borders, suggesting embedded contact modules within the scrolling narrative.

Key Characteristics

• Canvas operates in dark mode with {colors.surface-void}-depth backgrounds, surfaced elements rendered in {colors.ink} (#d8d8d8) and {colors.accent} (#ffffff)
• Display typography peaks at {typography.display-lg} (90px / -5.4px tracking) in Familjen Grotesk, establishing a monumental editorial voice
• Body copy runs {typography.body-md} (16.2px / weight 400) in Neue Haas Display Roman, never bolded, never condensed
• All primary interactive surfaces use {rounded.pill} geometry—icon buttons, CTA anchors, and tag pills share the infinite-radius treatment
• Translucency is the primary interaction signal: {colors.surface-translucent} (10% white-on-dark) lifts to 20% on hover via transition-all duration-300
• Spacing follows an irregular but intentional scale anchored at {spacing.xl} (36px) for component padding and {spacing.section} (108px) for vertical section rhythm
• Border treatments are universally subtle: {colors.hairline} at 15% opacity black for inputs, {colors.border-light} at 80% white for outlined CTAs
• Motion is cubic-bezier-driven at 300ms default with opacity-only transitions for most state changes; keyframe animations handle loader choreography (arrowPulse, shake, ts-borderPulse)
• The loading overlay represents a signature moment: animated counter reels, staggered word reveals ("Inspire · Innovate · Impact"), and orbiting plus-sign motifs create a branded waiting experience

Colors

Brand & Accent

• Primary ({colors.primary} — #d8d8d8): The dominant foreground color serving double duty as both brand identifier and primary text ink. Applied to headlines, body copy, navigation labels, and decorative elements throughout the interface.
• Primary Hover ({colors.primary-hover} — #e8e8e8): Slightly lightened variant for interactive hover states on text links and non-button foreground elements.
• Primary Active ({colors.primary-active} — #c8c8c8): Pressed-state variant, darkened slightly from base primary to provide tactile feedback.
• Accent ({colors.accent} — #ffffff): Pure white reserved exclusively for high-emphasis surfaces—the {component.cta-primary-button} fill, the {component.icon-circle-button} stroke/icon color, and select decorative flourishes. This is the only element in the system that reaches maximum luminance.

Surface

• Canvas ({colors.canvas} — #d8d8d8): The nominal canvas token per the pre-assigned value; in practice this maps to the light-foreground treatment applied to elevated surfaces and specific container backgrounds within the dark-mode context.
• Surface Dark ({colors.surface-dark} — #1a1a1a): The primary page background depth—a rich, warm-tinted near-black that absorbs surrounding content and provides the void against which all lighter elements register.
• Surface Void ({colors.surface-void} — #0a0a0a): Absolute black used for deepest immersion zones—the preloader backdrop, modal overlays, and any surface requiring maximum visual recession.
• Surface Elevated ({colors.surface-elevated} — #242424): Slightly lifted dark surface for cards or panels requiring subtle separation from the base dark background without introducing border lines.
• Surface Translucent ({colors.surface-translucent} — rgba(216, 216, 216, 0.1)): 10%-opacity white-on-dark treatment forming the background of {component.icon-circle-button} and other ghost-style interactive elements.
• Surface Translucent Hover ({colors.surface-translucent-hover} — rgba(216, 216, 216, 0.2)): Brightened 20% opacity variant applied on mouse-hover over translucent-backed elements.

Text

• Ink ({colors.ink} — #d8d8d8): Primary reading color—cool mid-gray optimized for extended readability against dark backgrounds without the harshness of pure white. Used for headlines, paragraphs, and UI labels.
• Body ({colors.body} — #434343): Darker gray reserved for input field placeholder/text content and secondary information rendered on lighter surfaces (form contexts, inverted cards).
• Muted ({colors.muted} — #888888): Tertiary text level—timestamps, metadata, captions, and de-emphasized supporting copy that should recede visually.
• Muted Soft ({colors.muted-soft} — #666666): Deepest muted tier for disabled text states, legal disclaimers, or extremely subordinate information.
• On Primary ({colors.on-primary} — #111111): Near-black text color for rendering atop light-colored surfaces such as the {component.cta-primary-button} (white background). Ensures WCAG AA compliance against #d8d8d8 and #ffffff backgrounds.
• On Dark ({colors.on-dark} — #d8d8d8): Alias for ink when specifically referencing text-on-dark-surface contexts.
• On Surface ({colors.on-surface} — #d8d8d8): Alias for standard surface text, maintaining consistency across elevated containers.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(67, 67, 67, 0.15)): Subtle 15%-opacity dark border used on form inputs ({component.text-input}), creating definition without visual weight.
• Border Strong ({colors.border-strong} — rgba(216, 216, 216, 0.25)): More visible quarter-opacity light border for outlined button variants and container edges requiring clear delineation.
• Border Light ({colors.border-light} — rgba(255, 255, 255, 0.8)): High-opacity white border for the {component.cta-primary-button} outline, providing crisp edge definition on the white-filled pill.

Semantic

• Error ({colors.error} — #ff4444): Warm red for validation failures, error states, and destructive action indicators.
• Success ({colors.success} — #44cc66): Cool green for confirmation states, successful submission feedback, and positive status indicators.
• Warning ({colors.warning} — #ccaa44): Amber/gold for cautionary messages, attention-required states, and pending-status indicators.
• Info ({colors.info} — #4488cc): Blue for informational callouts, help text references, and neutral system notifications.

Typography

Font Family

TRIONN employs a curated two-face type system with two additional faces available for specialized contexts. Familjen Grotesk Variable (self-hosted woff2) serves as the display and headline face—a contemporary grotesque with variable-weight capability, though the system exclusively uses its Regular (weight 400) cut. Its character is modern, slightly geometric, and exceptionally confident at scale. Neue Haas Display Roman (also self-hosted woff2 with a carefully calibrated Arial fallback using ascent/descent/line-gap overrides at 87.46%/19.46%/21.38% adjustment factors) handles all body text, UI labels, button copy, and functional microcopy. Neue Haas brings the humanist warmth and Swiss precision expected from premium studio work.

Additionally loaded but lightly utilized in the current view: PP Editorial New Ultralight (an elegant serif with extreme thin strokes, fallback-adjusted at 82.2% size metric) potentially reserved for pull quotes or luxury-brand sub-sections, and Martian Mono Light (a geometric monospace, adjusted at 153.41% size metric) likely destined for technical specifications, code snippets, or data readouts. Both faces are declared in @font-face blocks with font-display: swap for performant loading.

The fallback strategy is sophisticated: each proprietary face has a corresponding "FaceName Fallback" entry that remaps local Arial with precise metric overrides to prevent layout shift during webfont loading. This indicates a mature, production-grade approach to web typography.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 90px | 400 | 81px | -5.4px | Hero H1, major section openers | | {typography.display-lg} | 90px | 400 | 81px | -5.4px | Primary headlines, statement type | | {typography.title-md} | 85.5072px | 400 | 81px | -5.13043px | Secondary display, oversized labels | | {typography.title-sm} | 32.4px | 400 | 32.4px | -1.296px | Section headings (H3), card titles | | {typography.body-md} | 16.2px | 400 | normal | normal | Paragraph text, body copy, descriptions | | {typography.body-sm} | 14.4px | 400 | normal | normal | Secondary body text, supporting copy | | {typography.caption} | 12.6px | 400 | normal | normal | Metadata, timestamps, legal text, nav items | | {typography.button} | 15.3072px | 400 | 1.2 | 0 | Button labels, CTA text | | {typography.label} | 16.2px | 400 | normal | normal | Form input labels, field descriptors |

Principles

The typography system operates on a philosophy of scale-over-weight hierarchy. Every type role sits at weight 400 (Regular)—there is no Bold, no SemiBold, no Medium anywhere in the extracted hierarchy. Emphasis is achieved purely through size differential: the gap between {typography.display-lg} (90px) and {typography.title-sm} (32.4px) is nearly 3x, creating a dramatic cascade that requires no weight intervention. This is a deliberate, confident choice that aligns with high-end editorial and fashion-studio conventions where bold weight feels crude.

Letter-spacing is aggressively negative at display sizes (-5.4px at 90px equals roughly -6% of em-width), pulling the massive letterforms into tight architectural clusters that feel bespoke and expensive. As size decreases, tracking relaxes proportionally: {typography.title-sm} at 32.4px carries -1.296px (~-4%), while body sizes revert to normal (browser-default, typically 0). This graduated tracking creates optical consistency across the size spectrum.

Line heights are deliberately compressed at display sizes (81px for 90px type = 0.9 ratio), causing lines of large type to sit intimately—almost overlapping—which enhances the "carved-in" sensation. At body sizes, line-height returns to normal (~1.2–1.4 depending on font metrics), ensuring comfortable reading flow for paragraph content.

Uppercase transformation is selectively applied to button text and certain navigational/link elements (observed in the {component.text-link-button} class with textTransform: uppercase), creating a micro-system of "shouted" interactive elements that contrast with the predominantly sentence-case editorial voice.

Note on Font Substitutes

For implementations unable to self-host the proprietary typefaces, map as follows:

• Familjen Grotesk Variable → Inter (Google Fonts) or Plus Jakarta Sans for a similar geometric-grotesque character with variable support. Define CSS variable --font-display: 'Inter', sans-serif.
• Neue Haas Display Roman → Helvetica Now Display (if licensed) or IBM Plex Sans for the closest open-source match in weight and proportions. Define --font-body: 'IBM Plex Sans', sans-serif.
• PP Editorial New Ultralight → Cormorant Garamond 200 or Playfair Display 200 for serif elegance. Define --font-editorial: 'Cormorant Garamond', serif.
• Martian Mono Light → JetBrains Mono 300 or Space Mono for monospace technical contexts. Define --font-mono: 'JetBrains Mono', monospace.

Always maintain the font-display: swap declaration and provide the metric-override fallback strategy shown in the source @font-face blocks to prevent cumulative layout shift (CLS) penalties.

Layout

Spacing System

• Base unit: Derived from the irregular scale present in extracted spacing values, the system orbits around a 7px minor unit and 14px major unit (double), with 36px as the component-padding module and 108px as the sectional rhythm unit.
• Tokens: {spacing.xxs} (1px) for hairline gaps and borders; {spacing.xs} (2px) for micro-separators; {spacing.sm} (5px) for tight internal spacing; {spacing.md} (7px) for baseline grid alignment; {spacing.lg} (14px) for element-to-element gaps; {spacing.xl} (36px) for component internal padding (buttons, cards, inputs); {spacing.xxl} (72px) for major block separations; {spacing.section} (108px) for vertical section padding (top/bottom margins on <section> elements).
• Section padding (vertical): {spacing.section} — applied uniformly to section containers (padding: 108px 0px 50.4px observed), creating generous breathing room between content bands.
• Card internal padding: Components use {spacing.xl} (36px) or calculated multiples thereof; the CTA button uses 5.4px 14.4px 7.2px vertically asymmetric padding for optical centering.
• Gutters: Horizontal gutters are managed through the 1440px max-width container with implicit auto-margins; internal grid gaps utilize {spacing.lg} (14px) increments.

Grid & Container

• Max content width: 1440px enforced at both <main> and <section> levels, creating a fixed-wide canvas that feels expansive on standard displays without stretching to edge-to-edge on ultrawide monitors.
• Editorial density: The layout chooses spaciousness—sections breathe with 108px vertical padding, headlines occupy 90px with minimal surrounding clutter, and the single-column hero structure (text + optional visual) avoids cramped multi-column bodies typical of dashboard interfaces.
• Grid behaviors at desktop: The extracted DOM suggests a primarily single-column or centered-stack layout pattern (consistent with portfolio/studio landing pages) rather than complex multi-column grids. Content flows vertically through banded sections.
• Hero column splits: The above-fold structure (visible in the preloader/overlay markup) centers content with a logo-lockup, tagline word-reveal sequence ("Inspire · Innovate · Impact"), and a three-slot counter reel—all stacked vertically in a centered modal-like composition.

Whitespace Philosophy

Whitespace in the TRIONN system is assertive rather than passive. It is not merely empty space; it is a structural material given as much intention as the filled areas. The dark void background ({colors.surface-void}) acts as active negative space, making every placed element feel deliberate and isolated. Section breaks of {spacing.section} create rhythmic pauses in the scroll narrative. Within components, padding is asymmetrical where needed for optical balance (the CTA button's pt-1.5 pb-2 reflects manual tuning), and gaps between inline elements respect the 7px/14px lattice. The overall impression is gallery-like: each section is a framed installation viewed in isolation from its neighbors.

Header Architecture

+--------------------------------------------------------------------------------------------------+
| [LOGO]                                          [NAV_LINKS...]              [CTA_BUTTON] [ICON]   |
+--------------------------------------------------------------------------------------------------
| ← 1440px max-width centered, 36px vertical padding (spacing.xl) → |

The header occupies a full-width bar with {spacing.xl} (36px) top/bottom padding, containing a flush-left logo mark, center-weighted navigation links, and flush-right utility actions (CTA + menu icon). The background is transparent (rgba(0, 0, 0, 0)), allowing underlying content or the dark page background to show through. No persistent bottom border or shadow separates the header from content—it floats.

Hero Section / Loading Overlay

+--------------------------------------------------------------------------------------------------+
|                                                                                                   |
|                                    [FLYING_PLUS_1]           [FLYING_PLUS_2]                      |
|                                                                                                   |
|                          +---------------------------+                                              |
|                          |   [LOGO_BLACK_BOX]        |                                              |
|                          |   [LOGO_SVG_MARK]         |   ← Centered lockup                        |
|                          | [+CORNER_DECOS x4]       |                                              |
|                          +---------------------------+                                              |
|                                                                                                   |
|                    Inspire  ·  Innovate  ·  Impact      ← Tagline (title token, revealed)          |
|                                                                                                   |
|                         [SLOT_REEL][SLOT_REEL][SLOT_REEL]  ← Counter animation                   |
|                                                                                                   |
|            [BELT_1]  [BELT_2]  [BELT_3]  [BELT_4]  [BELT_5]  [BELT_6]  [BELT_7]  [BELT_8]         |
|                                       ← Scrolling marquee belts (background layer)                |
+--------------------------------------------------------------------------------------------------+

This overlay/preloader structure represents a signature branded moment: a full-viewport dark panel (pl-overlay active) hosting multiple animation layers. The center contains the logo lockup (black box + SVG marks + corner plus decorations), followed by the tagline with individually-revealed words using .pl-tag-word.title.visible classes, then a three-column slot-machine counter reel (pl-slot-reel), all backed by eight horizontal scrolling belts (pl-belt) and four orbiting plus-sign icons (pl-flying-plus with SVG crosshairs). This is not static layout—it is temporal choreography.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 – Base | Flat {colors.surface-void} or {colors.surface-dark} background, no shadow | Page body, section backgrounds | | 1 – Input | 1px {colors.hairline} border, no shadow | Form fields, text inputs | | 2 – Ghost Button | {colors.surface-translucent} fill (10% white), no shadow, {rounded.pill} | Icon circle buttons | | 3 – Outlined Button | 1px {colors.border-light} border, solid {colors.accent} fill option | CTA primary button | | 4 – Overlay | {colors.surface-void} or darker with opacity, centered stacking context | Preloader, modals, fullscreen menus |

The TRIONN system is resolutely flat—no box-shadows appear anywhere in the extracted CSS. Elevation is communicated exclusively through: (a) background luminance shifts within the dark spectrum, (b) border presence/absence, (c) translucency layering, and (d) z-index stacking for overlay surfaces. This shadowless approach reinforces the brutalist-gallery aesthetic where objects exist as graphic planes rather than material objects casting shadows. The only "depth" comes from the preloader's multi-layered animation stack (belts behind content, plus-marks orbiting in front), which creates temporal rather than spatial dimensionality.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 2px | Subtle rounding on minor decorative elements | | {rounded.DEFAULT} | 3.6px | Default slight rounding (fallback) | | {rounded.md} | 7.2px | Input fields, form containers, subtle cards | | {rounded.lg} | 12px | Cards, panels (if introduced in expanded sections) | | {rounded.pill} | 9999px | All buttons, icon circles, tags, CTA anchors | | {rounded.full} | 9999px | Avatar containers, circular decorative elements |

The shape system is dominated by the pill geometry ({rounded.pill}). Every button variant—icon circles, primary CTAs, text links rendered as buttons—uses the infinite-radius treatment. This creates a consistent visual language of "interactive = rounded" versus "content = sharp-or-slightly-rounded." Input fields break this pattern intentionally at {rounded.md} (7.2px), signaling their different interaction paradigm (text entry vs. action trigger). The 3.35544e+07px value observed in raw CSS is clearly a framework-generated approximation of infinity, normalized here to 9999px for clarity.

Photography Geometry

No significant photographic imagery was extractable from the current screenshot (which captures the loading overlay state). Based on the studio's positioning as a design/development agency, imagery likely follows a full-bleed or contained-aspect-ratio pattern with potential {rounded.md} or {rounded.lg} corner treatment for image containers. Avatar or team headshots would presumably use {rounded.full} (circle) or {rounded.pill} consistent with the shape vocabulary.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.icon-circle-button} — A 32×32px circular touch target serving as the primary utility button format (menu toggles, close actions, scroll-indicators). Background {colors.surface-translucent} (10% white), text/icon color {colors.accent} (#ffffff), rounded {rounded.pill}. Uses transition-all ease-in-out duration-500 for smooth state interpolation. On hover, background lifts to {colors.surface-translucent-hover} (20%). Contains an inline SVG child (plus-mark or chevron). Z-index 30 ensures it layers above content.

{component.cta-primary-button} — The flagship call-to-action: a solid white pill with uppercase label text. Background {colors.accent} (#ffffff), text {colors.primary} (#d8d8d8 which renders as {colors.on-primary} #111111 for contrast), 1px {colors.border-light} outline, rounded {rounded.pill}. Padding is vertically asymmetric: 5.4px 14.4px 7.2px (top/right/bottom) with additional horizontal scaling via calc(var(--pad-x)*1.2). Typography {typography.button} at 15.3072px, weight 400, transformed to uppercase. Transitions: all 300ms. On hover, opacity reduces to 80% on both background and border (hover:bg-white/80 hover:border-white/80). Z-index 50 places it above all layered content. Observed label: "let's talk".

{component.cta-primary-button-hover} — Hover state variant of the primary CTA. Background shifts to rgba(255, 255, 255, 0.8), border to same 80% opacity white. Text color unchanged. Maintains {rounded.pill} geometry.

{component.text-link-button} — A transparent-background text-only button/link pattern used for secondary navigation actions. Background transparent, text {colors.ink} (#d8d8d8), no border, no rounding (sharp/0px). Typography {typography.caption} at 12.6px, weight 400, transformed to uppercase. Padding derived from CSS variable --pad-x scaled by 1.2x. Minimum height 40px (min-h-10). Used for "Discuss Your Project", "Book a 30-minute call", "more about us" instances. These behave as understated text anchors within content sections.

{component.icon-circle-button-hover} — Hover state for icon circle buttons. Background transitions to {colors.surface-translucent-hover} (20% white opacity). All other properties inherited.

Cards & Containers

{component.main-container} — The root-level content wrapper. Width 1440px, no max-width override, transparent background, no padding. Establishes the horizontal bounds of all descendant content.

{component.section-container} — Repeating band container for content sections. Width 1440px, vertical padding {spacing.section} top (108px) and 50.4px bottom (slightly asymmetric for scroll exit). Transparent background. Each <section> wrapped in this creates the vertical rhythm of the page.

{component.header-bar} — Top navigation container. Width 1440px, vertical padding {spacing.xl} (36px), transparent background. Houses logo, nav links, and utility actions. Floats over content with no separator.

{component.loading-overlay} — Fullscreen preloader/overlay panel. Background {colors.surface-void} (implied by dark mode context and pl-overlay active class). Contains the multi-layered branded animation system: logo lockup, tagline reveal, counter reels, marquee belts, and orbital plus-icons. Z-index stacking positions this above all page content during load.

{component.overlay-center-content} — Centered content zone within the loading overlay. Horizontally and vertically centered (via implied flex/grid positioning). Contains the sequential reveal elements: logo wrap, tagline span group, counter assembly.

Inputs & Forms

{component.text-input} — Standard single-line text/email input field. Background transparent, text color {colors.body} (#434343—dark gray suitable for input text on light or transparent surfaces), 1px {colors.hairline} border (15% opacity black), rounded {rounded.md} (7.2px). Internal padding 10.8px 14.4px (vertical/horizontal). Typography {typography.label} at 16.2px. No shadow, no background fill—relies entirely on the subtle border for affordance.

{component.text-input-focus} — Focus state for text inputs. Border color would intensify (recommend {colors.border-strong} or a focus-ring equivalent per implementation convention). Rounded remains {rounded.md}.

Navigation

{component.top-nav} — Implicit navigation system housed within {component.header-bar}. Contains logo (left-aligned), navigation link group (center or left-offset), and right-rail utilities (CTA button + icon-circle menu toggle). Background transparent, inheriting page dark surface. Typography for nav links likely {typography.caption} or {typography.body-sm} at 12.6–14.4px, color {colors.ink}.

Signature Components

{component.preloader-logo-lockup} — Branded logo assembly appearing in the loading overlay. Comprises: a black rectangular box element (pl-logo-black-box), an SVG logo mark, four corner-positioned plus-sign decorations (tl/tr/bl/br positions), and secondary SVG elements. This is not a simple image—it is a constructed typographic/graphic object with multiple child layers.

{component.tagline-reveal} — Animated tagline component displaying "Inspire · Innovate · Impact". Individual words wrapped in .pl-tag-word.title.visible spans with dot separators (.pl-tag-dot). Typography uses the {typography.title-md} or display token at reduced opacity (rgba(216, 216, 216, 0.1) observed on h2-level tagline text). Words animate in sequentially (class toggling implies JS-driven visibility).

{component.counter-reel} — Slot-machine style numerical counter with three reel columns (pl-slot-reel × 3). Each reel independently animates through numeric values, creating a counting-up or randomizing effect during the loading sequence. Positioned below the tagline in the overlay center stack.

{component.marquee-belt} — Horizontal scrolling content belt (8 instances: pl-belt). These form a background animation layer behind the centered overlay content, likely containing repeated text, icons, or brand marks scrolling horizontally in an infinite loop. Contributes to the sense of activity and dynamism during load.

{component.orbital-plus-icon} — Decorative animated plus-sign (+) icon positioned in the overlay space (4 instances: pl-flying-plus). Each contains an SVG with two intersecting <line> elements forming a crosshair/plus. These appear to orbit, float, or pulse around the central content area, adding kinetic energy to the loading experience.

Do's and Don'ts

Do

• Do maintain weight 400 across all typography—never introduce bold or semi-bold weights; hierarchy comes from size and tracking alone.
• Do apply {rounded.pill} (infinite radius) to every button and icon-touch-target; reserve {rounded.md} (7.2px) exclusively for form inputs.
• Do use {colors.surface-translucent} (10% white) as the default ghost-button background, lifting to 20% on interaction.
• Do set display typography ({typography.display-lg}, {typography.title-md}) with negative letter-spacing proportional to size (-5.4px at 90px scale).
• Do keep section vertical padding at {spacing.section} (108px) minimum to preserve the editorial breathing room.
• Do render body text in {colors.ink} (#d8d8d8) against dark backgrounds—avoid pure white for extended reading passages.
• Do use uppercase transformation (text-transform: uppercase) on button labels and secondary nav links to distinguish them from body copy.
• Do implement the loading overlay as a branded moment with staggered reveals, not a generic spinner—this is a signature touchpoint.
• Do constrain content width to 1440px max to maintain the intended widescreen-but-not-edge-to-edge presentation.
• Do apply cubic-bezier(0.4, 0, 0.2, 1) easing with 300ms duration for standard state transitions.
• Do use the self-hosted font files with font-display: swap and metric-override fallbacks to prevent layout shift.

Don't

• Don't add drop-shadows or box-shadows to any component—the system is intentionally flat; elevation comes from luminance and layering only.
• Don't use {colors.accent} (#ffffff) for body text or headings—it is reserved exclusively for the primary CTA button fill and icon strokes.
• Don't round corners to arbitrary values outside the defined scale (2px, 3.6px, 7.2px, 12px, 9999px); avoid intermediate radii like 6px or 10px.
• Don't compress line-height on body text below normal—only display type (90px/81px = 0.9 ratio) uses tight leading.
• Don't introduce saturated brand colors (no violet, no teal, no coral) beyond the grayscale palette; the brand lives in monochrome.
• Don't place borders thicker than 1px on any element; even the CTA outline stays at 1px.
• Don't omit the loading overlay choreography on initial page visit—it communicates studio craft quality before content renders.
• Don't mix font families beyond the assigned roles: Familjen for display/headings, Neue Haas for body/UI—never use Neue Haas at 90px or Familjen at 16px.
• Don't pad buttons symmetrically if optical centering demands asymmetry (observe the CTA's pt-1.5 pb-2 precedent).
• Don't allow interactive elements to cast shadows on hover/focus—use opacity shifts or background-luminance changes instead.

Motion & Animation

Transition Tokens

/* Standard property transition */
--transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/* Opacity-only fade */
--transition-opacity: opacity 0.4s ease;

/* Extended duration for complex state changes */
--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

/* Icon button specific (500ms ease-in-out) */
--transition-icon-btn: all 0.5s ease-in-out;

Keyframe Animations

• arrowPulse — Pulsing animation likely applied to directional indicator arrows (chevrons, down-scroll hints) creating a gentle attract-loop.
• shake — Horizontal oscillation effect, possibly for form validation errors or interactive feedback on incorrect actions.
• successPulse — Confirmation burst animation triggered on successful form submissions or completed interactions.
• ts-borderPulse — Border-intensity pulse, probably applied to input focus states or highlighted elements requiring attention without aggressive color change.
• swiper-preloader-spin — Rotation animation for carousel/slider loading indicators, spinning a graphical element continuously.

Interaction Patterns

• Ghost-button lift: Icon circle buttons transition from {colors.surface-translucent} (10%) to {colors.surface-translucent-hover} (20%) background opacity on hover, with all properties interpolating over 500ms ease-in-out (slower than standard, creating a viscous/luxurious feel).
• CTA dimming: The primary white CTA button reduces to 80% opacity on both background-color and border-color simultaneously over 300ms cubic-bezier timing, creating a subtle "press" response without position translation.
• Staggered text reveal: The loading-overlay tagline ("Inspire · Innovate · Impact") reveals individual word-spans sequentially, likely driven by IntersectionObserver or timeout delays, with each span transitioning from opacity: 0 to opacity: 1 (or visibility: hidden to visible).
• Counter reel spin: Three slot-machine columns independently rotate/scroll through numeric values during preload, creating a sense of computational activity and countdown anticipation.
• Marquee scroll: Eight horizontal belts (pl-belt) scroll content laterally in continuous loops, providing background kinetic texture that makes the static overlay feel alive.
• Orbital plus-icon drift: Four pl-floating-plus elements animate along curved paths (or translate/rotate) around the central content zone, adding spatial complexity to the loading scene.
• Input border focus intensification: Form inputs likely transition their {colors.hairline} border to a more opaque {colors.border-strong} or acquire a transient {colors.primary} highlight ring on focus, governed by the ts-borderPulse keyframe or a simple transition.
• Overlay entrance/exit: The pl-overlay panel likely fades in/out with opacity transitions, possibly accompanied by subtle scale transforms (1.0→1.02→1.0) for organic arrival/departure sensation.

Imagery Style

• Mode: The captured screenshot shows only the loading overlay (dark void + animated graphics), but the studio's positioning suggests high-fidelity product photography, abstract 3D renders, and screen-capture showcases of delivered websites/products.
• Subject matter: Likely features website mockups on device frames, abstract geometric compositions (aligning with the plus-sign motif), AI/tech visualization imagery, and team/portrait photography in controlled lighting.
• Color treatment: Images will be displayed with no filters or tint overlays—the dark background naturally frames imagery, allowing original photograph colors to pop. May use subtle {colors.surface-void} vignetting at edges.
• Role: Imagery supports rather than dominates; the typographic system is the primary visual carrier. Images likely appear in contained aspect-ratio boxes (16:9, 4:3, or 1:1) with {rounded.md} or {rounded.lg} corner treatment.
• Signature technique: Potential use of parallax-depth layering (imagery moving at different scroll speeds than text) and full-bleed breakout sections where images expand beyond the 1440px content width into the gutter space.
• Illustration style: If custom illustrations exist, they would follow the geometric-minimal language established by the plus-mark and crosshair SVG primitives—clean vector shapes, monochrome or limited palette, precise alignments.

Icon System

• Library: Custom SVG (no external icon library detected in imports or class patterns).
• Specific icons observed:
  • Plus/crosshair (two intersecting lines, used in pl-flying-plus and pl-logo-corner-plus elements)
  • Menu hamburger (implied in icon-circle-button context for mobile nav toggle)
  • Close/X (implied counterpart to menu)
  • Arrow/chevron (referenced by arrowPulse animation, likely down-scroll or directional indicator)
• Treatment: Stroke-based vector graphics (SVG <line> elements observed for plus-marks), colored currentColor (inherits parent text color, typically {colors.accent} #ffffff). Size varies by context: 20–24px for standalone icons inside {component.icon-circle-button} (32×32px container), smaller for decorative corner elements.
• Alignment: Icons are perfectly centered within their circular containers via flexbox (flex items-center justify-center). No offset or rotation applied in default state (animations handle dynamic transformations).

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Astro (static-first, ideal for portfolio/studio sites)
- Styling:        Tailwind CSS v3.4+ (confirmed tailwindLikely: true from utility-class analysis)
- Fonts:          Self-hosted woff2 files served from /media/ directory with @font-face declarations
                  Fallback: Google Fonts (Inter, IBM Plex Serif) for environments without font assets
- Animation:      CSS transitions + keyframes (native, no GSAP/Framer dependency required)
                  Optional: Framer Motion for scroll-triggered reveals if React-based
- Icons:          Inline SVG components (custom, no library)
- Component lib:  None (hand-crafted atoms per the design system tokens)
- Build:          Vite (if Astro) or Next.js内置 (if Next.js)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single column, collapsed nav (hamburger), reduced display type scale (90px → ~48px), stacked CTA | | Tablet | 640px – 1024px | Two-column grids possible, preserved nav (if space permits), moderate type reduction | | Desktop | 1024px – 1440px | Full design realization, 1440px container active, 90px display type intact | | Wide | > 1440px | Container stops expanding, content centers with auto margins, background extends edge-to-edge |

Touch Targets

• {component.icon-circle-button}: 32×32px (h-8 w-8 in Tailwind) — Below WCAG AAA 44×44 minimum recommendation; consider enlarging to 44×44px (h-11 w-11) for production accessibility compliance, or ensure adequate invisible hit-area expansion.
• {component.cta-primary-button}: Height determined by padding (~28px total) × width variable — likely meets minimums comfortably due to text content width.
• {component.text-link-button}: min-h-10 (40px) — Approaches but may fall slightly short of 44×44; padding expansion recommended for touch.

Collapsing Strategy

• Navigation: The top-nav ({component.header-bar}) collapses from horizontal link list to a hamburger-menu icon ({component.icon-circle-button}) triggering a fullscreen or slide-down overlay menu below 768px.
• Display typography: {typography.display-lg} at 90px scales down via fluid type or breakpoint-specific overrides to approximately 48–56px on mobile, preserving the monumental feel within viewport constraints. Letter-spacing scales proportionally.
• Hero/loading overlay: The centered overlay composition maintains its stacked arrangement but reduces element sizes (logo, tagline, counter) and may simplify or skip the marquee-belt layer on mobile to reduce performance overhead.
• CTA button: The primary CTA remains pill-shaped but may expand to full-width within mobile content columns, centered, with increased vertical padding for thumb access.
• Form inputs: Input fields stack vertically at full available width, maintaining {rounded.md} and internal 10.8px 14.4px padding.
• Section padding: Vertical {spacing.section} (108px) reduces to 56–64px (approximately {spacing.xxl} or half-value) on mobile to prevent excessive scrolling through whitespace.

Image Behavior

• Hero illustrations: Any hero-adjacent imagery would scale from full-width (within 1440px container) on desktop to full-viewport-width on mobile, potentially switching from contained-box to edge-to-edge bleed treatment.
• Demo/showcase cards: Grid-of-work sections would collapse from multi-column (likely 2–3 column) to single-column stacks, with images maintaining aspect ratio (probably 16:9) and {rounded.lg} corners.
• Avatars/team photos: Circular ({rounded.full}) headshots would reduce from 80–120px diameter to 60–80px on mobile, preserving the circle geometry.

Iteration Guide

1. Build a landing page shell implementing the TRIONN design system using Next.js (or Astro for maximal performance) with Tailwind CSS v3.4+. Initialize the project with the 1440px container constraint and dark-mode default (class="dark" or equivalent).
2. Extract every design token from the YAML frontmatter into your Tailwind config's theme.extend block—colors under colors, typography under fontSize/fontFamily/letterSpacing/lineHeight, borderRadius under borderRadius, spacing under spacing. Reference tokens using {section.token} syntax throughout; never hard-code hex values or pixel measurements that have a token equivalent.
3. Implement the loading overlay as the first build target—it is the most complex signature component and validates your animation, typography-at-scale, and layered-composition capabilities. Build PreloaderLogoLockup, TaglineReveal, CounterReel, MarqueeBelt, and OrbitalPlusIcon as discrete components orchestrated by a parent LoadingOverlay controller.
4. Add state variants (-hover, -focus, -active, -disabled) to every interactive component following your framework's conventions. The spec documents Default and Active/Pressed states explicitly; infer hover from the opacity/transparency patterns described (translucent backgrounds lift 10%→20%, white CTAs dim to 80%).
5. When adding new components, classify them into one of four sub-systems: Loading Dialect (overlay components), Editorial Dialect (section content, typography bands), Form Dialect (inputs, validation states), or Navigation Dialect (header, menu, footer). Maintain consistent styling patterns within each dialect.
6. Variants of existing components must remain as separate frontmatter entries (e.g., cta-primary-button-hover), never nested objects or conditional classes within a single entry. This flat structure enables exhaustive documentation and linting.
7. Run npx @google/design.md lint DESIGN.md after any edits—the linter will flag broken-ref (tokens referenced but undefined), contrast-ratio (accessibility failures between text/background pairs), and orphaned-tokens (defined but never referenced) warnings automatically.
8. When in doubt about visual emphasis: increase size before increasing weight. The TRIONN voice never uses bold; it uses 90px. When in doubt about interaction feedback: shift opacity before shifting position. The system prefers fade-lifts over translate-transforms. When in doubt about shape: use pill (9999px radius) for anything clickable, 7.2px for anything typeable.

Font Setup

For development environments lacking the proprietary font assets, define the following CSS custom properties and @font-face declarations to closely approximate the system:

:root {
  --font-display: 'Familjen Grotesk Variable', 'Inter', system-ui, sans-serif;
  --font-body: 'Neue Haas Display Roman', 'IBM Plex Sans', -apple-system, sans-serif;
  --font-editorial: 'PP Editorial New Ultralight', 'Cormorant Garamond', Georgia, serif;
  --font-mono: 'Martian Mono Light', 'JetBrains Mono', 'Consolas', monospace;
}

/* Import from Google Fonts if self-hosted files unavailable */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&family=IBM+Plex+Sans:wght@400&family=Cormorant+Garamond:wght@300&family=JetBrains+Mono:wght@300&display=swap');

Set font-display: swap on all @font-face declarations. For production deployments, obtain the actual woff2 files from the /media/ path structure indicated in the source CSS to achieve exact metric matching.

Known Gaps

• Hover state styling specifics: Per the no-hover policy, exact hover property values (particularly for {component.text-link-button} and {component.text-input-focus}) are inferred from opacity patterns and adjacent state classes rather than directly observed.
• Loading skeleton / pending states: No skeleton-screen or shimmer-placeholder components were detectable in the static DOM; these would need design decisions for async content loading post-initial-view.
• Form validation states beyond focus: Error ({colors.error}), warning ({colors.warning}), and success ({colors.success}) semantic color applications to input borders/helper-text are assumed but not visually confirmed.
• Authenticated/dashboard surfaces: The screenshot captures the public-facing landing experience; client portal, project dashboard, or admin interfaces (if they exist) follow unknown patterns.
• Footer component: No footer markup was present in the extracted above-fold DOM; footer structure, links, and styling remain undescribed.
• Mobile navigation overlay: The collapsed mobile menu (triggered by the hamburger icon-circle-button) is referenced but its panel structure, animation, and contents are not captured.
• Exact surface-void hex value: The deep background color of the loading overlay and page body is inferred as approximately #0a0a0a–#111111 based on the dark-mode classification and observed RGB(0,0,0) text references, but the precise canvas hex was not sampled from rendered pixels.
• CSS variable naming mismatches: The source uses --pad-x as a computed variable for horizontal padding in button classes; this custom property's definition location and value were not resolved in the extraction.
• Video / Lottie embed behavior: Studio sites frequently feature video backgrounds or Lottie animations in hero sections; no <video> or <canvas> elements appeared in this capture, but they may exist in scrolled-to-view sections.
• Cookie consent / GDPR banner: Legal overlays common to EU-serving studios were not present in this view; their styling (if implemented) would need to extend the system with a dismissible bottom-banner component.