Living reference
Brand Guide
Every token, component class, and visual pattern that ships with the Sustrio frontend. Check here before adding a new style — if it isn't on this page, it doesn't exist yet.
Logos
Sustrio's lockups in PNG. Right-click → Save As, or click the download link below each card. Source files (SVG / AI / source PSD) are stored in the brand drive — request access from the project lead.
Color
Three branded ramps (primary, secondary, tertiary), one accent, and
semantic surfaces. All tokens are declared in src/styles/global.css
under the @theme block; Tailwind v4 emits utilities from them.
Primary
#003B4A Base + alpha stops
primary primary-5 primary-10 primary-20 primary-30 primary-40 primary-50 primary-60 primary-70 primary-80 primary-90 Dark shades
primary-d-1 primary-d-2 primary-d-3 primary-d-4 primary-d-5 Light shades
primary-l-1 primary-l-2 primary-l-3 primary-l-4 primary-l-5 primary-l-6 primary-l-7 primary-l-8 Secondary
#7AAEBF Base + alpha stops
secondary secondary-5 secondary-10 secondary-20 secondary-30 secondary-40 secondary-50 secondary-60 secondary-70 secondary-80 secondary-90 Dark shades
secondary-d-1 secondary-d-2 secondary-d-3 secondary-d-4 secondary-d-5 Light shades
secondary-l-1 secondary-l-2 secondary-l-3 secondary-l-4 Tertiary
#F0D283 Base + alpha stops
tertiary tertiary-5 tertiary-10 tertiary-20 tertiary-30 tertiary-40 tertiary-50 tertiary-60 tertiary-70 tertiary-80 tertiary-90 Dark shades
tertiary-d-1 tertiary-d-2 tertiary-d-3 tertiary-d-4 tertiary-d-5 Light shades
tertiary-l-1 tertiary-l-2 tertiary-l-3 tertiary-l-4 Accent
hsl(192 100% 34%) accent accent-d-1 accent-d-2 accent-d-3 accent-d-4 accent-d-5 accent-l-1 accent-l-2 accent-l-3 accent-l-4 accent-l-5 Surface & ink
semantic surface surface-raised ink ink-strong Typography
Sustrio uses Arimo for both headings and body. Sizes
come from a fluid scale (clamp-based) so they shrink and grow with the
viewport. Font tokens: --font-heading, --font-body.
--text-4xlPractical Sustainability --text-3xlBuilt on Experience --text-2xlWhere Sustainability Meets Strategy --text-xlSustainability & ESG Advisory --text-lPractical pathways that reduce risk --text-mBody copy at the default size — the quick brown fox jumps over the lazy dog. --text-sSmall print, captions, footer text. --text-xsEyebrows, labels, micro-copy. Headings
H1 — Practical Sustainability & ESG Advisory
H2 — Integrate Sustainability and ESG into business operations
H3 — Industries we Serve
H4 — Turn Sustainability and ESG into Actionable Strategy
H5 — Smaller heading
H6 — Smallest heading
Font specimens
Heading font: "Arimo", system-ui, sans-serif
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Body font: "Arimo", system-ui, sans-serif
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Badges
Small uppercase eyebrow labels above section headings. Three variants:
default (light pill), .badge--light (light text on dark
bands), and .badge--accent (accent fill for emphasis).
Default
.badge On dark
.badge.badge--light Accent
.badge.badge--accent Links
Inline link style: a sample inline link.
Underline is a 2px shadow that lightens on hover. Use .link
on any anchor in body copy.
Spacing scale
Fluid spacing tokens drive padding, margin, and gap via Tailwind
utilities (e.g., p-m, gap-l). Sizes scale
with viewport width — the bar shows the value at the current width.
Note that this project sets html { font-size: 62.5% },
so 1rem ≈ 10px.
--spacing-4xs --spacing-3xs --spacing-2xs --spacing-xs --spacing-s --spacing-m --spacing-l --spacing-xl --spacing-2xl --spacing-3xl --spacing-4xl --spacing-5xl --spacing-6xl Radius
radius-xs radius-s radius-m radius-l radius-xl radius-full Shadows
Shadows are tinted with --color-primary-d-1 so depth
integrates with brand color instead of feeling like a drop-shadow preset.
shadow-2xs shadow-xs shadow-s shadow-m shadow-l shadow-xl shadow-2xl Bracket cards
Content card flanked by two open brackets that stretch to the card's
full height. Used on the homepage Why Sustrio highlights. Apply
.bracket-card on the wrapper and slot content into
.bracket-card__body — the brackets are spans with
.bracket-card__shape-left and
.bracket-card__shape-right.
Card title
Short supporting copy that explains what this card is about — keep it to two or three lines for visual balance.
Another card
Bracket borders use --color-secondary-l-2 at 2px, with a 1.5rem outward radius.
<div class="bracket-card">
<span class="bracket-card__shape-left" aria-hidden="true"></span>
<div class="bracket-card__body">
<!-- icon + title + body -->
</div>
<span class="bracket-card__shape-right" aria-hidden="true"></span>
</div>Shadow cards
Surface card with no border — relies on a soft --shadow-s
for definition and lifts to --shadow-m on hover. Use
anywhere a card needs to feel "lifted" without a visible outline.
The class owns surface, radius, shadow, and the lift transition only —
slot in your own padding and layout.
Card title
Short supporting copy. The card surface, radius, and shadow are owned by the class — slot in your own padding and content.
Hover me
On hover the card lifts 2px and the shadow deepens to --shadow-m.
<article class="shadow-card">
<img src="..." alt="..." />
<div class="card-body">
<h4>Card title</h4>
<p>Body copy.</p>
</div>
</article>Imagery
All <img> elements receive a filter: sepia(20%)
treatment for a unified warm cast across photography. Ported intentionally
from the Bricks reference site.