How devs use this. Link the stylesheet once – <link rel="stylesheet" href="tea-styles.css"> – then copy the markup under any component below (click Show / Copy code). Re-theme the entire system by editing the tokens at the top of tea-styles.css. House style: rounded corners, soft shadows, WCAG-AA contrast, underline-on-hover for all text links.

Colour tokens

Blue is the lead colour, green the accent, with a gradient between them. Edit the tokens in :root to re-skin everything.

Blue · LEAD
--tea-blue · #4C8497
Green · ACCENT
--tea-green · #54B071
Gradient
--tea-gradient
Blue · text/links
--tea-accent-strong
Ink · text
--tea-ink
Muted text
--tea-ink-3
Success
--tea-success
Danger
--tea-danger
Warning
--tea-warning
Info
--tea-info
Blue tint · bg only
--tea-accent-soft
Green tint · bg only
--tea-green-soft

Note: the *-soft tints are background fills only (badges, hovers, section washes) – they are not accent colours and shouldn't carry meaning on their own.

Typography

Headings in Spline Sans Semibold, body in Helvetica Neue. Use the .tea-h1…h6, .tea-body, .tea-small classes.

.tea-h1The quick brown fox
.tea-h2The quick brown fox
.tea-h3The quick brown fox
.tea-h4The quick brown fox
.tea-leadA larger intro paragraph for hero and section leads.
.tea-bodyStandard body copy used across the site for readability.
.linkText link with underline-on-hover
HTML usage
<h1 class="tea-h1">Heading</h1>
<p class="tea-lead">Intro lead paragraph.</p>
<p class="tea-body">Body copy.</p>
<a href="#" class="link">Text link</a>

Shadows & radius

One universal drop shadow (--tea-shadow) is applied to every card and floating surface – soft, generous, low opacity, sitting between the old medium and large. Paired with a 1px grey outline. Three corner radii only: small, medium, pill (cards use a fixed 20px).

Universal shadow + 1px outline
--tea-shadow
sm · 6px
md · 10px
pill
card · 20px
Apply via var()
/* One shadow everywhere */
box-shadow: var(--tea-shadow);
border: 1px solid var(--tea-line);
border-radius: var(--tea-radius-card); /* cards */
/* Radii: --tea-radius-sm | --tea-radius-md | --tea-radius-pill */

Buttons

Variants, sizes, states. Icons sit inline with .icon.

HTML usage
<button class="btn">Primary (blue)</button>
<button class="btn btn--accent">Accent (green)</button>
<button class="btn btn--gradient">Gradient</button>
<button class="btn btn--secondary">Secondary</button>
<button class="btn btn--ghost">Ghost</button>
<button class="btn btn--danger">Danger</button>
<button class="btn btn--sm">Small</button>
<button class="btn btn--lg btn--pill">Large pill</button>
<button class="btn" disabled>Disabled</button>

<!-- Button with trailing right arrow (CTA) -->
<button class="btn">Get started
  <svg class="icon icon--arrow" viewBox="0 0 24 24" stroke-width="2">
    <path d="M5 12h14M13 6l6 6-6 6"/></svg>
</button>

Labels & badges (pills)

Pill-shaped labels for categories/tags, plus status badges.

Strategy Design Development Live Draft Archived Filter ×
Accent Success Pending Error Info
HTML usage
<span class="label">Strategy</span>
<span class="label label--outline">Development</span>
<span class="label label--neutral">Filter <span class="label__x">×</span></span>
<span class="badge badge--success badge--dot">Success</span>

Cards

With image, without image, overlay, horizontal, and stat – shown in 3- and 4-column grids.

3-column · image cards
Insight 15 May 2026

Brand strategy that lasts

A short supporting line describing the article or service.

Read more
Case study 2 April 2026

Measurable impact

A short supporting line describing the article or service.

Read more
Featured

Overlay card

Text sits over the image with a gradient scrim.

HTML usage
<div class="tea-grid tea-grid--3">
  <article class="card card--interactive">
    <img class="card__media" src="…" alt="">
    <div class="card__body">
      <div class="card__tags"><span class="label">Insight</span></div>
      <div class="meta-item tea-small"><svg class="icon">…cal…</svg> 15 May 2026</div>
      <h3 class="card__title">Title</h3>
      <p class="card__text">Supporting line.</p>
      <a href="#" class="link">Read more</a>
    </div>
  </article>
</div>
<!-- Overlay: <article class="card card--overlay"> -->
3-column · category badge on image (top-right)
Insight
15 May 2026

Brand strategy that lasts

A short supporting line describing the article or service.

Read more
Case study
2 April 2026

Measurable impact

A short supporting line describing the article or service.

Read more
Guide
9 March 2026

Web accessibility guide

A short supporting line describing the article or service.

