DESIGN.md@design-systems/library/12go · alpha · 2026-10-25 · sha256 f75f8659b501b174
DESIGN.md@design-systems/library/12go alphaA
Immutable. This exact content never changes and is served at /api/v1/blob/f75f8659b501b174.
---
version: alpha
name: 12Go
category: "Thai Brands"
description: "12Go (12go.asia) travel-booking site measured in system-ui sans: 24px/700 white hero line, 22px/700 section heads, 16px/400 body, a #4db84d green Find Tickets button with 4px radius and 52px height on a #f4f4f4 canvas with white cards."
colors:
canvas: "#f4f4f4"
page-largest: "#ffffff"
ink: "#4b4b4b"
primary: "#4db84d"
on-primary: "#edf8ed"
primary-hover: "#3a8a3a"
surface-footer: "#404040"
ink-muted-footer: "#a0a0a0"
hairline: "#eaeaea"
badge-danger: "#b84d4d"
attention: "#ff9900"
highlight: "#0da1e0"
promotion: "#be4cbe"
typography:
display:
fontFamily: system, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
fontSize: 24px
fontWeight: 700
lineHeight: 33.6px
heading:
fontFamily: system, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
fontSize: 22px
fontWeight: 700
lineHeight: 30.8px
body-base:
fontFamily: system, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
fontSize: 16px
fontWeight: 400
lineHeight: 22.8571px
body:
fontFamily: system, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
fontSize: 12px
fontWeight: 400
lineHeight: 17.1429px
button:
fontFamily: system, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
fontSize: 14px
fontWeight: 400
lineHeight: 18.6667px
nav:
fontFamily: system, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
fontSize: 16px
fontWeight: 400
lineHeight: 0px
rounded:
xs: 4px
sm: 6px
md: 10px
pill: 9999px
spacing:
s1: 4px
s2: 8px
s3: 12px
s4: 14px
s5: 15px
s6: 16px
s7: 20px
s8: 32px
s9: 52px
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
typography: "{typography.button}"
rounded: "{rounded.xs}"
padding: 14px 8px
height: 52px
button-primary-hover:
backgroundColor: "{colors.primary-hover}"
link:
textColor: "{colors.primary}"
typography: "{typography.nav}"
nav:
textColor: "{colors.page-largest}"
nav-link:
textColor: "{colors.primary}"
typography: "{typography.nav}"
card:
textColor: "{colors.page-largest}"
rounded: "{rounded.xs}"
boxShadow: rgba(0, 0, 0, 0.04) 0px 5px 8px 0px, rgba(75, 75, 75, 0.08) 0px 3px 6px 0px
footer:
backgroundColor: "{colors.surface-footer}"
textColor: "{colors.ink-muted-footer}"
---
## Overview
12Go is a multi-modal transport booking platform. Its own About page describes it as selling tickets for trains, buses, ferries, vans, taxis, flights, rail passes and tours, with its deepest coverage in Southeast Asia, founded in Singapore in 2012 and incorporated as 12Go Asia Pte., Ltd. The measured English home page (12go.asia/en, 1280px wide, 1,775 visible elements, 9,877px tall) is a long, dense, utilitarian marketplace page rather than an editorial brand page.
The capture shows a photographic header with a dark-to-transparent gradient. Over it sit the logo, a modal nav (Trains, Buses, Flights, Ferries), Support, language and currency (English, THB), the white bold line "Trains, Buses, Ferries, Transfers, Flights – Across Asia & Beyond", and a single-row search form with a green "Find Tickets" button. Below the header the page becomes a pale grey canvas with white route cards that carry large destination photographs, a "Get our free app" banner (the page states 2M+ downloads and a 4.7 rating, with no source), rail-pass cards with red "New" badges, a travel-guide photo grid, and long white panels of plain-text route links grouped by country ("Popular Routes in Thailand", "Popular Routes in Malaysia"). The footer is dark grey.
The voice is functional: place names, prices ("From THB 1,725") and verbs ("Find Tickets"). Green is the only strong interface colour; photography supplies the rest of the colour.
## Colors
All values below were measured on the live page or read from its root CSS custom properties.
- **Canvas `#f4f4f4`**: body background (`--body-bg`, also `--brand-gray-lighter`).
- **Cards and panels `#ffffff`** (`page-largest`): the largest-area background (6,632 area weight against 2,242 for the footer grey).
- **Ink `#4b4b4b`** (`--brand-black`): the most-read text colour (9,774 characters).
- **Primary `#4db84d`** (`--brand-primary`): the Find Tickets fill, the section sub-headings such as "Popular Routes in Thailand", and nav accents.
- **On-primary `#edf8ed`** (`--brand-primary-faded`): the button label.
- **Primary hover `#3a8a3a`** (`--brand-primary-darker`): recorded in the hover measurement.
- **Footer surface `#404040`** (`--brand-black-darker`) with footer text `#a0a0a0` (`--brand-gray-darker`).
- **Hairline `#eaeaea`** (`--brand-gray`): the measured border colour.
- **Badge red `#b84d4d`** (`--brand-danger`): appears as a measured background (area weight 4) and matches the "New" badges in the capture.
- **Status accents from the root variables:** attention `#ff9900`, highlight `#0da1e0`, promotion `#be4cbe`. These are declared in the site's variables; their on-screen use on the home page was not tied to elements.
The root also declares darker, lighter and faded steps for primary, info, warning, danger, attention, promotion and urgent colours (for example `--brand-primary-lighter #9dce9d`, `--brand-navy #1c2b39`, `--brand-purple #8c52ff`). They are not tokenised here because the measured page does not show them.
## Typography
12Go uses the operating-system UI font, not a webfont: the declared stack is `system, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif` and no font files were loaded (the loaded-font list is empty). All 13,128 measured characters belong to that family.
- **Display 24px / 700 / 33.6px line height**: the h1 over the header photograph, in white.
- **Heading 22px / 700 / 30.8px**: h2 "Where to Go" in `#4b4b4b`, and h3 "Popular Routes in Thailand" in `#4db84d`.
- **Body 16px / 400 / 22.8571px**: the dominant size (9,758 characters), used for card text, nav and route links.
- **Small 14px (2,430 characters)** for the button and footer text, and **12px / 400 / 17.1429px** for fine print such as "Scan to download the app".
- Other measured sizes: 20px (56 characters) and 36px (16 characters). Weights seen: 400, 700, 500 and 800.
Letter-spacing was not recorded. Because the family is the platform font, rendered letterforms differ between operating systems; no substitute is needed.
## Layout
The page is a one-column flow of full-width bands. The h1 and h2 elements measure 1,140px wide inside the 1,280px viewport, giving a centred container with a 70px margin on each side. Route cards sit four across on the first band (273px wide, 337px tall in the extraction), rail-pass cards three across, travel-guide tiles in two rows of four, and the route-link panels in four text columns. The header search bar is a single row of fields ending in the button; the header height variable is `--header-height: 52px`.
Spacing is built on small steps: gaps of 8px (40 uses), 4px (16), 16px (4), 32px (2) and 12px (2); paddings of 12px (76 uses), 8px, 15px, 16px and 4px. Those are the spacing tokens s1 to s9 (4, 8, 12, 14, 15, 16, 20, 32, 52). The page is dense: long lists of route text sit between photographic bands, and the 9,877px scroll height is the result of that stacking of lists.
## Elevation & Depth
Depth is shallow and soft. Cards use `rgba(0, 0, 0, 0.04) 0px 5px 8px 0px, rgba(75, 75, 75, 0.08) 0px 3px 6px 0px` (14 uses; the root variable `--box-shadow-base` is `0px 5px 8px rgba(0, 0, 0, 0.04)`). A heavier variant, `--box-shadow-2`, adds `0px 1px 3px rgba(75, 75, 75, 0.2)` and `0px 3px 6px 0px rgba(75, 75, 75, 0.2)` and is used once on the page. The nav sits over the photo with a `linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%)` scrim (`--header-background-alpha`) so that white text stays readable. That scrim is a legibility device, not a brand colour. White panels on `#f4f4f4` are the main separation device.
## Shapes
Radii are small and square-leaning. `4px` is the base (`--border-radius-base: 4px`; 40 measured uses) for buttons and cards, with `4px 4px 0px 0px` on card tops (14 uses) and `0px 0px 4px 4px` on card bottoms (7). `6px` appears 8 times, `10px` once, and `50%` once for a circular element. Photographs fill the top of cards with only the upper corners rounded. The primary button is 52px high and 96px wide on desktop, with `14px 8px` padding.
## Components
- **Primary button "Find Tickets"**: fill `#4db84d`, label `#edf8ed`, 14px / 400, 4px radius, 52px height, hover fill `#3a8a3a`.
- **Header and nav**: text in white over the photo; the nav links Trains, Buses, Flights, Ferries, then Support, English and a currency selector; the logo is in green and white (`#4db84d`, `#ffffff` child colours).
- **Route card**: a white card with a photograph, the country label in white on the image, a bold route line (Bangkok → Pattaya) and "From THB" price in `#4b4b4b`; 4px radius and the soft shadow above.
- **Badge**: small red "New" label with a `#b84d4d` fill on rail-pass photographs.
- **Route-link panel**: white panel, a green 22px h3 with a green underline rule, and four columns of 16px links.
- **App banner**: photographic band with a QR code, store badges and a centred headline.
- **Footer**: `#404040` background, `#a0a0a0` text, 14px; it lists About us, Terms of Use, Privacy Policy, Support, Offices, Careers and partner links.
## Design System Architecture
No public design system or brand-guidelines page was found: the About page (https://12go.asia/en/about) and the footer of https://12go.asia/en do not link to one. The de-facto system is the site's CSS custom properties: 203 root variables, among them `--brand-primary #4DB84D`, `--brand-black #4b4b4b`, `--brand-gray #eaeaea`, `--body-bg #f4f4f4`, `--font-family-base`, `--border-radius-base 4px`, button variables (`--btn-primary-color`, `--btn-primary-bg-darker`), alert and state variables, and Font Awesome 6 font variables. Colour families follow a consistent naming ladder: `-black`, `-darker`, base, `-lighter`, `-faded` for each of primary, info, warning, danger, attention, promotion and urgent. Spacing and radius appear as raw values rather than as named variables.
## Do's and Don'ts
- Do use `#4db84d` for the single main action and for section sub-headings, with `#edf8ed` text on the button.
- Do keep the canvas `#f4f4f4` with white `#ffffff` cards.
- Do use the system font stack at 16px / 400 for body and 700 for headings.
- Do keep corners at 4px and shadows soft (`0px 5px 8px` at 4% black).
- Do let photography carry colour, with prices in plain `#4b4b4b`.
- Don't add a second hue to the main action; red, orange, blue and purple are status colours.
- Don't use the header gradient scrim as a brand colour.
- Don't use heavy shadows; one heavier variant exists and is used once.
## Responsive Behavior
The mobile pass (390px viewport width) measured: the h1 stays 24px / 700 and the h2 22px / 700; the primary button is 14px / 400 with `14px 8px` padding, 358px wide and 49px high; the nav bar is 390px wide and 40px high (against 57px on desktop). Character-weighted sizes on mobile are 16px, 14px, 22px, 12px, 24px and 20px, so the type scale is unchanged. The h1 box is 374px wide and 67px high on mobile (34px on desktop), which shows the headline wraps onto two lines. The column structure of cards at 390px was not measured.
## Iteration Guide
1. Start with canvas `#f4f4f4`, white panels, ink `#4b4b4b`.
2. Set one green `#4db84d` button, 52px high, 4px radius, with hover `#3a8a3a`.
3. Use the system font stack; 24px / 700 hero, 22px / 700 headings, 16px / 400 body.
4. Add status colours only for status: `#b84d4d` badges, `#ff9900` attention.
5. Check spacing against the 4, 8, 12, 16, 32 steps.
6. Run `node web/scripts/verify-designs.mjs --slug=12go` after each edit.