Brand Guidelines
The official OpenEtruscan visual identity. Typography, colour tokens, logo usage rules, and downloadable snippets for contributors and press.
The Logo
The wordmark pairs the Old Italic Unicode rendering of "OPEN" (๐๐๐๐) with Etruscan set in Cormorant Garamond. Because both elements are live web text (no raster images), the logo scales infinitely with zero payload. The Old Italic glyphs must always use the text-primary token.
<div className="flex items-center gap-3">
<span
className="text-3xl text-primary font-bold tracking-[0.25em]"
aria-hidden="true"
>
๐๐๐๐
</span>
<span className="font-display font-semibold text-3xl text-foreground">
Etruscan
</span>
</div>Typography
We pair a classical old-style serif for display headings with a modern geometric sans-serif for UI, plus a monospace for code and data rendering.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Weights: 400 ยท 500 ยท 600 ยท 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Variable weight 100โ900
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 ๐๐๐๐๐
Inscriptions ยท API responses
Colour Palette
Inspired by Etruscan frescoes, bucchero pottery, and the oxidised bronzes of Italic sanctuaries. Every colour below corresponds to a NextUI semantic token in tailwind.config.ts. Click any swatch to copy its hex value.
Semantic Tokens
Surface Neutrals
/* Import in layout.tsx via next/font/google */
--font-display: "Cormorant Garamond", serif;
--font-inter: "Inter", sans-serif;
--font-jetbrains: "JetBrains Mono", monospace;
/* Core brand colours */
--brand-primary: #c25934; /* Etruscan Terracotta */
--brand-secondary: #a3927d; /* Sandstone */
--brand-success: #4f776a; /* Verdigris */
--brand-warning: #be7c31; /* Amber Ochre */
--brand-danger: #9b3434; /* Deep Crimson */
/* Dark surfaces */
--brand-dark-bg: #12100E;
--brand-dark-fg: #EAE5D9;Usage Rules
โ Do
- Always pair the Old Italic ๐๐๐๐ glyphs with the Cormorant Garamond wordmark.
- Use the Etruscan Terracotta (
#c25934) for the Old Italic glyphs in both light and dark modes. - Maintain at least
gap-3(12px) spacing between the glyphs and the wordmark. - Use
tracking-[0.25em]letter-spacing on the Old Italic glyphs for readability. - Set the wordmark in
font-semiboldweight.
โ Don't
- Never render the logo as a rasterised PNG/SVG. It must remain live text for accessibility and scalability.
- Never change the colour of the Old Italic glyphs to anything other than
text-primary. - Never add drop shadows, outlines, or decorative effects to the wordmark.
- Never substitute Cormorant Garamond with another serif. It is a non-negotiable brand decision.
- Never abbreviate the logo (e.g. "OE" or "๐๐") except in favicons or constrained UI.