Guidelines v9.9.1Released 19 October 2026

Brand Hub

Brewing the Aroma of 2nd Chances

The one reference for TCE Holdings, The Caffeine Experience, The TCE Academy and RAMU — logos, colour, type, voice, theme tokens and the accessibility gate every artefact has to clear. If anything you see elsewhere disagrees with this page, this page wins.

brand.theofficialtce.com is the TCE brand page. The old theofficialtce.com/pages/tce-branding is retired and redirects here.

Download all assets (.zip)Browse downloads

24 colours
11 type roles
10 logos
6 components

01Brand architecture

One group, four marks

theofficialtce is the holding company, and its lockup identifies the group. Each brand beneath it carries its own mark.

Never substitute the holding-company lockup on a café, a course or a product — the café, the Academy and RAMU each sign with their own mark.

theofficialtce

TCE Holdings Pte Ltd

The holding company. Owns The Caffeine Experience, The TCE Academy and RAMU. Its lockup identifies the group — never put it on a product.

The Caffeine Experience

The Caffeine Experience Pte Ltd

The café and roastery. Its own sticker-style mark — the same family as The TCE Academy's, not the holding company lockup.

TCA

The TCE Academy

The training arm. Renamed from “The Caffeine Academy” in v9.4.0 — the acronym TCA is retained.

RAMU

RAMU by TCE

The Maxwell Road sub-brand. Terracotta palette, indigo roundel, its own type stack.

02Logo system

Logos

Every mark is shown on the ground it is approved for. Scale in proportion only — never stretch, rotate, recolour or add effects.

The marks

10 current files · download or hotlink

TCE Holdings Pte Ltd 4 files

On light

Primary

TCE Holdings Lockup

TCE_LONG_BLACK_LOGO.png1200 × 500 px · 12:5 landscape

Primary holding-company lockup. Identifies the group on letterheads, decks, contracts and corporate web headers.

Download View

On dark

TCE Holdings Lockup — White Reversed

TCE_LONG_WHITE_INVERSE_LOGO.png1200 × 500 px · 12:5 landscape

White-reversed holding-company lockup for Navy and dark grounds. Canonical from v9.8.0 — 1200×500, the same artwork as the black lockup.

Download View

On light

TCE Holdings Square Emblem

TCE_SQ_BLACK_LOGO.png1880 × 1880 px · 1:1 square

Square emblem for document headers, avatars, favicons and app icons.

Download View

On light

TCE Holdings Mountain Emblem

TCE_mountain.png567 × 340 px · 1.67:1 landscape

Mountain emblem for print and signage.

Download View

The Caffeine Experience · The TCE Academy 2 files

On light

Primary

The Caffeine Experience Mark — 2:1 landscape

The_Caffeine_Experience_Logo_600x1200.png1200 × 600 px · 2:1 landscape

The café brand's own sticker-style lockup — bold outlined type, same family as The TCE Academy's mark. Use this wherever the café is named, never the holding-company lockup. Despite the “600x1200” in its filename, the file is 1200×600 px — a 2:1 landscape lockup.

Download View

On light

Primary

The TCE Academy Wordmark

The_TCE_Academy_Logo.png1000 × 1000 px · 1:1 square

Primary TCA wordmark — the stacked “The | TCE | ACADEMY” lockup on a transparent ground. Use everywhere TCA is named.

Download View

RAMU by TCE 4 files

White only

Primary

RAMU Roundel — white grounds only

Ramu_Logo_signage_02_2.png1920 × 1920 px · 1:1 square

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.

Download View

On light

RAMU Roundel — light, not white

Ramu_Indigo_Transparent.png1613 × 1613 px · 1:1 square

Same roundel with the white disc removed: indigo line art on transparent. Use on cream, paper and any tinted light ground.

Download View

On dark

RAMU Roundel — dark grounds

Ramu_White_Inverse.png1613 × 1613 px · 1:1 square

White line art on transparent, for dark grounds.

Download View

On light

RAMU Original Artwork

Ramu_original.png1920 × 1920 px · 1:1 square

Original / full RAMU artwork.

Download View

