Brand guidelines · 2026

The theboys brand kit

The theboys wordmark, icon and colours — look here before putting the logo anywhere.

Soft wordmark

theboys set in Inter 900 with tight tracking. Use where plain text is required — footers, signatures, anywhere Facet has no room to breathe.

Plain wordmark

theboys set in Inter 700 with normal tracking, inheriting the text colour around it. A secondary mark for modules or flows that need flexibility — inline in a sentence, a heading, a third-party UI — where Facet is too heavy and Soft too tight.

Square icon

When only a square is available, the full wordmark is unreadable at small sizes. The icon is a tb monogram — the two initials overlapping in the Facet style — in white on a primary-blue tile, with both accent facets in their on-dark tones.

iOS app icon — the OS rounds the corners

Android maskable — content fits the 80% circle

theboys

Favicon in a browser tab

The tile is part of the image — do not add another background or round corners yourself beyond what the OS does.

Module mark: first two letters of the module name, same Facet grammar — `ia` for Identity administration

Quản trị định danh

On the module sidebar: 32px tile + module name

Clear space

Keep a margin equal to the height of the o (x) on all four sides. No text, rule or image may enter it.

Minimum size

Below these sizes the halo gaps and facets disappear — switch to the square icon or the Soft wordmark.

Web — 20px tall

Mobile — 16px tall

Print — 6mm tall

On backgrounds

Four permitted backgrounds: white, cream, primary blue, ink. On dark backgrounds the ink turns white and both facets use their on-dark tones to keep contrast.

One colour

When only one colour can be printed (engraving, embossing, fax, stamps): both facets take the ink colour. The halo gaps stay.

Misuse

What is not allowed. Each tile is the real wordmark with exactly one thing done wrong.

Stretching or distorting the proportions

Rotating or tilting

Recolouring outside the palette

Adding shadows or effects

Fading or lowering opacity

Dark background without the on-dark tones — facets sink

Colours

Three brand colours and two backgrounds. Each swatch: left half is the light theme value, right half the dark theme. Hex values are for use outside the app (print, slides); inside the app always use tokens.

Ink — foregroundlight #1d1d1fdark #ffffff
Accent — primarylight #004e9fdark #57bfff
Warm — brand-warmlight #6f6653dark #a99c80
Canvas — backgroundlight #ffffffdark #000000
Cream — secondarylight #f3efe6dark #242017

Typeface

Inter for everything — interface, print, slides. Three weights are enough: 400 body, 600 headings, 900 for the Soft wordmark. No other typeface next to the logo.

Inter — Aa Bb Cc 0123

Identity management for small teams, compact and clear.

Applications

Two places the logo appears outside the interface: the image shown when a link is pasted (Open Graph) and the email signature.

Link share image theboys.png — 1200×630

Alex Nguyen

System administrator · theboys

Email signature — wordmark 20px tall, under the name

Alongside the App Store and Google Play

When theboys sits next to app download badges, the badges belong to Apple and Google — use their official files as-is: never redraw, translate or recolour them. The wordmark leads; badges take the subordinate spot.

Minimum height 40px on screen (Apple 40px · Google 28px — take the larger); 10mm in print.
Clear space around each badge equals ¼ of its height; no text or graphics inside it.
App Store badge comes first; the Google Play badge is the same size or larger than the others. Together, App Store uses the black badge.
Badges follow the viewer's language (vi · en) from the official files; the words App Store and Google Play are never translated.

App Store badge guidelines (Apple)Google Play badge guidelines (Google)

Downloads

Source files for use outside the app. SVG for print and slides, PNG where SVG is not accepted.

wordmark.svgwordmark on light
wordmark-on-dark.svgwordmark on dark
icon.svgsquare icon (vector)
icon-192.pngsquare icon 192px
theboys.pnglink share image 1200×630

How to use it

Four rules cover nearly every case.

Keep the proportions and leave clear space around the logo.
Take colours from tokens and let the logo follow light or dark backgrounds on its own.
Do not recolour, tilt, stretch or add shadows to the wordmark.
Do not place a mascot, symbol or illustration next to the logo.