Brand System
The foundational visual language of HRIX — the Creator × Brand Growth Network. Engineered for precision, readability, and contrast across dark interfaces.
Brand Identity & Voice
Built to communicate trust, transparency, and high performance for both creators and enterprise brands.
Quiet Precision
A dark #050505 canvas provides low visual fatigue and allows creator media and portfolio assets to remain the hero. Chrome is kept minimal with clean 1px hairline dividers.
Electric Clarity
High-chroma violet (#8B5CF6) and neon blue (#4F7CFF) accents guide attention toward actions, interactive network nodes, and match scores without visual clutter.
Verifiable Trust
Every metric, identity state, and payout milestone is rendered with clear semantic badges, transparent statuses, and structured metadata.
Logo & Mark Guidelines
The official HRIX logo is rendered exclusively from verified brand assets. Never recreate the mark in plain text or distort its geometry.
The primary HRIX wordmark combines a dynamic stylized emblem with precise, bold lettering.
Official HRIX Wordmark
Primary brand logo for light and dark placements.
HRIX Emblem Mark
Compact mark for social avatars, favicons and badges.
Variant Sizing Rules
Use standard component variants defined in HrixLogo.tsx to maintain visual proportion across devices.
| Variant | Rendered Width | Context & Usage |
|---|---|---|
| Navbar | 84px - 96px | Fixed site navigation header across desktop and mobile views. |
| Hero | 140px - 208px | Primary landing hero section and introductory brand statements. |
| Footer | 120px | Site footer baseline with high readability over dark background. |
| Auth & Modals | 150px - 176px | Centered login, registration, and onboarding header artwork. |
| Sidebar | 84px | Creator and Brand dashboard collapsible navigation rails. |
| Loading | 168px | Full-page loading and transition screens with gentle breathe animation. |
- ✓Always display on dark backgrounds (#050505 canvas or #111118 surface).
- ✓Maintain clear space around the logo equal to at least half the emblem height.
- ✓Use the official SVG/PNG artwork assets without altering proportions.
- ✕Do not recreate the mark using system fonts or plain typography.
- ✕Do not alter colors, skew, stretch, rotate, or add drop-shadow filters.
- ✕Do not place the logo inside high-contrast solid light boxes.
Color System & Tokens
Click any swatch below to copy its HEX color value directly to your clipboard. All tokens are exported from tokens.ts.
Canvas & Surfaces
Deep background levels that structure spatial depth.
Primary deep page background for all views.
Alternating section fills, footer, and subtle depth layers.
Cards, panels, sidebars, and container elements.
Hovered states, dropdown menus, and popovers.
Hairline subtle dividers and translucent borders.
Input borders, active focus outlines, and strong boundaries.
Typography & Text Levels
Calibrated white and neutral tones for optimal contrast ratios.
Primary high-contrast white text for headlines and titles.
Secondary text, paragraph copy, and descriptions.
Metadata, placeholders, timestamps, and subtle hints.
Electric Brand Accents
High-vibrancy accents paired with soft text tints for WCAG AA contrast.
Primary brand accent for focus glows, key buttons, and active items.
High-contrast text tint for violet badges and icons on dark canvas.
Secondary accent used for network links, metrics, and highlights.
High-contrast text tint for blue badges, tags, and data labels.
Dynamic accent for gradient sweeps, creator tiers, and badges.
Soft tint for magenta badges and high-visibility accents.
Semantic & Status Colors
Clear indicators for verified states, approvals, and system notifications.
Verified badges, paid invoices, and successful operations.
Pending verification, in-review milestones, and warnings.
Action alerts, declined statuses, and destructive buttons.
Typography System
Dual font pairing optimized for editorial character and computational precision.
Bricolage Grotesque
var(--font-display)
A character-rich variable font with a width axis. Loaded condensed and heavy for memorable headlines with tight letter spacing.
Instrument Sans
var(--font-body)
A balanced modernist grotesque designed for clean legibility on high-density displays. Powers all UI controls, data tables, and body paragraphs.
HRIX connects creators with brands through a secure, vetted marketplace with automated deliverables and guaranteed payouts.
Interface System Showcase
Interactive UI primitives designed with glassmorphism, subtle glows, and accessible contrast.
GlassCard Surfaces
Three distinct surface elevations built with backdrop-blur.
Resting cards and secondary containers with subtle 1px line border.
Elevated surface for popovers, drawers, and active hover cards.
Featured surface featuring a top hairline violet light sweep.
Badge Tones
Semantic status chips with matching border and background tints.
Button Styles
Consistent button hierarchy with smooth hover and focus states.
Ready to collaborate on HRIX?
Discover verified creators, launch high-impact campaigns, and grow your presence across the network.