Retired: The_Caffeine_Academy_Logo_1200x600.png — Retired in v9.4.0 when the academy was renamed to The TCE Academy. The file now carries the new artwork as a back-compat safety net — do not reference this filename in new work.

Retired: TCE_LONG_INVERSE_WHITE_LOGO.png — Retired in v9.8.0 — use TCE_LONG_WHITE_INVERSE_LOGO.png (1200×500, same artwork). The file stays on the CDN so old links keep working.

On every ground

The holding lockup, placed right

DoNavyThe white-reversed file on Navy and dark grounds.

Clear space & size

TTTT

Clear space

Keep a margin equal to the cap-height of the “T” on all sides. Nothing — text, edges, other marks — enters it.

120 px · 30 mm

Minimum size

Never smaller than 120px wide on screen or 30mm in print. Co-branding: TCE first (left or top), partners at equal optical size, at least 20px (5mm) apart.

Don’ts

Each of these has shipped somewhere. None may ship again.

The RAMU roundel trap

Three files, chosen by the ground

DoLight, not white → indigo`Ramu_Indigo_Transparent.png`

DoDark → white inverse`Ramu_White_Inverse.png`

Why it happens

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.

03Palette

Colour

Tap any swatch to copy its hex. Each shows its contrast on white and on navy — under 4.5:1 cannot carry body text on that ground.

The teal family

Lightest to darkest — light tones take navy text, dark tones take white

Teal Paper#EEF6F8
Teal Mist#D5E8EC
Light Teal#A6CDD6
TCE Teal#76AEBB
Deep Teal#4A8A99
Dark Teal#2F6573

Primary — TCE Teal

#76AEBB is the anchor. Everything else is tuned to it.

Warm accents

Complementary warmth. Coral is a CTA colour — use it sparingly.

Neutrals

Grounds, borders and body text.

Document & print

The palette used in DOCX, PDF and slide work.

RAMU sub-brand

Terracotta, cream and espresso. Teal appears only as endorsement.

04WCAG 2.1 AA · the gate

Accessibility

Every text and background pairing must clear 4.5:1 for normal text and 3:1 for large text, icons and focus rings — 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.

Check a pairing

Run it before sign-off

Text colour

Background

Brewing the Aroma of 2nd Chances

Marginality is not destiny. This is how the pairing actually reads.

Contrast ratio13.83:1AAA

Normal text · 4.5:1Passes AAunder 24px, or under 19px bold
Large text · 3:1Passes AA24px and up, or 19px bold
UI & icons · 3:1Passes AAborders, icons, focus rings

Pre-cleared pairings

14 combinations that always pass

Navy on White
#1A2E44 on #FFFFFF — The default document pairing.13.83:1
Navy on Cream
#1A2E44 on #FAF4E612.61:1
Navy on Warm Off-White
#1A2E44 on #F7F4ED12.60:1
Charcoal on White
#2D2D2D on #FFFFFF13.76:1
Body on White
#333333 on #FFFFFF12.63:1
Dark Teal on White
#2F6573 on #FFFFFF — The only teal safe as body text on white.6.50:1
White on Navy
#FFFFFF on #1A2E44 — Reversed headers and footers.13.83:1
Light Teal on Navy
#A6CDD6 on #1A2E448.12:1
Gold on Navy
#C9A84C on #1A2E44 — Gold works on navy — never on white.6.05:1
TCE Teal on Navy
#76AEBB on #1A2E445.63:1
Navy on TCE Teal
#1A2E44 on #76AEBB — Navy on teal is how you use the primary as a ground.5.63:1
Navy on Light Teal
#1A2E44 on #A6CDD68.12:1
Navy on Gold
#1A2E44 on #C9A84C6.05:1
Dark Teal on Teal Mist
#2F6573 on #D5E8EC — v9.8.0: H2 and H4 on mist and other tinted light grounds.5.13:1

Banned pairings

Never ship these

Brewing the Aroma of 2nd Chances

Don’tWhite on TCE Teal#FFFFFF on #76AEBB2.46:1The single most common brand mistake. Put Navy on teal instead, or move to Dark Teal.

Brewing the Aroma of 2nd Chances

