Trilumi

Overview

Trilumi is a Hong Kong-based fintech infrastructure company that embodies **Institutional Modernism**—a design philosophy that marries the precision and trust of traditional finance with the clarity and directness of contemporary technology. The visual language centers on a deep, authoritative blue (#004aad) paired with clean geometric forms, creating an aesthetic that feels both technically sophisticated and reassuringly stable. The brand personality is methodical, transparent, and confident: users encounter a system that respects their intelligence, avoids unnecessary ornamentation, and communicates complex infrastructure concepts through visual hierarchy and deliberate whitespace. The UI evokes the feeling of looking into a well-lit control room where every element has a purpose and every interaction is predictable.

Trilumi's voice is precise, professional, and never hyperbolic. Sentences are direct and benefit-focused: 'We build the systems that move real-world value on-chain.' The vocabulary favors concrete nouns (issuance, settlement, custody, audit) over abstract marketing language. Tone is calm and assured—the company does not need to convince; it needs to inform. Example sentence in brand voice: 'Five platforms designed, built and running in production across collateral, green finance, tokenised collectibles and consumer rewards.'

Colors

The color system is anchored in **Institutional Blue**, a deep, trust-signaling primary (#004aad) used exclusively for interactive elements, CTAs, and focus states. This blue is never used for backgrounds or body text; it remains reserved as the accent that draws attention and signals actionability. The secondary palette consists of a lighter lift blue (#5aa0ff) for hover states and container fills, and a darker navy (#002a63) for depth and secondary information hierarchy. All text on light backgrounds uses the ink scale: primary ink (#081c34) for body copy, secondary ink (#3a4a63) for supporting text, and tertiary ink (#566780) for disabled or de-emphasized states. The surface stack is deliberately minimal: white (#ffffff) as the primary surface, with a single container layer (#f4f7fb) fo

Typography

The type system uses **Heebo**, a geometric sans-serif from Google Fonts, across all scales. Heebo's clean, rational letterforms reinforce the institutional aesthetic while remaining approachable. The display tier (73.6px, weight 800, -0.03em tracking) is reserved for hero headlines and sets the visual tone with its bold weight and tight letter-spacing. Headline-lg (40px, weight 700, -0.02em) anchors section titles, while body-md (16px, weight 400) carries primary content. The label-sm tier (12px, weight 700, 0.18em tracking) is used for eyebrows, badges, and navigation labels—its high tracking and weight create visual distinction despite the small size. All headings use a line-height of 1.1 (approximately 1.1× the font size in pixels) to maintain visual tightness and authority. Body copy

Layout

The page grid uses a 12-column fluid layout with a fixed max-width of 1280px, centered with auto margins. Horizontal padding scales responsively: clamp(20px, 5vw, 56px) ensures the content remains readable on mobile (20px gutters) while breathing on desktop (56px gutters). The spacing scale is semantic and hierarchical: xs (4px) for micro-adjustments within components, sm (12px) for internal component padding, md (24px) for section-level spacing and card padding, lg (40px) for major section separation, and xl (64px) for hero and full-width section margins. Hero sections use clamp(72px, 11vw, 140px) for vertical padding, creating a responsive rhythm that adapts to viewport height. The 'measure' (max-width: 68ch) is applied to body text blocks to maintain optimal line length for readability.

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background layering rather than dramatic drop shadows. Level 1 (Base): the white surface (#ffffff) with a 1px border in outline-variant (#93abc9) creates the foundation. Level 2 (Elevated Cards): background-color: #f4f7fb with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and a 1px border in surface-container (#dde4ee). Level 3 (Modals/Overlays): background-color: #ffffff with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) and a 1px border in outline-variant. The hero section (panel-brand) uses a deep blue background (#004aad or derived)

Shapes

The shape language follows **Geometric Precision**: corners are sharp and measured, never organic. The rounded scale progresses from minimal (2px for small UI elements like select dropdowns) to moderate (5px for buttons and cards, the most common radius) to generous (12px for larger modals or feature cards). The rationale: 2px and 4px radii feel technical and controlled, appropriate for form inputs and small interactive elements. 5px (the DEFAULT) is the workhorse radius, applied to all primary buttons, cards, and standard containers—it's sharp enough to feel institutional yet soft enough to a

Components

Action Elements Buttons follow a two-tier system: primary (full-color) and secondary (transparent). The primary button uses background-color: #004aad, color: #ffffff, padding: 14px 28px, height: 48px, border-radius: 5px, and a 2px solid border in the same blue. On hover, the background shifts to #002a63 (the darker navy) with a smooth 200ms transition. The secondary button has a transparent background, text-color: #004aad, and no visible border in the default state; on hover, it gains a background-color: #f4f7fb. A tertiary variant (used in the hero for 'See our platforms') has transparent background, text-color: #ffffff, and no border; on hover, text-color becomes #8dbdff (the lighter lift blue). All buttons include an inline SVG arrow that translates 2px to the right on hover (transf

Do's and Don'ts

**Do**

• Do use the primary blue (#004aad) exclusively for interactive elements, CTAs, and focus states—never as a background or body text color.
• Do maintain the 1px border on all cards and containers using outline-variant (#93abc9) to create visual separation without visual noise.
• Do apply the 200ms cubic-bezier(0.4, 0, 0.2, 1) transition to all interactive state changes (hover, focus, active) for consistent responsiveness.
• Do use Heebo at weight 700+ for all headings and labels to maintain the geometric, authoritative aesthetic.
• Do respect the whitespace hierarchy: use lg (40px) for section separation and md (24px) for component-level spacing to guide the eye through content.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to elevated cards and dropdowns for consistent depth signaling.

**Don't**

• Don't use rounded corners greater than 12px on standard components—the geometric precision is core to the institutional aesthetic.
• Don't apply the primary blue (#004aad) to backgrounds, body text, or decorative elements; reserve it exclusively for interactive affordances.
• Don't animate border-radius or use transitions longer than 200ms on interactive elements; the brand values clarity and predictability over flourish.
• Don't mix font families; Heebo is the sole typeface across all scales and weights.
• Don't reduce the line-height below 1.1 for headings or below 1.5 for body text—readability and visual breathing room are non-negotiable.
• Don't use drop shadows greater than 0 8px 24px rgba(0, 0, 0, 0.12); the elevation system is subtle and never dramatic.