liatrio-brand

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.