Don’tGold on White#C9A84C on #FFFFFF2.29:1Gold is a ground and a rule colour, not a text colour on white.

Brewing the Aroma of 2nd Chances

Don’tMid Grey on Navy#6B6B6B on #1A2E442.60:1Two mid-tones. Use Light Teal or White for secondary text on navy.

Brewing the Aroma of 2nd Chances

Don’tTCE Teal on White#76AEBB on #FFFFFF2.46:1v9.8.0: TCE Teal is never text on a light ground — not H2, not H4. H2 takes Deep Teal, H4 Dark Teal; teal text belongs on navy.

Resolved in v9.8.0 — teal headings

Up to v9.7.0 the spec set H2 and H4 in TCE Teal #76AEBB, which is only 2.46:1 on white — below even the 3:1 large-text floor. From v9.8.0, #76AEBB is text only on navy and dark grounds. On white, cream and paper H2 is Deep Teal #4A8A99 (3.90 / 3.55 / 3.56:1 — H2 is always large text); on mist and other tints it is Dark Teal #2F6573 (5.13:1). H4 is Dark Teal on every light ground (6.50:1 on white). On navy both are TCE Teal (5.63:1), or Light Teal for H2 (8.12:1). See § 05.

05Type system

Typography

Battery Park for the hero, Dazzle Unicase Bold for section heads, HWT Artz for sub-heads, Nunito for everything you read, Georgia italic for scripture.

Display faces

Adobe Fonts · web kit cfb7seg

AaABCDEFGHIJKLM 0123456789

Battery Park

H1 · hero titles only

CSS: 'battery-park'
Weight: 400
Licence: Adobe desktop licence — embed in DOCX/PDF only

AaAbcdefghijklm 0123456789

Dazzle Unicase

H2 · section heads

CSS: 'dazzle-unicase'
Weight: 700
Licence: Adobe desktop licence — embed in DOCX/PDF only

AaABCDEFGHIJKLM 0123456789

HWT Artz

H3 & H4 · sub-heads, in capitals

CSS: 'hwt-artz'
Weight: 700
Licence: Adobe desktop licence — embed in DOCX/PDF only

Reading faces

Nunito is free to host; Georgia is on every system

AaLight Regular SemiBold ExtraBold

Nunito

Body, lead, H5–H6, footers and fine print

CSS: 'Nunito TCE', 'nunito'
Weights: 200–900, with italics
Licence: SIL Open Font License — self-hosted here

AaSoli Deo Gloria — To God alone be the glory.

Georgia Italic

Scripture, pull quotes and the doxology

CSS: Georgia, 'Times New Roman', serif
Style: Italic, always · Navy
Licence: System font

The ladder

11 roles, each set in its real face

H1Battery ParkWeb 48–72pxPrint 28–36ptColour --doc-navyAdobe desktop licence — embed in DOCX/PDF only
Brewing the Aroma of 2nd Chances
H2Dazzle Unicase BoldWeb 32–44pxPrint 20–24ptColour --tce-teal-deepAdobe desktop licence — embed in DOCX/PDF only
Brewing the Aroma of 2nd Chances
H3HWT ArtzWeb 22–28pxPrint 14–16ptColour --doc-navyInstalled as HWTArtzW00-RegularAdobe desktop licence — embed in DOCX/PDF only
Brewing the Aroma of 2nd Chances
H4HWT ArtzWeb 18–22pxPrint 12–14ptColour --tce-teal-darkInstalled as HWTArtzW00-RegularAdobe desktop licence — embed in DOCX/PDF only
Brewing the Aroma of 2nd Chances
H5Nunito SemiBoldWeb 16–18pxPrint 11–12ptColour --charcoalSIL OFL
Brewing the Aroma of 2nd Chances
H6Nunito Bold (uppercase, +60 tracking)Web 12–14pxPrint 9–10ptColour --mid-greyInstalled as Nunito BoldSIL OFL
Brewing the Aroma of 2nd Chances
BodyNunito RegularWeb 15–17pxPrint 10.5–11ptColour --doc-bodyInstalled as NunitoSIL OFL
We equip people on the margins with the craft, character and confidence to write a new chapter.
Highlight / leadNunito SemiBoldWeb 17–19pxPrint 11–12ptColour --doc-navySIL OFL
Marginality is not destiny.
Footer / fine printNunito LightWeb 11–13pxPrint 8–9ptColour --mid-greySIL OFL
The Caffeine Experience Pte Ltd · UEN 201725426R · 45 Maxwell Road, Singapore
Scripture / SDGGeorgia ItalicWeb 14–16pxPrint 11ptColour --doc-navyInstalled as GeorgiaSystem font
Soli Deo Gloria — To God alone be the glory.
Extra weightNunito ExtraBoldWeb —Print —Colour --doc-navySIL OFL
Brewing the Aroma of 2nd Chances

