Brand book v1.1 · 01.11.2026

Bangkok flows here.

NAAM is the river taxi app for the Chao Phraya. This book holds everything needed to make NAAM look and sound like itself: on a phone, on a pier sign, on a captain's jacket.

Story and naming

NAAM means water, and water is how Bangkok moves

In Thai, น้ำ (naam) is water. The Chao Phraya is the oldest road in the city: temples, markets and towers all face it. NAAM puts that road in your pocket with a fixed price before you board.

Say it like the Thai word: one syllable, a long "aa", falling tone. Write it in capitals in the logo and as "NAAM" in running text.

น้ำ

Personality

  • Young
  • Warm
  • Confident
  • A little cheeky
  • Proud of Bangkok

We show the city locals love at golden hour. We skip the postcard clichés: no stock elephants, no tuk-tuk props, no "exotic" anything.

Colour

Temple gold on deep river teal, lotus only for actions

Six named colours carry the brand. Each name is a role, so the web app swaps values in dark mode and keeps the meaning.

River
token
--naam-river
role
brand primary, links, headers
light
#0E5E6F · rgb 14, 94, 111
dark
#4FC1C6 · rgb 79, 193, 198
Ink
token
--naam-ink
role
main text
light
#0A1F2B · rgb 10, 31, 43
dark
#EAF6F4 · rgb 234, 246, 244
Gold
token
--naam-gold
role
sun, highlights, rating
light
#F5A623 · rgb 245, 166, 35
dark
#F7B547 · rgb 247, 181, 71
Lotus
token
--naam-lotus
role
actions only
light
#DC2157 · rgb 220, 33, 87
dark
#FF5C7A · rgb 255, 92, 122
Foam
token
--naam-foam
role
page background
light
#F3FAF9 · rgb 243, 250, 249
dark
#06171E · rgb 6, 23, 30
Mist
token
--naam-mist
role
quiet surfaces, chips
light
#D9EEEC · rgb 217, 238, 236
dark
#0F2C36 · rgb 15, 44, 54

Text pairs we recommend, light mode

WCAG 2.x contrast ratio. AA asks 4.5 for body text, 3 for text from 24 px or bold from 18.7 px.

PairTextBackgroundRatioAA body
Body text--naam-ink #0A1F2B--naam-foam #F3FAF915.96pass
Secondary text--naam-text-muted #4A6470--naam-foam #F3FAF95.93pass
Links, headers--naam-river #0E5E6F--naam-foam #F3FAF96.97pass
Gold-family text--naam-gold-text #9A5B00--naam-foam #F3FAF95.13pass
Success--naam-success #1E7D4F--naam-foam #F3FAF94.84pass
Error--naam-danger #B42318--naam-foam #F3FAF96.22pass
Text on cards--naam-ink #0A1F2B--naam-surface #FFFFFF16.88pass
Text on chips--naam-ink #0A1F2B--naam-mist #D9EEEC13.98pass
Muted on chips--naam-text-muted #4A6470--naam-mist #D9EEEC5.19pass
Links on mist--naam-river #0E5E6F--naam-mist #D9EEEC6.10pass
River button--naam-on-river #FFFFFF--naam-river #0E5E6F7.37pass
Lotus button--naam-on-lotus #FFFFFF--naam-lotus #DC21574.77pass
Gold button--naam-on-gold #0A1F2B--naam-gold #F5A6238.33pass
Reverse text--naam-foam #F3FAF9--naam-ink #0A1F2B15.96pass

Text pairs, dark mode

PairTextBackgroundRatioAA body
Body text--naam-ink #EAF6F4--naam-foam #06171E16.52pass
Secondary text--naam-text-muted #9DB8BF--naam-foam #06171E8.74pass
Links, headers--naam-river #4FC1C6--naam-foam #06171E8.51pass
Gold text--naam-gold #F7B547--naam-foam #06171E10.14pass
Success--naam-success #5FD39A--naam-foam #06171E9.81pass
Error--naam-danger #FF8A7A--naam-foam #06171E7.98pass
Text on cards--naam-ink #EAF6F4--naam-surface #0B222B14.86pass
Text on chips--naam-ink #EAF6F4--naam-mist #0F2C3613.24pass
Links on mist--naam-river #4FC1C6--naam-mist #0F2C366.82pass
River button--naam-on-river #06171E--naam-river #4FC1C68.51pass
Lotus button--naam-on-lotus #06171E--naam-lotus #FF5C7A6.15pass
Gold button--naam-on-gold #06171E--naam-gold #F7B54710.14pass

