Design
System
Every colour, typeface, weight, role, logo lockup and layout rule in SOT Visual Guidelines V2.1, extracted into design tokens and rendered as a live system you can read, test and copy from.
The documentation chrome is deliberately quiet — white ground, black type, hairline rules — because that is exactly how the brand book sets its own pages. The colour belongs to the specimens.
What is brand law, and what isn’t
Every token records where it came from, so you never have to guess whether a value is a rule or a convenience.
Guideline Stated in the brand book, with the page cited. Non-negotiable.
Measured Computed from the brand book’s own vector artwork. Reproducible.
Observed Repeated consistently across the examples, though never written down.
Derived Not in the brand book. Added to make the system implementable — change freely.
Consume the tokens
| File | Use |
|---|---|
| tokens/sot.tokens.json | W3C Design Tokens (DTCG) — feed Style Dictionary, Figma Tokens, Tokens Studio |
| tokens/sot-tokens.css | Custom properties, type-role classes, and the six [data-sot-pair] themes |
| tokens/sot-tokens.scss | SCSS variables plus a $sot-pairs map |
| tokens/sot-tokens.js | window.SOT_TOKENS — the flat list this page is built from |
| build/build-tokens.py | The single source of truth. Edit here, re-run, all four regenerate |
Key
Colours
Eight colours: black, white, and the six pure RGB primaries and secondaries at
full saturation. There are no tints, no shades and no gradients anywhere in the
system — a colour is either at ff or at 00.
CMYK and Pantone equivalents are given for print, where these values cannot be hit and must be approximated.
Click any swatch to copy its hex.
The eight key colours
Guideline p16, p442026 campaign palette
Guideline p45“For the 2026 campaign, these three colours should be used from the main brand in order to introduce SOT in the first phase.”
Duotone pairings
Guideline p60One campaign colour as ground, another as ink. All six ordered pairs are in use. Never introduce a third colour inside one artwork.
These pairings are chosen for optical vibration, not for legibility. Contrast ratios are shown on each pairing — most fall far below WCAG minimums, so they are valid for display type and colour fields only. Body copy uses black on white or white on black.
Three
Families
LINE Seed Sans TH carries the whole system across both scripts. Two display faces are optional headline voices — one per script — used for the key visuals only.
Only LINE Seed Sans TH is redistributable. The live check below tells you whether each face is actually resolving on this machine, or whether you are looking at a fallback.
Families & licensing
Guideline p20–p22Named roles
Guideline p20, p21Family and weight are fixed by the brand book. Size, leading and tracking are derived.
Type scale
DerivedThe brand book fixes no numeric scale. This one is reconstructed from the proportions the key visuals use.
| Token | Specimen | Size | Use |
|---|
Tracking signatures
Observed p47–p60Two habits define the voice: display type set tight, and the event line tracked until it spans the artwork edge to edge.
Thai needs its own leading
Derived — measuredThe one place a single token cannot serve both scripts.
Latin caps carry all their ink below the cap line, so the display roles can be
set at 0.82 and still fit. Thai stacks a vowel and a tone
mark above the consonant, so its ink rises much higher — and clipping a tone
mark does not just look wrong, it changes what the word says.
| Specimen | Ink height | Latin token | Verdict |
|---|---|---|---|
| SOT | 0.739em | display 0.82 | Fits |
| ซาวด์ | 0.990em | display 0.82 | Clips the ทัณฑฆาต |
| ซาวด์ออฟไทยแลนด์ | 1.015em | display 0.82 | Clips |
| เพื่อคนดนตรี | 1.220em | display 0.82 | Clips — vowel + tone mark stack (p59) |
So the system carries two: --sot-leading-display at
0.82 for Latin, and --sot-leading-display-th at
1.30 for Thai — clearing the tallest stack in the campaign copy with
headroom. Same split at headline weight:
--sot-leading-tight 0.95 versus
--sot-leading-tight-th 1.20.
Lockups
Four lockups plus a simplified small-use mark. All five are true vectors
extracted from the brand book itself, drawn with currentColor so
they inherit whichever key colour they sit in.
The logo may be placed on any key colour without changing its colour or any of its components.
The lockups
Guideline p5, p8, p11, p13Grounds follow the duotone pairing selected in the sidebar.
Clearspace, minimum size, backgrounds, misuse
Guideline p6–p15, p48The logo has enough rules of its own to warrant its own page — the T-stem clearspace ratio, the 100 px / 35 mm floor and the small-use switch, the eight approved grounds, six ways to get it wrong, and the downloadable asset pack.
Modular
System
Four slots, top to bottom, in a fixed order. “The position of each element should not be changed in order to maintain consistency.”
One slot flexes. “The main key visual is stretched to fill the space. The other contents should not be stretched.” The logo is never stretched and always sits below the key visual.
The poster on the right is live. It is composed entirely from the tokens on this page — change the aspect ratio and watch the display type refit and stretch exactly as the rule describes.
Slot order
Guideline p48, p59The brand book’s own diagram, p48.
Four fixed slots. The order is the contract — an artwork that reorders them, or that lets the logo grow with the key visual, is off-system no matter how correct its colour and type are.
| Slot | Stretch | Rule |
|---|---|---|
| Event information | No | Top of every artwork |
| Key visual | Yes | Stretched to fill the space |
| Logo | No | Always below the key visual |
| Award year | No | Justified across the foot |
Live key visual
Composed from tokensGrounds follow the sidebar pairing.
Display type is refitted to the artwork width on every change, then scaled vertically to fill the slot. The logo and the event lines keep their proportions throughout.
Halftone
Duotone
Photography is never used at full fidelity. It is reduced to a coarse halftone screen and flooded with one duotone pairing, so the image reads as part of the type layer rather than behind it.
The supporting “Coming Soon” teasers add the artist name set on an arc around the subject, with the logo and the award year in the corners.
All imagery is for placement and inspirational purposes only. Reproduce this notice wherever placeholder imagery appears.
Treatment
Observed p23–p42, p61–p63Dot pitch and flood opacity are derived; the 45° screen angle and the duotone flood are observed.
Halftone · 4px cell · 45°Abstract stand-in, not photography — the guideline’s own examples are placement-only.
Coarse · 7px cellUsed at large format, where the dot becomes a visible texture in its own right.
Fine · 2px cellFor small digital surfaces, where a coarse dot would swamp the image.
Interface
The brand book defines no interface components. Everything in this section is derived — a minimal, honest reading of the identity into the parts a ticketing or nominations site would actually need.
Two constraints carry over as law: no corner is ever rounded, and colour arrives as a flat field rather than a decoration.
Controls
Derived — not in the brand bookSquare corners, 2px rules, heavy tracked caps. Hover moves the fill to RGB Blue — the one colour the guideline itself uses for interactive text.
Nominee card
DerivedDisplay type in the duotone field, metadata on white below — the poster logic applied at component scale.
Waruntorn
Ohm
Satur
Artist names are taken from the guideline’s own placement-only examples on p61–p63.
Every
Token
The complete set, resolved. Click any custom-property name to copy it. Filter by provenance to separate what the brand book actually says from what has been added to make it build.
| Custom property | Value | Type | Provenance | Page | Notes |
|---|
Source
This system is a derivative reading of a client brand book. Where it and the PDF disagree, the PDF wins.
Provenance
- Source
- SOT Guidelines V2.1 — 15 Jun 2026 (71 pages)
- Brand
- SOT — Sound Of Thailand Music Awards
งานประกาศรางวัล โสต ซาวด์ออฟไทยแลนด์ - Studio
- Pink Blue Black & Orange Co.,Ltd.
- Contact
- 023005124 · [email protected]
- Event
- One Bangkok Forum · 24 June 2026
- Logo assets
- Extracted as true vectors from pages 5, 8, 11 and 13 — not redrawn
Fonts & limits
- LINE Seed Sans TH
- SIL Open Font License 1.1, LY Corp. Redistributable. The guideline highly recommends including attribution in commercial products.
- Tungsten Condensed
- Commercial licence required. Not embedded here — the fallback stack degrades to a condensed grotesque.
- Rahong
- Licensed under PBB&O, by Jipatype. Not embedded here.
- Imagery
- No photography from the guideline is reproduced. The halftone specimens are abstract stand-ins.
- Regenerate
python3 build/build-tokens.py