Heading colours

New in v9.8.0 — #76AEBB is text only on navy

H2 is always large text (24px and up, bold), so it needs 3:1; H4 is set at 18–22px and is held to 4.5:1. TCE Teal stays the anchor for fills, rules and icons — as text it belongs on navy.

ColourSub-head

DoOn WhiteH2 Deep Teal 3.90:1H4 Dark Teal 6.50:1

ColourSub-head

DoOn CreamH2 Deep Teal 3.55:1H4 Dark Teal 5.93:1

ColourSub-head

DoOn Teal PaperH2 Deep Teal 3.56:1H4 Dark Teal 5.94:1

ColourSub-head

DoOn Teal MistH2 Dark Teal 5.13:1H4 Dark Teal 5.13:1

ColourSub-head

DoOn NavyH2 TCE Teal 5.63:1H4 TCE Teal 5.63:1or H2 Light Teal 8.12:1

ColourSub-head

Don’tTCE Teal on WhiteH2 TCE Teal 2.46:1H4 TCE Teal 2.46:1

Rules

Brand Hub

DoBattery Park for the hero title — once a page

We equip people on the margins with the craft, character and confidence to write a new chapter.

Don’tBattery Park for section heads or running text

font-family:
  'hwt-artz',
  'HWT Artz',
  'Oswald', sans-serif;

DoName the kit family firstThe kit serves the face as hwt-artz.

font-family:
  'HWT Artz',
  'Oswald', sans-serif;

Don’tOnly the spaced nameMatches nothing on the web — every heading falls back.

06Voice & tone

How TCE sounds

Warm, purposeful, faith-grounded, empowering. Lead with dignity, show don’t tell, and thread every piece back to the mission: marginality is not destiny.

Five principles

Dignity first
Our people are skilled professionals in training — never charity cases, never “the less fortunate.”
Transformation over pity
Speak of who people are becoming, not where they have been. No trauma as spectacle.
Faith-rooted, respectful
Language reflects inherent, God-given dignity. Scripture is used thoughtfully, never coercively — we serve people of every faith and none.
Show, don’t tell
Concrete stories over statistics. A name and a moment beat a percentage.
Mission-connected
Every sentence serves the story of transformation — and threads back to “Marginality is not destiny.”

Say this, not that

Don’t say
underprivileged / disadvantaged / ex-offendersSay insteadpeople on the margins · learners restarting life · those society overlooked
Don’t say
We help them get jobs.Say insteadWe equip people with the craft, character and confidence to write a new chapter.
Don’t say
Please support our cause.Say insteadJoin us in proving that marginality is not destiny.
Don’t say
Our trainees have sad backgrounds.Say insteadOur learners bring resilience forged through real struggle — their greatest asset.
Don’t say
We give back to society.Say insteadWe invest in people others overlooked — and the returns are extraordinary.
Don’t say
beneficiaries / inmatesSay insteadlearners · graduates · baristas-in-training · our people
Don’t say
handout / charitySay insteadopportunity · apprenticeship · investment

Tone by channel

Website & about

Warm, confident, mission-forward. Short paragraphs, one clear call to action.

Donor & grant writing

Evidence and story: one concrete life, one honest outcome. No inflated claims.

Social

Human and specific — a first name, a moment, a cup.

TCA coursework

Clear, encouraging, instructional. Address the learner as a capable professional.

Pastoral & devotional

Gentle, hopeful, scripture-anchored and trauma-aware.

RAMU & café