Read more
HTML usage
<article class="card card--interactive">
  <div class="card__media">
    <img src="…" alt="">
    <span class="label label--solid card__badge">Insight</span>  <!-- top-right -->
  </div>
  <div class="card__body">
    <span class="card__date"><svg class="icon">…</svg> 15 May 2026</span>
    <h3 class="card__title">Title</h3>
    <p class="card__text">Supporting line.</p>
    <a href="#" class="link">Read more</a>
  </div>
</article>
4-column · no-image & stat cards

No-image card

Icon-led card for services or features.

98%
Client retention
12
Markets served

Flexible

Mix and match across grids.

HTML usage
<div class="tea-grid tea-grid--4">
  <article class="card card--plain">
    <div class="card__body">
      <div class="card__icon"><svg class="icon icon--lg">…</svg></div>
      <h3 class="card__title">Title</h3>
      <p class="card__text">Text.</p>
    </div>
  </article>
  <article class="card card--stat card--plain">
    <div class="card__body">
      <div class="stat__value">98%</div>
      <div class="stat__label">Retention</div>
    </div>
  </article>
</div>
Horizontal card
Resource

Image-left layout

Good for list views and resource rows.

Open PDF
HTML usage
<article class="card card--horizontal">
  <img class="card__media" src="…" alt="">
  <div class="card__body">…</div>
</article>
Icon cards (no image)

Brand strategy

Positioning, identity and messaging that lasts.

Learn more

Web design & build

Fast, accessible, on-brand websites.

Learn more

Measurement

Analytics and reporting that prove impact.

Learn more
HTML usage
<div class="tea-grid tea-grid--3">
  <article class="card card--icon card--interactive">
    <div class="card__body">
      <div class="card__icon"><svg>…</svg></div>
      <h3 class="card__title">Brand strategy</h3>
      <p class="card__text">One-line description.</p>
      <a href="#" class="link">Learn more</a>
    </div>
  </article>
</div>
Truncated text (line clamp)

For uneven content lengths, clamp the title to one line and the body to a fixed number of lines — overflow is cut with an ellipsis so card heights stay even.

Insight

Building an ethical brand that genuinely lasts the distance

An ethical brand isn't a campaign or a colour palette — it's the sum of the decisions a business makes when no one is watching, day after day.

Read more
Guide

A short title

A much longer supporting paragraph that runs well beyond two lines so you can see exactly where the clamp cuts it off and adds the trailing ellipsis at the end.

Read more
PDF

Annual impact & sustainability report 2026 — full edition

The complete report. This description is deliberately long to demonstrate three-line and two-line clamping behaviour across cards of differing content.

Open PDF
HTML usage
<!-- single-line title, ellipsis -->
<h3 class="card__title truncate">Very long title…</h3>

<!-- clamp body to N lines: clamp-1 / clamp-2 / clamp-3 -->
<p class="card__text clamp-2">Long description…</p>

Event card

Full-bleed banner image (no text baked over it), then a bold title, a one-line description, and an icon-meta list for date and venue. Uses the universal 1px outline + soft card shadow.

GreenBiz

The premier annual gathering for sustainable business leaders.

Feb 23, 2027 – Feb 25, 2027
Gaylord Pacific, San Diego
HTML usage
<article class="card event-card">
  <!-- Full-bleed banner: image spans the whole card width -->
  <img class="card__media" src="event-banner.jpg" alt="GreenBiz 27">
  <div class="card__body">
    <h3 class="event-card__title">GreenBiz</h3>
    <p class="card__text">The premier annual gathering for sustainable business leaders.</p>
    <div class="meta-list">
      <div class="meta-item">
        <svg class="icon">…calendar…</svg> Feb 23, 2027 – Feb 25, 2027
      </div>
      <div class="meta-item">
        <svg class="icon">…building…</svg> Gaylord Pacific, San Diego
      </div>
    </div>
  </div>
</article>

Content rows

Alternating media + text rows – image left, then image right directly underneath. Each has a heading, body copy and a text link. Stacks to one column on mobile.

Strategy

Image left, content right

A short paragraph of body copy describing the section. Use these rows for services, features or alternating story blocks down a page.

Learn more
Design

Image right, content left

The reverse modifier flips the layout so rows alternate down the page. Keep copy concise and lead with a clear text link.

Learn more
HTML usage
<div class="content-row">
  <img class="content-row__media" src="…" alt="">
  <div class="content-row__body">
    <span class="label">Strategy</span>
    <h3 class="content-row__title">Heading</h3>
    <p class="content-row__text">Body copy.</p>
    <a href="#" class="link">Learn more</a>
  </div>
</div>

<!-- image on the right: add --reverse -->
<div class="content-row content-row--reverse">…</div>

Tabs

Underline tabs and pill tabs. Toggle with the small script included in this page.