Sunset mode: gold fills, text unchanged

After 17:30 Bangkok time the app may warm up. Only two things change: the map gets --naam-sunset-tint, and fills (pier dots, the active tab pill, the sun button) use --naam-sunset-fill. Text keeps its colours: ink, river or --naam-gold-text #9A5B00 on foam. Gold is never text on a light background.

Sunset tint
token
--naam-sunset-tint
light
#F4E5C4 · gold 25 % over foam
dark
#2A2F24 · gold 15 % over night
Sunset fill
token
--naam-sunset-fill
light
#F5A623 · fills only
dark
#F7B547 · fills only
PairTextBackgroundRatioAA body
Light: map label on tint--naam-ink #0A1F2B--naam-sunset-tint #F4E5C413.55pass
Light: link on tint--naam-river #0E5E6F--naam-sunset-tint #F4E5C45.91pass
Light: muted on tint--naam-text-muted #4A6470--naam-sunset-tint #F4E5C45.03pass
Light: text on gold fill--naam-on-gold #0A1F2B--naam-sunset-fill #F5A6238.33pass
Light: gold-family text--naam-gold-text #9A5B00--naam-foam #F3FAF95.13pass
Dark: label on tint--naam-ink #EAF6F4--naam-sunset-tint #2A2F2412.41pass
Dark: link on tint--naam-river #4FC1C6--naam-sunset-tint #2A2F246.39pass
Dark: gold text on tint--naam-gold #F7B547--naam-sunset-tint #2A2F247.62pass
Dark: text on gold fill--naam-on-gold #06171E--naam-sunset-fill #F7B54710.14pass

Not allowed in Sunset mode: gold text on the tint or on foam (1.92), and --naam-gold-text on the tint (4.35, below AA).

Gold is never text on a light background (1.9 on foam). For gold-family text on light, use --naam-gold-text #9A5B00. The spec draft lotus #FF4F6D gave white text 3.19, so lotus moved to #DC2157 (4.77) and #FF4F6D stays as --naam-lotus-bright for the boat dot and glows.

Typography

Sora speaks, Inter explains, Noto Sans Thai keeps the tone marks

Display · Sora 700

Aa Bb 0123

Headlines, prices, pier names. Tight leading 1.1.

Body · Inter 400 / 600

Aa Bb 0123

Everything you read. Leading 1.55.

Thai · Noto Sans Thai 400 / 600

กขค น้ำ ๑๒๓

Thai copy. Leading 1.75 for stacked marks.

Scale, ratio 1.25 from 16 px

hero 39-76
Ride the river
4xl 49
Boat in 3 min
3xl 39
Tha Tien to ICONSIAM
2xl 31
฿480, fixed
xl 25
Your captain is on the way
lg 20
Pick two piers and see three prices before you book.
md 16
Life jackets are on every boat. Ask your captain any time.
sm 14
Pier coordinates are approximate.

Four languages, one voice

EN · Sora + Inter

Bangkok flows here.

Your boat arrives in 3 minutes.

TH · Noto Sans Thai

เรียกเรือได้ในไม่กี่แตะ

เรือของคุณจะมาถึงใน 3 นาที

ZH · system CJK, PingFang SC / Noto Sans SC

曼谷，在此流动。

您的船将在 3 分钟后到达。

RU · Sora + Inter (Cyrillic)

Бангкок течет здесь.

Лодка будет у причала через 3 минуты.

Fonts load from Google Fonts with full fallbacks to system-ui, so every page reads offline. Code, pier codes and hex values use JetBrains Mono, fallback ui-monospace.

Iconography

Icons are drawn with the same round stroke as the wordmark

  • 24 px grid, 2 px live area padding.
  • 2 px stroke, round caps, round joins, no fills.
  • One colour, currentColor: river on light, ink on gold.
  • Water is a wave, never a droplet emoji. Boats are side views.
  • One mode set everywhere: Shared is people, Private is the long-tail, Luxe is the speedboat.
  • Touch targets stay 48 px even when the icon is 24 px.
