Visual & Framework Registry
A formal catalogue of all visual components, typographic systems, colour tokens, and interface frameworks available to authorized partners for use within their integration environments.
Colour System
The Lizaro colour system is built on a structured token architecture. Each colour is defined across multiple formats to ensure consistent rendering across all partner integration environments. The primary palette is anchored by Deep Slate and Indigo, with a full semantic layer for status communication.
Primary Palette
Slate / Background Scale
Semantic Colours
Colour Token Reference
| Token | HEX | RGB | Usage |
|---|---|---|---|
--color-accent | #6366F1 | 99, 102, 241 | Primary interactive elements |
--color-accent-hover | #818CF8 | 129, 140, 248 | Hover / focus states |
--color-bg-base | #0F172A | 15, 23, 42 | Page background |
--color-bg-surface | #1E293B | 30, 41, 59 | Card / panel surfaces |
--color-text-primary | #F1F5F9 | 241, 245, 249 | Primary text |
--color-text-secondary | #94A3B8 | 148, 163, 184 | Body text, descriptions |
--color-border | #2E3F5C | 46, 63, 92 | Component borders |
Typography
The Lizaro typographic system uses two typeface families: Inter for all interface and body text, and JetBrains Mono for code, technical identifiers, and monospaced contexts. Both are distributed as WOFF2 packages for partner use.
Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
| Weight | Value | Usage |
|---|---|---|
| Regular | 400 | Body text |
| Medium | 500 | UI labels |
| SemiBold | 600 | Subheadings |
| Bold | 700 | Headings |
| ExtraBold | 800 | Display / hero |
Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 {}[]()<>
| Weight | Value | Usage |
|---|---|---|
| Regular | 400 | Code blocks |
| Medium | 500 | Inline code |
Type Scale
| Name | Size (rem) | Weight | Line Height | Usage |
|---|---|---|---|---|
| Display | 2.75rem | 800 | 1.15 | Hero headings |
| H1 | 2.25rem | 700 | 1.2 | Page titles |
| H2 | 1.75rem | 700 | 1.25 | Section headings |
| H3 | 1.25rem | 700 | 1.3 | Card titles |
| Body LG | 1.0625rem | 400 | 1.75 | Lead paragraphs |
| Body | 0.9375rem | 400 | 1.7 | Standard text |
| Small | 0.875rem | 400 | 1.6 | Secondary text |
| Caption | 0.75rem | 500 | 1.5 | Labels, tags |
| Micro | 0.6875rem | 700 | 1.4 | Badges, eyebrows |
Logo Assets
The Lizaro logotype is available in multiple configurations for use across different integration contexts. Partners must use the approved variants and must not alter proportions, colours, or spacing beyond the defined clear-space rules.
Horizontal lockup — dark background
Standalone icon — all contexts
Horizontal lockup — light background
| Asset | Format | Dimensions | Use Case |
|---|---|---|---|
| Primary Horizontal | SVG, WebP | 200×48px (reference) | Headers, footers, documents |
| Icon Mark | SVG, WebP, PNG | 64×64px, 128×128px, 256×256px | Favicons, app icons, avatars |
| Light Variant | SVG, WebP | 200×48px (reference) | Light-background contexts |
| Monochrome | SVG | Scalable | Single-colour print/emboss |
Icon Library
The Lizaro icon library is based on a 24×24px grid with a 2px stroke weight. All icons are distributed as optimized SVG files. Partners may use these icons within their integration interfaces without modification to stroke weight or viewBox dimensions.
UI Components
The following component specifications define the visual parameters for interactive elements used within Lizaro-integrated interfaces. All measurements are in pixels at 1× density unless otherwise stated.
Button Variants
| Component | Height | Padding H | Border Radius | Font Size |
|---|---|---|---|---|
| Button — Small | 32px | 12px | 6px | 0.75rem / 600 |
| Button — Default | 36px | 16px | 6px | 0.8125rem / 600 |
| Button — Large | 44px | 24px | 10px | 0.9375rem / 600 |
| Input — Default | 40px | 14px | 8px | 0.875rem / 400 |
| Card | Auto | 28px | 16px | — |
| Badge | 22px | 8px | 999px | 0.6875rem / 700 |
Grid System
The Lizaro grid is a 12-column fluid system with a maximum container width of 1200px. Gutters are defined at 20px for standard layouts and 24px for content-heavy pages.
| Breakpoint | Min Width | Columns | Gutter | Container Max |
|---|---|---|---|---|
| xs | 0px | 4 | 16px | 100% |
| sm | 480px | 4 | 16px | 100% |
| md | 768px | 8 | 20px | 100% |
| lg | 1024px | 12 | 24px | 1200px |
| xl | 1280px | 12 | 24px | 1200px |
Spacing Tokens
Spacing is defined on a base-4 scale. All layout decisions should reference these tokens to maintain visual consistency across partner integration environments.
| Token | Value (px) | Value (rem) | Common Usage |
|---|---|---|---|
space-1 | 4px | 0.25rem | Micro gaps, icon padding |
space-2 | 8px | 0.5rem | Tight component spacing |
space-3 | 12px | 0.75rem | Inline element gaps |
space-4 | 16px | 1rem | Standard padding |
space-5 | 20px | 1.25rem | Card internal spacing |
space-6 | 24px | 1.5rem | Section sub-gaps |
space-8 | 32px | 2rem | Component separation |
space-10 | 40px | 2.5rem | Section padding |
space-16 | 64px | 4rem | Page section gaps |
Asset Formats & Distribution
All media kit assets are distributed through the authorized partner download portal. The following table summarizes the available formats and their intended deployment contexts.
| Format | Extension | Use Case | Max File Size |
|---|---|---|---|
| Scalable Vector | .svg | Logos, icons, illustrations | Unlimited (optimized) |
| WebP Raster | .webp | Photos, banners, previews | 500 KB per asset |
| PNG Raster | .png | Transparency-required assets | 1 MB per asset |
| Web Font | .woff2 | Typography distribution | 200 KB per weight |
| CSS Variables | .css | Colour and spacing tokens | 50 KB |
| JSON Tokens | .json | Design token export (Figma/Style Dictionary) | 100 KB |