Brewing the Aroma of 2nd Chances
The working reference for TCE Holdings, The Caffeine Experience, The TCE Academy and RAMU — logos, colour, type, theme tokens and the accessibility gate every artefact has to clear.
Three identities
theofficialtce is the holding company, and its lockup identifies the group. Each brand underneath it carries its own mark — never substitute the holding-company lockup on a café, a course or a product.
The holding company. Owns The Caffeine Experience, The TCE Academy and RAMU. Its lockup identifies the group — never put it on a product.
The café and roastery. Its own sticker-style mark — the same family as The TCE Academy's, not the holding company lockup.
The training arm. Renamed from “The Caffeine Academy” in v9.4.0 — the acronym TCA is retained.
The Maxwell Road sub-brand. Terracotta palette, indigo roundel, its own type stack.
Logo system
Every mark is shown on the ground it is actually approved for. Never stretch, rotate, recolour or add effects — scale proportionally only. Minimum 120px wide on screen, 30mm in print, with clear space equal to the cap-height of the “T”.
Primary holding-company lockup. Identifies the group on letterheads, decks, contracts and corporate web headers.
White-reversed holding-company lockup for Navy and dark grounds.
Square emblem for document headers, avatars, favicons and app icons.
Mountain emblem for print and signage.
The signage roundel. Flattened with no alpha channel: it carries its own opaque white disc, so it is correct only on a pure white ground.
Same roundel with the white disc removed: indigo line art on transparent. Use on cream, paper and any tinted light ground.
White line art on transparent, for dark grounds.
Original / full RAMU artwork.
Ramu_Logo_signage_02_2.png is flattened — it has no alpha channel and carries its own opaque white disc. It is correct only on pure white. On cream, paper or any tinted light ground it lands as a white box; on dark it lands as a bright card. Light-but-not-white takes Ramu_Indigo_Transparent.png; dark takes Ramu_White_Inverse.png. Never scale any of the three below 64px — the “by TCE” endorsement line goes illegible first.
Palette
Click any swatch to copy its hex. The figure on each chip is its contrast ratio against white — anything under 4.5:1 cannot carry body text on a white ground.
WCAG 2.1 AA · the gate
Every text and background pairing must clear 4.5:1 for normal text and 3:1 for large text, icons and focus rings. Run this before sign-off, on web, DOCX, slides, PDF and signage alike.
Rule of thumb: #76AEBB and lighter are light tones — pair them with navy text. #2F6573 and darker are dark tones — pair them with white. Never pair two lights or two darks.
Brewing the Aroma of 2nd Chances
Marginality is not destiny. This is how the pairing actually reads.
§ 02 sets H2 in primary teal #76AEBB, but teal on a white ground is only 2.46:1 — below even the 3:1 large-text floor in § 01. This page therefore sets H2 in Deep Teal #4A8A99 (3.90:1, which clears large text). Primary teal stays correct for H2 when it sits on Navy. Worth resolving in the next version bump.
Type system
Battery Park for H1, Dazzle Unicase Bold for H2, HWT Artz for H3–H4, Nunito everywhere else, Georgia italic for scripture. Each specimen below renders in the real face where the Adobe kit is available, and in its documented fallback where it is not.
Brewing the Aroma of 2nd Chances
Brewing the Aroma of 2nd Chances
Brewing the Aroma of 2nd Chances
Brewing the Aroma of 2nd Chances
Brewing the Aroma of 2nd Chances
Brewing the Aroma of 2nd Chances
We equip people on the margins with the craft, character and confidence to write a new chapter.
Marginality is not destiny.
The Caffeine Experience Pte Ltd · UEN 201725426R · 45 Maxwell Road, Singapore
Soli Deo Gloria — To God alone be the glory.
Brewing the Aroma of 2nd Chances
| Role | Font | Web | Colour | Licence | |
|---|---|---|---|---|---|
| H1 | Battery Park | 48–72px | 28–36pt | --doc-navy | Adobe desktop licence — embed in DOCX/PDF only |
| H2 | Dazzle Unicase Bold | 32–44px | 20–24pt | --tce-teal | Adobe desktop licence — embed in DOCX/PDF only |
| H3 | HWT Artz | 22–28px | 14–16pt | --doc-navy | Adobe desktop licence — embed in DOCX/PDF only |
| H4 | HWT Artz | 18–22px | 12–14pt | --tce-teal | Adobe desktop licence — embed in DOCX/PDF only |
| H5 | Nunito SemiBold | 16–18px | 11–12pt | --charcoal | SIL OFL |
| H6 | Nunito Bold (uppercase, +60 tracking) | 12–14px | 9–10pt | --mid-grey | SIL OFL |
| Body | Nunito Regular | 15–17px | 10.5–11pt | --doc-body | SIL OFL |
| Highlight / lead | Nunito SemiBold | 17–19px | 11–12pt | --doc-navy | SIL OFL |
| Footer / fine print | Nunito Light | 11–13px | 8–9pt | --mid-grey | SIL OFL |
| Scripture / SDG | Georgia Italic | 14–16px | 11pt | --doc-navy | System font |
| Extra weight | Nunito ExtraBold | — | — | --doc-navy | SIL OFL |
Implementation
This page is rendered by the tokens below — what you copy is what you are looking at. Paste the block into any HTML, React or Tailwind project.
:root {
--tce-teal: #76AEBB;
--tce-teal-deep: #4A8A99;
--tce-teal-dark: #2F6573;
--tce-teal-light: #A6CDD6;
--tce-teal-mist: #D5E8EC;
--tce-teal-paper: #EEF6F8;
--tce-warm: #D7A887;
--tce-coral: #C97E5C;
--tce-cream: #FAF4E6;
--tce-gold: #C9A84C;
--charcoal: #2D2D2D;
--mid-grey: #6B6B6B;
--soft-grey: #B8B8B8;
--off-white: #F7F4ED;
--white: #FFFFFF;
--doc-navy: #1A2E44;
--doc-teal: #76AEBB;
--doc-gold: #C9A84C;
--doc-red: #B02E2E;
--doc-body: #333333;
--doc-cream: #FAF4E6;
--ramu-terracotta: #C1654A;
--ramu-cream: #F5EDE0;
--ramu-espresso: #3D2B1F;
--font-h1: 'Battery Park', 'Oswald', 'Bebas Neue', Impact, sans-serif;
--font-h2: 'Dazzle Unicase', 'Playfair Display SC', Georgia, serif;
--font-h3: 'HWT Artz', 'Oswald', 'Arial Black', sans-serif;
--font-h4: 'HWT Artz', 'Oswald', 'Arial Black', sans-serif;
--font-body: Nunito, system-ui, 'Helvetica Neue', Arial, sans-serif;
--font-highlight: Nunito, system-ui, sans-serif;
--font-footer: Nunito, system-ui, sans-serif;
--font-scripture: Georgia, 'Times New Roman', serif;
}Primary action. Dark Teal ground so white label clears AA; the active state flips to Navy-on-teal.
Left teal rule, soft teal shadow. The default content container.
HWT Artz over a gold rule.
Cream ground, gold rule, Georgia italic. Used for scripture and pull quotes.
Navy bar with a teal underline.
The sub-brand equivalent — terracotta rule on warm cream.
/* Button — Primary action. Dark Teal ground so white label clears AA; the active state flips to Navy-on-teal. */
.btn-tce { background: var(--tce-teal-dark); color: var(--white); font-family: var(--font-body);
font-weight: 600; border-radius: 4px; padding: 10px 20px; border: none; transition: background .2s; }
.btn-tce:hover { background: var(--tce-teal-deep); }
.btn-tce:active { background: var(--tce-teal); color: var(--doc-navy); }
/* Card — Left teal rule, soft teal shadow. The default content container. */
.card-tce { background: var(--white); border-left: 4px solid var(--tce-teal); border-radius: 6px;
padding: 20px; box-shadow: 0 2px 8px rgba(118,174,187,.18); }
/* Section heading — HWT Artz over a gold rule. */
.heading-tce { font-family: var(--font-h3); color: var(--doc-navy);
border-bottom: 2px solid var(--doc-gold); padding-bottom: 8px; }
/* Callout / scripture — Cream ground, gold rule, Georgia italic. Used for scripture and pull quotes. */
.callout-tce { background: var(--doc-cream); border-left: 4px solid var(--doc-gold);
padding: 16px 20px; font-family: var(--font-scripture); font-style: italic; color: var(--doc-navy); }
/* Page header — Navy bar with a teal underline. */
.header-tce { background: var(--doc-navy); color: var(--white); padding: 16px 24px;
border-bottom: 3px solid var(--tce-teal); }
/* RAMU card — The sub-brand equivalent — terracotta rule on warm cream. */
.card-ramu { background: var(--ramu-cream); border-left: 4px solid var(--ramu-terracotta);
border-radius: 6px; padding: 20px; color: var(--ramu-espresso); font-family: var(--font-ramu-body); }Assets
Logos are served from the TCE CDN and can be hotlinked directly. Fonts are split by licence — see the note below before you go looking for the display faces.
All logos plus the Nunito family, with a licence README.
Download .zipEvery current TCE, TCA and RAMU mark at full resolution.
Download .zipThe five Nunito weights. Open licence, free to redistribute.
Download .zipThese three sit on an Adobe desktop licence, which permits embedding the font inside a TCE/TCA/RAMU document but not redistributing the font file. They still render on this page and on any TCE site through the Adobe web kit — you just cannot take the file. Licensed users sync them from the TCE library on Adobe Fonts, or use web kit cfb7seg for browser rendering.