Shared · people
Private · long-tail
Luxe · speedboat
pier
eta
promptpay
safety
sos
rating
language
earnings

Imagery

Shoot the river at eye level, at golden hour, with real people

The frames below are colour studies, not photos: they show light, horizon and crop for the shoot brief.

Low sun on the water, horizon in the lower third

Warm gold light, teal shadows, 17:30 to 18:30.

A face in warm light, the river behind

Locals and visitors mid-moment: laughing, pointing, stepping aboard.

City lights on the water after dark

Night rides: reflections, towers, the lit bridge spans.

We show
  • Captains at the helm, proud and named
  • Piers, wakes, ropes, real boats
  • Natural skin tones, unfiltered faces
We skip
  • Elephants, tuk-tuk props, costume shoots
  • Stock models posing with maps
  • Heavy filters and fake sunsets

UI components

Components are built from tokens, so dark mode comes free

Switch your system to dark mode: every element below follows. Sample quote: Tha Tien to ICONSIAM, 4.17 km, 1 passenger, day, clear, prices from the SPEC formulas.

Buttons

Pier chips

N8Tha Tien ท่าเตียน ICSICONSIAM ไอคอนสยาม WARWat Arun วัดอรุณ

Ride status

  1. Requested18:02 · we are finding your boat
  2. Captain accepted18:02 · Captain Niran, boat Golden Wave
  3. Boat arrivingAbout 3 min to Tha Tien
  4. On boardLife jacket on, enjoy the ride
  5. ArrivedICONSIAM pier

Quote card

N8Tha TienICSICONSIAM
SharedSeat on a shuttle · 21 min฿25per seat
PrivateLong-tail, up to 8 · 14 min฿480whole boat
LuxeSpeedboat, up to 6 · 9 min฿1,410water, towels

Fixed price. PromptPay, card or cash.

Voice and tone

We talk like a friend who knows the river

Short, warm, a little cheeky. Say what happens next and when. Thai copy uses everyday polite speech, never office Thai.

Do
  • Your boat is 3 minutes away. Wave hello to Captain Niran.
  • Fixed price: ฿480. No haggling, no surprises.
  • Storm on the river, so Luxe rests today. Private is ready.
  • Luxe from ฿1,200. Cold water and towels on board.Prices: ฿ first, comma for thousands, no decimals.
  • เรือของคุณอีก 3 นาทีถึง โบกมือทักกัปตันได้เลยYour boat is 3 minutes away. Go ahead and wave to the captain.
  • ราคาคงที่ ฿480 ไม่ต้องต่อรองFixed price ฿480, no bargaining needed.
Don't
  • Experience the magical exotic Orient on a timeless journey!Postcard kitsch. Locals ride NAAM too.
  • Error 409: bad_transition.Machine talk. Say what to do next.
  • Luxe is unavailable due to adverse weather conditions.Cold. Offer the ride that works.
  • Price: 1490 THBWrite prices as ฿1,490: baht sign first, comma for thousands, no decimals.
  • ท่านจะได้รับบริการภายในระยะเวลาที่กำหนด"You will receive service within the specified period." Office Thai, too stiff.
  • ล่องเรือสุดเอ็กโซติกแห่งสยามเมืองยิ้ม"Exotic cruise of the Land of Smiles." Tourist brochure.

Thai lines are a design draft and go to a native copywriter before release.

App store

Each screenshot sells one promise in five words or less

Know the price first.

Watch your boat arrive.

Pay with one scan.

Export at 1290 x 2796 for iOS 6.9 inch and 1080 x 1920 for Google Play. Headline in Sora 700, max two lines, on ink, river or gold. Localise headlines for TH, ZH, RU.

Print

On paper NAAM prints dark on white, with gold and lotus as small accents

This page prints itself: the dark cover turns white, menus hide, cards never split across sheets. Below is the print sheet for signage and flyers.

Full colour on white stock. Below 25 mm wide, use logo-mono.svg.

ColourCMYK, naive
River87 15 0 56
Ink77 28 0 83
Gold0 32 86 4
Lotus0 85 60 14

Rules for print

  • Minimum body text 9 pt, signage 24 pt and up.
  • Pier signs: pier code in JetBrains Mono, name in Sora, Thai below in Noto Sans Thai.
  • CMYK values are a naive conversion. Proof against a printed swatch before any run.