Panel content for the selected tab.
The selected tab shares this panel's surface, so the colour bleeds down into the content – the tab and the panel read as one connected shape.
HTML usage
<div class="tabs" role="tablist">
  <button class="tabs__tab" role="tab" aria-selected="true">Overview</button>
  <button class="tabs__tab" role="tab" aria-selected="false">Details</button>
</div>
<div class="tabs__panel">…</div>
<!-- Pills:  <div class="tabs--pills"> -->
<!-- Connected/bleed tabs: -->
<div class="tabs--bleed">
  <button class="tabs__tab" aria-selected="true">Tab</button>
</div>
<div class="tabs__panel--bleed">…content…</div>

FAQ accordion

Native <details> – no JS required. Two-column layout collapses to one column on mobile.

What does TEA stand for?
The Ethical Agency – a creative and strategy studio across Cape Town and London.
Do you work internationally?
Yes, we work with clients across multiple markets.
How do we start a project?
Reach out via the contact form and we'll set up an intro call.
What services do you offer?
Brand strategy, design, and web development.
How long does a project take?
Most engagements run six to twelve weeks depending on scope.
Do you offer ongoing support?
Yes – we offer retainer and partnership options.
HTML usage
<div class="tea-grid tea-grid--2">
  <div class="faq">
    <details class="faq__item" open>
      <summary>Question?</summary>
      <div class="faq__answer">Answer text.</div>
    </details>
  </div>
  <div class="faq">…second column…</div>
</div>

Form elements

Inputs, select, textarea, checkbox, radio, toggle, plus validation states.

Enter a valid email address.
HTML usage
<div class="field">
  <label class="field-label">Name</label>
  <input class="input" placeholder="Jane Doe">
</div>
<select class="select">…</select>
<textarea class="textarea"></textarea>
<label class="check"><input type="checkbox"> Label</label>
<label class="switch"><input type="checkbox"><span class="switch__track"></span> Toggle</label>
<!-- States: .is-invalid / .is-valid + .error-text -->

Contact form

A ready-to-use composed block. Required fields marked with *.

Get in touch

We'll reply within two working days.

HTML usage
<form class="contact-form">
  <h3 class="tea-h3">Get in touch</h3>
  <div class="form-row">
    <div class="field"><label class="field-label">First name *</label><input class="input"></div>
    <div class="field"><label class="field-label">Last name *</label><input class="input"></div>
  </div>
  <div class="field"><label class="field-label">Message *</label><textarea class="textarea"></textarea></div>
  <button class="btn btn--block btn--lg">Send message</button>
</form>

Resources – search & filter

Live demo: search plus two dropdown filters – Category and Region. Wired with the script at the bottom of this page.

Article

Building an ethical brand

Read
Guide

Web accessibility guide

Read
Article

Measuring campaign impact

Read
Guide

Content strategy playbook

Read
Markup + filter script (see bottom of page)
<div class="toolbar">
  <div class="search">
    <svg class="icon">…search…</svg>
    <input class="input" id="resSearch" placeholder="Search resources…">
  </div>
  <div class="filters">
    <select class="select" id="resCategory">…All categories / Articles / Guides / PDFs…</select>
    <select class="select" id="resRegion">…All regions / Cape Town / London / Global…</select>
  </div>
</div>
<div class="tea-grid tea-grid--3" id="resGrid">
  <article class="card" data-type="pdf" data-region="global" data-title="Brand toolkit">…</article>
</div>
<!-- JS filters by data-type (Category) + data-region (Region) + search -->

Alerts

Heads up
An informational message for the user.
Saved
Your changes were saved successfully.
Check this
Something needs your attention.
Error
Something went wrong – try again.
HTML usage
<div class="alert alert--success">
  <div><div class="alert__title">Saved</div>Message text.</div>
</div>

Table

ProjectClientStatus
RebrandAcme CoLive
WebsiteBeta LtdIn progress
CampaignGammaPlanned
HTML usage
<table class="table table--bordered">
  <thead><tr><th>Project</th></tr></thead>
  <tbody><tr><td>Rebrand</td></tr></tbody>
</table>

Breadcrumbs & pagination

  1. Home
  2. Resources
  3. Guides
HTML usage
<ol class="breadcrumbs">
  <li><a>Home</a></li><li aria-current="page">Guides</li>
</ol>
<div class="pagination"><a class="is-active">1</a><a>2</a></div>

Modal · tooltip · progress

Hover me
TEA
ABC
HTML usage
<div class="progress"><div class="progress__bar" style="width:62%"></div></div>
<div class="spinner"></div>
<span class="tooltip" data-tip="Tip text">Hover me</span>
<span class="avatar">TE</span>
<!-- Modal markup: .modal-overlay > .modal -->

Stats counter row

Big animated counters with labels. Numbers count up when the row scrolls into view.