Sensory, hospitable, heritage-proud. Spice, warmth, welcome.

Before you publish

Treats people as professionals-in-training, not cases?
A concrete person or moment, not just a statistic?
Would a learner be proud to read this about themselves?
One clear next step?
Mission thread present without being slogan-heavy?
Claims honest and substantiated?

Faith language

Close formal brand documents with the doxology, in Georgia italic, Navy.
Scripture: cite the version, keep it brief — illuminate, don’t lecture.
In public and multi-faith settings, frame dignity universally; keep explicit devotional language for faith-context pieces.

Soli Deo Gloria — To God alone be the glory.

07Applications

The brand in context

The tokens assembled: a hero, a set of cards, the buttons, and the canonical component patterns — each rendered by its own CSS.

A page hero

Navy ground, white type, teal accent

Brewing the Aroma of 2nd Chances

Marginality is not destiny.

Visit a caféOur story

Soli Deo Gloria — To God alone be the glory.

Cards

One per brand, each in its own mark and palette

The Caffeine Experience Pte Ltd

The Caffeine Experience

The café and roastery. Its own sticker-style mark — the same family as The TCE Academy's, not the holding company lockup.

Learn more

The TCE Academy

TCA

The training arm. Renamed from “The Caffeine Academy” in v9.4.0 — the acronym TCA is retained.

Learn more

RAMU by TCE

RAMU

The Maxwell Road sub-brand. Terracotta palette, indigo roundel, its own type stack.

Learn more

Buttons

Pill keys, Nunito Bold, 44px tall to tap

On light grounds

PrimaryDark Teal · white 6.50:1HoverNavy · white 13.83:1PressedNavy on teal 5.63:1SecondaryDark Teal outline

On navy

PrimaryNavy on teal — never whiteSecondaryLight Teal outlineFocusedGold focus ring on navy

Component patterns

6 canonical snippets, live

Button

Primary action, raised (v9.9.0): Dark Teal with the websites’ inside bevel — a light rim and catch-light on top, a dark bevel bottom-right. Hover lifts to Navy (white on Deep Teal is only 3.9:1); pressed flips to Navy-on-teal and sinks in.

.btn-tce

Card

Left teal rule, soft teal shadow. The default content container. A light card stays flat — only dark objects are raised (v9.9.0).

Card

Teal rule, soft teal shadow.

.card-tce

Section heading

HWT Artz over a gold rule.

Section heading

.heading-tce

Callout / scripture

Cream ground, gold rule, Georgia italic. Used for scripture and pull quotes.

Soli Deo Gloria — To God alone be the glory.

.callout-tce

Page header

Navy bar with a teal underline. A full-bleed band is a ground, so it stays flat — no bevel (v9.9.0).

Page header

.header-tce

RAMU card

The sub-brand equivalent — terracotta rule on warm cream.

RAMU card

Terracotta rule on warm cream.

.card-ramu

08Implementation

Code & tokens

This page is rendered by the tokens below — what you copy is what you are looking at. Paste them into any HTML, React or Tailwind project.

Load the fonts

Two lines in the <head>. The Adobe kit brings the three display faces; brand-fonts.css brings the self-hosted Nunito family — the same file both TCE Shopify sites load.

HTMLFont loading

<!-- Display faces: Adobe Fonts web kit cfb7seg (Battery Park, Dazzle Unicase, HWT Artz) -->
<link rel="stylesheet" href="https://use.typekit.net/cfb7seg.css">

<!-- Body: self-hosted Nunito, SIL OFL — as 'Nunito' and the unambiguous 'Nunito TCE' -->
<link rel="stylesheet" href="https://brand.theofficialtce.com/brand-fonts.css">

Use the kit family names

The kit registers each face under a lowercase, hyphenated name. Ask for that name first, and ask for the weight the kit serves — anything else falls back or fakes a bold.

H1 · hero onlyfont-family: 'battery-park'weight 400
H2 · sectionsfont-family: 'dazzle-unicase'weight 700 (300 also served)
H3 / H4font-family: 'hwt-artz'weight 700
Bodyfont-family: 'Nunito TCE', 'nunito'200–900, with italics

