Overview
Apply Liatrio's official visual identity consistently across all artifacts. Brand guidelines are encoded below — no network access required. For always-current data, run:
bash ./scripts/fetch-brand-data.sh
Pre-bundled logo files are in ./assets/logos/. Use the variant that matches your background (see Logo Usage below).
Color Palette
Primary Colors
These are the core brand colors. Primary Green (#24AE1D) is the hero color — use it prominently in key brand moments.
| Name | HEX | RGB | Use |
|---|---|---|---|
| Grey 800 | #111111 | 17, 17, 17 | Primary text, dark elements |
| White | #ffffff | 255, 255, 255 | Backgrounds, light elements |
| Primary Green | #24AE1D | 36, 174, 29 | Hero brand color — CTAs, highlights, key accents |
| Bright Green | #89df00 | 137, 223, 0 | Accents and decorative highlights (use sparingly) |
Secondary Colors
| Name | HEX | RGB | Use |
|---|---|---|---|
| Grey 700 | #1e1e1e | 30, 30, 30 | Dark backgrounds, surfaces |
| Grey 100 | #eeeeee | 238, 238, 238 | Light backgrounds, borders |
| Lagoon | #00C1DB | 0, 193, 219 | Accent blue, data viz, links |
Tertiary Colors
| Name | HEX | RGB | Use |
|---|---|---|---|
| Black | #000000 | 0, 0, 0 | Pure black |
| Grey 600 | #333333 | 51, 51, 51 | Medium-dark text |
| Grey 500 | #666666 | 102, 102, 102 | Secondary text, captions |
| Grey 400 | #999999 | 153, 153, 153 | Placeholders, disabled states |
| Grey 300 | #cccccc | 204, 204, 204 | Borders, dividers |
| Grey 200 | #dddddd | 221, 221, 221 | Subtle backgrounds |
| Dark Blue | #003d5c | 0, 61, 92 | Deep blue accent |
| Deep Sea | #006989 | 0, 105, 137 | Ocean blue accent |
| Hot Red | #E63946 | 230, 57, 70 | Alerts, errors, emphasis |
| Flame Orange | #F77F00 | 247, 127, 0 | Warnings, energy |
Background Colors
| Mode | Name | HEX | Use |
|---|---|---|---|
| Light | Primary | #ffffff | Main page background |
| Light | Secondary | #f8f9fa | Cards, elevated sections |
| Dark | Primary | #1a1f23 | Main dark background |
| Dark | Secondary | #1E2327 | Dark cards, elevated surfaces |
Typography
Single typeface: DM Sans (Google Fonts) — use it for all text, including headlines, body copy, and UI elements.
<!-- Import from Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
font-family: 'DM Sans', sans-serif;
Type Scale
| Level | Size | Weight | Notes |
|---|---|---|---|
| H1 | 48–60px | Bold or ExtraBold | Hero headlines, page titles |
| H2 | 36–40px | Bold or SemiBold | Section headers |
| H3 | 28–32px | SemiBold or Medium | Sub-section headers |
| Body | 16–18px | Regular or Medium | Default reading text |
| Caption | 12–14px | Regular | Labels, metadata |
Available Weights
Thin (100), ExtraLight (200), Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700), ExtraBold (800), Black (900)
Logo Usage
Variant Selection
| Background | Recommended Logo | File |
|---|---|---|
| Light (>50% brightness) | Main logo | logo_Liatrio.svg |
| Light (alt/single color) | Black logo | logo_Liatrio_black.svg |
| Dark (<50% brightness) | Reverse color (preferred) | logo_Liatrio_reverse-preferred.svg |
| Dark (minimal) | Reverse white | logo_Liatrio_reverse.svg |
Logomarks (compact/square contexts)
| Variant | File | Use |
|---|---|---|
| Main logomark | logomark_Liatrio.svg | Light or dark backgrounds (avoid green backgrounds) |
| Square logomark | logomark_Liatrio_background.svg | When equal padding on all sides is required |
| Reverse logomark | logomark_Liatrio_reverse.svg | Dark backgrounds |
| Black logomark | logomark_Liatrio_black.svg | Light backgrounds, single-color contexts |
All files are pre-bundled at ./assets/logos/. Each SVG has a matching PNG.
Clear Space
Maintain clear space around the logo equal to the height of the "L" in "Liatrio" on all sides.
Prohibited Modifications
- Do not distort, stretch, or rotate the logo
- Do not recolor or add effects (shadows, outlines, gradients) to the logo
- Do not place the logo on backgrounds that cause low contrast
- Do not recreate the logo in a different typeface
Dark/Light Mode Guidance
Light Mode
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--text-primary: #111111;
--text-secondary: #333333;
--accent: #24AE1D;
Use logo_Liatrio.svg (color) or logo_Liatrio_black.svg.
Dark Mode
--bg-primary: #1a1f23;
--bg-secondary: #1E2327;
--text-primary: #ffffff;
--text-secondary: #eeeeee;
--accent: #24AE1D;
Use logo_Liatrio_reverse-preferred.svg (preferred) or logo_Liatrio_reverse.svg.
Accessibility
- Minimum contrast ratio: 4.5:1 for normal text, 3:1 for large text (WCAG AA)
- Never use color as the sole means of conveying information
- Provide alt text for all logo images
Live Brand Data
For always-current brand information (useful if this skill's cached data may be stale):
bash ./scripts/fetch-brand-data.sh
This fetches https://www.liatrio.com/brand-data.json and returns the full brand specification as JSON.