ethira · brand guidelines
Brand
The complete visual identity for Ethira — logo, colour, type, digital system, and voice. Machine-readable reference at /brand.md.
Logo
On dark
On light
Mark only
On accent
Clear space
Entrance animation
When animating the mark into view, use scale 0.9 → 1.0 + opacity 0 → 1 over 600 ms ease-out. Never use ease-in, bounce, or rotate on the mark.
Maintain clear space equal to the mark's height on all sides.
Do not rotate, distort, recolour, or add drop shadows to the mark.
Do not place the Mint wordmark on a Mint background.
Minimum size: 24px height for digital; 6mm for print.
Do not use "Ethira" in a different typeface to imply affiliation.
Colours
Marketing
Page backgrounds, section headers
rgb(16, 32, 31)
oklch(0.17 0.02 162)
Card surfaces, footer
rgb(26, 30, 29)
oklch(0.20 0.01 162)
CTAs, links, highlight states
rgb(169, 251, 192)
oklch(0.90 0.12 155)
Success states, tags
rgb(143, 247, 152)
oklch(0.88 0.16 145)
Hover states, borders, links
rgb(1, 104, 83)
oklch(0.43 0.12 165)
Print subtitles, light-mode text
rgb(222, 219, 216)
oklch(0.89 0.01 60)
Rule: Use Mint #A9FBC0 as the sole accent on the marketing site. The shadcn layer in the app uses brand Teal (light) and Mint (dark) as --primary.
WCAG contrast
White on Brand Dark
Brand Dark on Mint
Brand Dark on Signal Green
Typography
Headings · display text
Geist Variable
Govern every asset.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz · 0123456789
Body copy · wordmark · navigation
Space Grotesk
Govern every asset.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz · 0123456789
| Role | Size | Weight | Tracking |
|---|---|---|---|
| Display / H1 | 4xl – 7xl | 700 | −0.03em |
| Section H2 | 3xl – 4xl | 700 | −0.02em |
| Sub-heading | xl – 2xl | 600 | −0.01em |
| Body | base (1rem) | 400 | 0 |
| Caption / meta | xs – sm | 400 | 0 |
Digital System
Both the marketing site and the app share a single CSS token vocabulary. Mint is the dark-mode primary; Deep Teal is the light-mode primary. All shadcn components derive their colour from these tokens automatically.
CSS token map
| Token | Light | Dark | Usage |
|---|---|---|---|
| --primary | #016853 | #A9FBC0 | Buttons, active states, focus rings |
| --primary-foreground | #ffffff | #10201F | Text on primary surfaces |
| --accent | #f7f7f7 | #D4FDE6 | Accent backgrounds, hover highlights |
| --background | #ffffff | #10201F | Page and surface background |
| --ring | #016853 | #A9FBC0 | Keyboard focus outlines |
| --destructive | #dc2626 | #ef4444 | Error states, delete actions |
| --muted-foreground | #737373 | #a3a3a3 | Secondary, subdued text |
| --border | #e8e8e8 | white/10 | Subtle dividers and edges |
Component preview
Button
Badge
Input
Card
Token reference
/* Ethira Design Tokens — dark surface */
--primary: oklch(0.65 0.15 155); /* Mint */
--primary-foreground: oklch(0.17 0.02 162); /* Brand Dark */
--ring : oklch(0.65 0.15 155);
--background : #10201F;
--section-alt : #1A1E1D;
--border : oklch(1 0 0 / 8%);
/* Light mode — Deep Teal primary */
--primary : oklch(0.43 0.12 165); /* Deep Teal */
--primary-foreground: oklch(0.99 0 0);Voice & Tone
Govern every asset.
Automatically.
AI without accountability is an unnamed liability.
Confident
State facts plainly. Never hedge with 'might', 'could', or 'possibly'.
Technical
Use precise regulatory and security terminology without apologising.
Pragmatic
Lead with outcomes and time-to-value — '10 minutes', '400 hours saved'.
Accountable
Name things. Every risk needs an owner. Avoid passive voice.
Do
✓"Govern every asset."
✓"Named owner. Traceable logs."
✓"Setup in 10 minutes."
✓"47% of tools are unsanctioned."
✓"DORA-compliant Register of Information."
✓Write "Ethira" (capital E, no trademark ™)
Don't
✗"Help you stay on top of your AI tools."
✗"End-to-end visibility solution."
✗"Quick and easy onboarding experience."
✗"Many tools go unnoticed."
✗"Regulatory-friendly reporting module."
✗Write "ETHIRA" or "ethira" in body copy
Design Principles
Visibility first.
Every UI decision should make the invisible — shadow AI, ungoverned vendors, undocumented agents — visible.
Dark and precise.
The dark palette communicates seriousness, not trendiness. Reserve Mint sparingly for moments that matter.
Regulated, not bureaucratic.
Enterprise gravity without clutter — minimal chrome, strong information hierarchy, zero decoration for its own sake.
Automation over instruction.
Show what is automated. Avoid language that implies the user must perform manual work.
Named accountability.
Ownership is a first-class concept in the product and in how we write. Avoid 'it', 'the system', or passive constructions.
No decorative complexity.
Animations and effects support comprehension — discovery revealing assets. They do not replace substance.
Motion
Fast & purposeful.
300–600 ms maximum for transitions. Animation should reduce cognitive load, not add to it. If removal makes the UI clearer, remove it.
Ease-out always.
Elements enter fast and decelerate to rest. Never use ease-in for entrances. Standard easing: cubic-bezier(0, 0, 0.2, 1).
Respect the user.
All animations disabled under prefers-reduced-motion. No element flashes, pulses infinitely, or draws attention away from the user's task.
easeOut (default)
cubic-bezier(0, 0, 0.2, 1)
All entrances, reveals
easeInOut
cubic-bezier(0.4, 0, 0.2, 1)
State transitions, theme toggle
linear
linear
Continuous animations (spinners, progress)
Duration scale
150 ms
Micro-interactions (hover, active state)
300 ms
Standard transitions (dropdown, tooltip)
450 ms
Panel / sheet entrances
600 ms
Page-level reveals, mark entrance animation
Assets
For brand questions, partnerships, or press enquiries contact hello@ethira.dev.