CSSHeadings

h1 { font-family: var(--font-h1); font-weight: 400; }   /* battery-park — hero only */
h2 { font-family: var(--font-h2); font-weight: 700; }   /* dazzle-unicase */
h3, h4 { font-family: var(--font-h3); font-weight: 700;  /* hwt-artz */
         text-transform: uppercase; letter-spacing: .04em; }
h1, h2, h3, h4 { font-synthesis: none; }               /* never fake a bold */

/* Heading colours (v9.8.0) — TCE Teal #76AEBB is never text on a light ground */
h2 { color: var(--tce-teal-deep); }                /* 3.90:1 on white · large text only */
h4 { color: var(--tce-teal-dark); }                /* 6.50:1 on white */
.on-mist h2 { color: var(--tce-teal-dark); }       /* 5.13:1 on Teal Mist */
.on-dark h2, .on-dark h4 { color: var(--tce-teal); } /* 5.63:1 on navy */

Paste the tokens

Every colour and type role as a CSS custom property, straight from the vault.

CSSCSS custom properties — TCE v9.9.1

/* TCE Brand Guidelines v9.9.1 · 19 October 2026 · brand.theofficialtce.com */
: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;

  /* Adobe kit cfb7seg names first — 'battery-park', 'dazzle-unicase', 'hwt-artz' */
  --font-h1:          'battery-park', 'Battery Park', 'Oswald', 'Bebas Neue', Impact, sans-serif;
  --font-h2:          'dazzle-unicase', 'Dazzle Unicase', 'Playfair Display SC', Georgia, serif;
  --font-h3:          'hwt-artz', 'HWT Artz', 'Oswald', 'Arial Black', sans-serif;
  --font-h4:          'hwt-artz', 'HWT Artz', 'Oswald', 'Arial Black', sans-serif;
  --font-body:        'Nunito TCE', 'nunito', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-highlight:   'Nunito TCE', 'nunito', system-ui, sans-serif;
  --font-footer:      'Nunito TCE', 'nunito', system-ui, sans-serif;
  --font-scripture:   Georgia, 'Times New Roman', serif;
}

/* Heading colours (v9.8.0) — TCE Teal #76AEBB is never text on a light ground */
h2 { color: var(--tce-teal-deep); }                /* 3.90:1 on white · large text only */
h4 { color: var(--tce-teal-dark); }                /* 6.50:1 on white */
.on-mist h2 { color: var(--tce-teal-dark); }       /* 5.13:1 on Teal Mist */
.on-dark h2, .on-dark h4 { color: var(--tce-teal); } /* 5.63:1 on navy */

Add the components

The six patterns previewed in § 07, as one block.

CSSComponent CSS

/* Button — Primary action, raised (v9.9.0): Dark Teal with the websites’ inside bevel — a light rim and catch-light on top, a dark bevel bottom-right. Hover lifts to Navy (white on Deep Teal is only 3.9:1); pressed flips to Navy-on-teal and sinks in. */
:root {   /* bevel tokens, skill § 04 */
  --bevel-dark:      inset 0 0 0 1px rgba(255,255,255,.16), inset 0 2px 1px rgba(255,255,255,.26),
                     inset 3px 3px 6px rgba(255,255,255,.14), inset -3px -4px 7px rgba(0,0,0,.55);
  --btn-bevel-dark:  0 4px 12px rgba(0,0,0,.30), var(--bevel-dark);
  --white-press:     inset 0 3px 6px rgba(26,46,68,.30), inset 0 1px 1px rgba(26,46,68,.20), inset 0 -1px 0 #fff;
}
.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; box-shadow: var(--bevel-dark);
  transition: background .2s, box-shadow .2s; }
.btn-tce:hover  { background: var(--doc-navy); box-shadow: var(--btn-bevel-dark); }   /* v9.9.0: was Deep Teal — white on #4A8A99 is 3.9:1 */
.btn-tce:active { background: var(--tce-teal); color: var(--doc-navy); box-shadow: var(--white-press); }

/* Card — Left teal rule, soft teal shadow. The default content container. A light card stays flat — only dark objects are raised (v9.9.0). */
.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); }                        /* light card: flat */