0
Client retention
0
Reports delivered
0
Countries
0
Years in business
HTML usage
<div class="stats-row" data-stats>
  <div class="stat-item">
    <div class="stat-item__value" data-count="98" data-suffix="%">0</div>
    <div class="stat-item__label">Client retention</div>
  </div>
  …
</div>
<!-- JS counts each value up to data-count when scrolled into view -->

CTA section

Full-width rounded call-to-action. With image (split) or without (centred). Each shows a button plus an optional text-link.

With image
Annual & ESG report design

Award-winning report designers – 400+ reports across 25 countries.

Trusted by UNDP, the World Bank, Greenpeace, B Lab Africa and more.

HTML usage
<div class="cta cta--split">
  <img class="cta__media" src="…" alt="">
  <div>
    <span class="cta__eyebrow">Eyebrow</span>
    <h3 class="cta__title">Headline</h3>
    <p class="cta__text">Supporting line.</p>
    <div class="cta__actions">
      <button class="btn btn--lg">Primary action</button>
      <a href="#" class="link">Text link</a>
    </div>
  </div>
</div>
Without image (centred, gradient)
Start a project

Ready to build something worth being proud of?

Tell us what you're working on and we'll come back within two working days.

Start a project

Ready to build something worth being proud of?

Tell us what you're working on and we'll come back within two working days.

HTML usage
<!-- --gradient = full brand gradient (white text) -->
<!-- --soft = blue-tint to green-tint, dark text -->
<div class="cta cta--center cta--gradient">
  <span class="cta__eyebrow">Eyebrow</span>
  <h3 class="cta__title">Headline</h3>
  <p class="cta__text">Supporting line.</p>
  <div class="cta__actions">
    <button class="btn btn--secondary btn--lg">Primary action</button>
  </div>
</div>

Quote / testimonial

A testimonial row with quote mark, attributed author and avatar.

“

TEA was contracted by GIZ to support the Presidency on the PYEI microsite and related design and marketing materials. The agency is agile and delivers high-quality products within tight timeframes – it has been a pleasure working with them.

TK
Tshegofatso Kgasago
Director, Project Management Office of the Presidency of South Africa
HTML usage
<div class="quote">
  <span class="quote__mark">&ldquo;</span>
  <p class="quote__text">Testimonial copy…</p>
  <div class="quote__author">
    <img class="quote__avatar" src="…" alt="">
    <div>
      <div class="quote__name">Name</div>
      <div class="quote__role">Role, Company</div>
    </div>
  </div>
</div>

Feature quotes

Editorial pull-quote options for articles and landing pages.

Centred – rules top & bottom

"What is a scientist after all? It is a curious person looking through a keyhole, the keyhole of nature, trying to know what's going on."

Jacques-Yves Cousteau
HTML usage
<blockquote class="quote-feature">
  <hr class="quote-feature__rule">
  <p class="quote-feature__text">"Quote text…"</p>
  <cite class="quote-feature__cite">Attribution</cite>
  <hr class="quote-feature__rule">
</blockquote>
Centred – italic text, upright attribution

"What is a scientist after all? It is a curious person looking through a keyhole, the keyhole of nature, trying to know what's going on."

Jacques-Yves Cousteau
HTML usage
<!-- add --italic: text italic, attribution stays upright -->
<blockquote class="quote-feature quote-feature--italic">
  <hr class="quote-feature__rule">
  <p class="quote-feature__text">"Quote text…"</p>
  <cite class="quote-feature__cite">Attribution</cite>
  <hr class="quote-feature__rule">
</blockquote>
Framed – corner brackets & quote marks
“

The deeds you do may be the only sermon some persons will hear today.

Francis of Assisi
“
HTML usage
<figure class="quote-framed">
  <span class="quote-framed__mark quote-framed__mark--open">&ldquo;</span>
  <p class="quote-framed__text">Quote text…</p>
  <figcaption class="quote-framed__cite">– Attribution</figcaption>
  <span class="quote-framed__mark quote-framed__mark--close">&ldquo;</span> <!-- rotated 180° via CSS -->
</figure>

Logo carousel

Affiliations / client logos in white cards. Arrows scroll the row; hover pauses nothing – it's manual. Drag/scroll works too.

Affiliations & accreditations

We've made a few friends along the way

Sortlist
Certified B Corp
Climate Action SA
Cape Chamber
Clean Creatives
NBI
C40 Cities
WWF
HTML usage
<div class="logos">
  <span class="logos__eyebrow">Affiliations</span>
  <h3 class="logos__title">We've made a few friends</h3>
  <div class="logos__row" id="logoRow">
    <div class="logo-card"><img src="logo.svg" alt="…"></div>
    …
  </div>
  <div class="logos__controls">
    <button class="logos__nav" data-logo-prev>‹</button>
    <div class="logos__dots">…</div>
    <button class="logos__nav" data-logo-next>›</button>
  </div>
</div>