/* 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. A full-bleed band is a ground, so it stays flat — no bevel (v9.9.0). */
.header-tce { background: var(--doc-navy); color: var(--white); padding: 16px 24px;
  border-bottom: 3px solid var(--tce-teal); }                 /* full-bleed band = ground: flat, no bevel */

/* 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); }

09Assets

Downloads

Logos are served from the TCE CDN and can be hotlinked directly. Fonts are split by licence — read the note before you go looking for the display faces.

Everything

All logos plus the Nunito family, with a licence README.

Download .zip

Logos only

Every current TCE, TCA and RAMU mark at full resolution.

Download .zip

Fonts only

The Nunito family, 14 files. Open licence, free to redistribute.

Download .zip

Logo files

Hotlink or download

TCE Holdings Lockup
TCE_LONG_BLACK_LOGO.png
1200 × 500 px · 12:5 landscapeDownload
TCE Holdings Lockup — White Reversed
TCE_LONG_WHITE_INVERSE_LOGO.png
1200 × 500 px · 12:5 landscapeDownload
TCE Holdings Square Emblem
TCE_SQ_BLACK_LOGO.png
1880 × 1880 px · 1:1 squareDownload
TCE Holdings Mountain Emblem
TCE_mountain.png
567 × 340 px · 1.67:1 landscapeDownload
The Caffeine Experience Mark — 2:1 landscape
The_Caffeine_Experience_Logo_600x1200.png
1200 × 600 px · 2:1 landscapeDownload
The TCE Academy Wordmark
The_TCE_Academy_Logo.png
1000 × 1000 px · 1:1 squareDownload
RAMU Roundel — white grounds only
Ramu_Logo_signage_02_2.png
1920 × 1920 px · 1:1 squareDownload
RAMU Roundel — light, not white
Ramu_Indigo_Transparent.png
1613 × 1613 px · 1:1 squareDownload
RAMU Roundel — dark grounds
Ramu_White_Inverse.png
1613 × 1613 px · 1:1 squareDownload
RAMU Original Artwork
Ramu_original.png
1920 × 1920 px · 1:1 squareDownload

Fonts you can download

The full Nunito family, 14 files · SIL Open Font License v1.1

Nunito ExtraLight
200 · Nunito-ExtraLight.ttf · Nunito-ExtraLightItalic.ttfTTF Italic TTF
Nunito Light
300 · Nunito-Light.ttf · Nunito-LightItalic.ttfTTF Italic TTF
Nunito Regular
400 · Nunito-Regular.ttf · Nunito-Italic.ttfTTF Italic TTF
Nunito SemiBold
600 · Nunito-SemiBold.ttf · Nunito-SemiBoldItalic.ttfTTF Italic TTF
Nunito Bold
700 · Nunito-Bold.ttf · Nunito-BoldItalic.ttfTTF Italic TTF
Nunito ExtraBold
800 · Nunito-ExtraBold.ttf · Nunito-ExtraBoldItalic.ttfTTF Italic TTF
Nunito Black
900 · Nunito-Black.ttf · Nunito-BlackItalic.ttfTTF Italic TTF

Battery Park, Dazzle Unicase Bold, HWT Artz are not downloadable here

These 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.

10Versioning

About this hub

A published projection of the tce-brand-guidelines skill, v9.9.1. Where anything disagrees with that skill, the skill wins.

This is the TCE brand page. brand.theofficialtce.com replaces theofficialtce.com/pages/tce-branding, which is retired and redirects (301) here — link to this address.

Source of truth

TCE Brand Guidelines v9.9.1, released 19 October 2026. The data on this page is served from the TCE vault and refreshed every five minutes.

The organisation

The Caffeine Experience Pte Ltd · UEN 201725426R
45 Maxwell Road, URA Centre, Singapore
theofficialtce.com

Mission

Marginality is not destiny.
Brewing the Aroma of 2nd Chances

Change log

Full history in the tce-brand-guidelines skill, § 09

v9.9.119 October 2026Current
- Social handle: TCE has one Instagram and one Facebook for every café, both @tcecafesg (instagram.com/tcecafesg and facebook.com/tcecafesg). The old @theofficialtce social entry is retired. The website stays theofficialtce.com, and RAMU stays @ramu.sg.
v9.9.04 October 2026
- Raised dark, pressed light: every dark object (a key, button, pill, chip, badge, card, panel, box or title bar in Navy, Dark Teal, Charcoal or RAMU Espresso) wears the websites’ inside bevel. That means a light rim and catch-light on top, and a dark bevel towards the bottom-right. A light pill that marks the current item is pressed. Grounds, light cards, rules and text stay flat. If it has four edges of its own, it is an object.
- Four new tokens: --bevel-dark for keys, --bevel-dark-lg for cards and panels, --btn-bevel-dark for a key lifted on hover, and --white-press for a current light pill. The bevel never changes a fill or a text colour, so every contrast result stands.
- Button hover: white on Deep Teal #4A8A99 is 3.9:1 and fails AA at button size. A dark button now turns Navy on hover, as on the websites, and sinks to Navy-on-teal when pressed.
- Other formats: PDF prints the CSS bevel from Chrome, Word draws it with light top and left and dark bottom and right cell borders, and slides lay a transparent bevel skin over the shape. Details are in references/bevel.md in the skill.
- This hub wears it too: its dark buttons, navy panels, code blocks, role chips and toast are raised, and the current item in the contents rail is pressed.
v9.8.027 September 2026
- Webfont names: every font stack names the Adobe kit family first — ‘battery-park’, ‘dazzle-unicase’, ‘hwt-artz’ — with the spaced name after it. The spaced names alone match nothing on the web, so headings had been falling back to Oswald, Georgia and Arial Black. Fixed in the vault, the tokens and brand-fonts.css.
- Heading colours: TCE Teal #76AEBB is never text on a light ground (2.46:1 on white). H2 takes Deep Teal #4A8A99 on white, cream and paper, and Dark Teal #2F6573 on mist and other tints; H4 takes Dark Teal on every light ground. On navy both take TCE Teal (or Light Teal for H2).
- Canonical white-reversed lockup: TCE_LONG_WHITE_INVERSE_LOGO.png (1200×500, same artwork). TCE_LONG_INVERSE_WHITE_LOGO.png (803×252) is retired; its file stays so old links keep working.
- The Caffeine Experience mark is a 2:1 landscape lockup (1200×600 px), whatever the “600x1200” in its filename says.
- This hub is the brand page. theofficialtce.com/pages/tce-branding is retired and redirects here.

Soli Deo Gloria — To God alone be the glory.

Brand Guidelines v9.9.1 · brand.theofficialtce.com

Brand Hub

theofficialtce

The Caffeine Experience

TCA

RAMU

The marks

TCE Holdings Lockup

TCE Holdings Lockup — White Reversed

TCE Holdings Square Emblem

TCE Holdings Mountain Emblem

The Caffeine Experience Mark — 2:1 landscape

The TCE Academy Wordmark

RAMU Roundel — white grounds only

RAMU Roundel — light, not white

RAMU Roundel — dark grounds

RAMU Original Artwork

On every ground

Clear space & size

Clear space

Minimum size

Don’ts

The RAMU roundel trap

Why it happens

The teal family

Primary — TCE Teal

Warm accents

Neutrals

Document & print

RAMU sub-brand

Check a pairing

Pre-cleared pairings

Banned pairings

Resolved in v9.8.0 — teal headings

Display faces

Battery Park

Dazzle Unicase

HWT Artz

Reading faces

Nunito

Georgia Italic

The ladder

Heading colours

Rules

Five principles

Dignity first

Transformation over pity

Faith-rooted, respectful

Show, don’t tell

Mission-connected

Say this, not that

Tone by channel

Website & about

Donor & grant writing

Social

TCA coursework

Pastoral & devotional

RAMU & café

Before you publish

Faith language

A page hero

Cards

The Caffeine Experience

TCA

RAMU

Buttons

Component patterns

Button

Card

Section heading

Callout / scripture

Page header

RAMU card

Load the fonts

Use the kit family names

Paste the tokens

Add the components

Everything

Logos only

Fonts only

Logo files