DESIGN.md@design-systems/library/1moby · alpha · 2026-10-25 · sha256 a45fb1d89a7ecef8
DESIGN.md@design-systems/library/1moby alphaA
Immutable. This exact content never changes and is served at /api/v1/blob/a45fb1d89a7ecef8.
---
version: alpha
name: 1Moby
category: "Thai Brands"
description: "1Moby (วันม๊อบบี้), Bangkok digital solutions company: MeroThai 700 headlines at 60px/48px on a #171717 canvas fading into cobalt #006bff, white pill CTAs with black label and a 4px trailing circle, 20px rounded cards and 14px #5e5e5e body copy."
colors:
canvas: "#171717"
page-largest: "#ffffff"
ink: "#ffffff"
ink-secondary: "#5e5e5e"
primary: "#006bff"
button-fill: "#ffffff"
on-primary: "#000000"
primary-hover: "#f5f5f5"
surface-tint: "#e6f0ff"
ink-link-footer: "#91bfff"
ink-muted: "#717279"
hairline: "#e6e6e6"
accent-orange: "#fc4c02"
accent-amber: "#ffa400"
typography:
display:
fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif
fontSize: 60px
fontWeight: 700
lineHeight: 84px
display-mobile:
fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif
fontSize: 40px
fontWeight: 700
lineHeight: 56px
heading:
fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif
fontSize: 48px
fontWeight: 700
lineHeight: 67.2px
subheading:
fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif
fontSize: 24px
fontWeight: 700
lineHeight: 38.4px
body:
fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif
fontSize: 14px
fontWeight: 400
lineHeight: 22.4px
body-mobile:
fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif
fontSize: 16px
fontWeight: 400
lineHeight: 25.6px
button:
fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif
fontSize: 18px
fontWeight: 700
lineHeight: 28.8px
button-secondary:
fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif
fontSize: 14px
fontWeight: 700
lineHeight: 22.4px
nav:
fontFamily: Geometrica, "Geometrica Fallback", "Helvetica Neue", Arial, sans-serif, MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif
fontSize: 16px
fontWeight: 400
lineHeight: 24px
link:
fontFamily: MeroThai, "MeroThai Fallback", "Leelawadee UI", Tahoma, sans-serif, sans-serif
fontSize: 12px
fontWeight: 700
lineHeight: 19.2px
rounded:
xs: 6px
sm: 12px
md: 16px
lg: 20px
xl: 32px
pill: 9999px
spacing:
s1: 4px
s2: 4.8px
s3: 6px
s4: 8px
s5: 10px
s6: 12px
s7: 14px
s8: 16px
s9: 18px
s10: 20px
components:
button-primary:
backgroundColor: "{colors.button-fill}"
textColor: "{colors.on-primary}"
typography: "{typography.button}"
rounded: "{rounded.pill}"
padding: 0px 4px 0px 28px
height: 60px
boxShadow: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px"
button-primary-hover:
backgroundColor: "{colors.primary-hover}"
button-secondary:
backgroundColor: "{colors.on-primary}"
textColor: "{colors.button-fill}"
typography: "{typography.button-secondary}"
rounded: "{rounded.pill}"
padding: 0px 4px 0px 18px
height: 40px
link:
textColor: "{colors.on-primary}"
typography: "{typography.link}"
rounded: "{rounded.pill}"
padding: 0px 12px
borderColor: "{colors.hairline}"
nav:
textColor: "{colors.on-primary}"
padding: 12px 60px 0px
nav-link:
textColor: "{colors.primary}"
typography: "{typography.nav}"
card:
backgroundColor: "{colors.primary}"
textColor: "{colors.button-fill}"
rounded: "{rounded.lg}"
padding: 24px
footer:
textColor: "{colors.ink-link-footer}"
---
## Overview
1Moby (บริษัท วันม๊อบบี้ จำกัด) is a Thai digital solutions company. Its home page, in Thai, is titled "1Moby | ตัวจริงด้าน Digital Solutions ของไทย" and headlines "ผู้นำด้าน Digital Solution และ AI-Driven Business". The page lists a Bangkok address (The Nine Tower Grand Rama 9), the tagline "One move, Endless potential.", and service families: Tech Consulting & System Integration, Enterprise SaaS & Solutions (for example Thaibulksms, Thaibulkmail, LINE Agency, Movider) and MarTech & Communication Platform. A statistic card reads "597+ โปรเจกต์" and "กว่า 19 ปี ในธุรกิจเทคโนโลยี".
The measured page (1280px wide, 8,095px tall, 1,123 visible elements) is a long, polished marketing page with a navy-to-cobalt-to-orange gradient hero, a floating white pill navigation bar, device mockups of client work, a grid of rounded white client-logo tiles, large ghosted "1MOBY" and "AWARDS" wordmarks as section backdrops, cobalt statistic cards, an awards gallery (Cannes Lions, ISO tiles) and a dark cobalt footer. Imagery is staged photography of the team at events plus 3D phone and screen renders in blue. The voice mixes Thai with English product terms (Digital & AI Solutions), confident and corporate-friendly.
A cookie-consent bar appeared in the first capture and was removed by re-extracting; it is not documented as brand UI.
## Colors
- **Canvas `#171717`**: body colour measured at the top of the page; in the capture the upper hero is a dark navy that fades through blue to orange and then to white sections.
- **White `#ffffff`** (`page-largest`): the largest background area (3,977 weight): content sections, client tiles and the primary button fill.
- **Ink `#ffffff`**: text on the dark hero and footer. On white sections the dominant text is **`#5e5e5e`** (14,490 characters), with black `#000000` for headings (1,293 characters).
- **Primary `#006bff`**: the brand cobalt, used for the statistic card fill (area weight 2,233), the heading words "Digital & AI Solutions", nav link accents and the footer gradient start `rgb(0, 107, 255)`. It is tokenised as primary because the extractor's detected CTA is a white button, which is kept as `button-fill`.
- **Button fill `#ffffff` with on-primary `#000000`**: the main call to action; hover `#f5f5f5`.
- **Tint `#e6f0ff`**: pale blue section background (2,237 area weight).
- **Footer link blue `#91bfff`**, muted grey `#717279`, border grey `#e6e6e6`.
- **Accents `#fc4c02` (orange, 356 area; also 74 characters of text) and `#ffa400` (amber, 490 area)**: award and badge tiles.
The root variables hold Tailwind-style ramps: `--vibrant-blue-4 #a2a2ff`, `--vibrant-blue-7 #4343cc`, `--vibrant-blue-9 #1d1d66`, `--blue-5 #1a80ff`, `--orange-1 #ffede6`, `--orange-3 #ffbb80`, `--yellow-6 #ffc700`, `--black-9 #262626` and others. These are declared; not all appear as page colours and they are not tokenised. The footer background is the gradient `radial-gradient(95% 200% at 100% 0%, rgb(0, 107, 255) 25%, rgb(0, 44, 238) 50%, rgb(29, 31, 42) 100%)`, so `#002cee` and `#1d1f2a` are its stops.
## Typography
**MeroThai** is the primary face (18,643 characters), with fallbacks "MeroThai Fallback", "Leelawadee UI" and Tahoma. **Geometrica** (134 characters) is used for the navigation labels, with Helvetica Neue and Arial fallbacks.
- **Display 60px / 700 / 84px**: h1 "ผู้นำด้าน Digital Solution และ AI-Driven Business" in white (mobile: 40px / 56px).
- **Heading 48px / 700 / 67.2px**: h2 "ผู้เชี่ยวชาญด้าน Digital & AI Solutions" (mobile: 32px / 44.8px).
- **Subheading 24px / 700 / 38.4px**: card titles such as "ลูกค้าวางใจให้ดูแล".
- **Body 14px / 400 / 22.4px**: the dominant size (10,285 characters); 18px (6,273 characters) is also used for lead paragraphs. On mobile the body is 16px / 400 / 25.6px.
- **Button 18px / 700 / 28.8px**; **secondary button 14px / 700 / 22.4px**; **link 12px / 700 / 19.2px**; **nav 16px / 400 / 24px** in Geometrica.
- Other measured sizes: 10px, 20px, 32px, 40px, 72px. Letter-spacing was measured only for 14px (0.35px, 12 characters); otherwise normal.
Measured line heights are 1.4 times the size for display, heading and subheading text and 1.6 times for 16px body. Foundry pages for MeroThai and Geometrica were not opened.
## Layout
The h1 block measures 1,120px wide inside the 1,280px viewport; the nav bar is 1,280px wide and 68px tall with `12px 60px 0px` padding, rendered as a floating rounded white bar. The cobalt statistic card is 500px by 260px with 24px padding and a 20px radius, and the h2 block is 500px wide. Common gaps are 16px (41 uses), 8px (26), 4px (24), 40px (9), 60px (7), 12px, 20px and 14px; the ten spacing tokens come from the smaller values. Sections alternate: dark gradient hero, a white band of client logo tiles in rows, a white area with an intro column and two cards, ghost wordmark dividers, a cobalt gradient for services and awards, white article cards, and a dark footer of 688px height. The page is long (8,095px) with large vertical rhythm between bands.
## Elevation & Depth
Shadows measured: a soft cobalt glow `rgba(0, 107, 255, 0.08) 4px 4px 40px 0px` (150 uses, the most common), a deep drop `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` (24 uses, for large mockups), a light `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` on the primary button, and `rgba(0, 0, 0, 0.06) 6px 6px 12px 8px` once. Depth also comes from gradient backgrounds (dark to cobalt to orange in the hero), translucent white tiles and large faded wordmarks behind content.
## Shapes
Radii: `20px` (199 uses, cards and tiles), `12px` (33), `16px` (24), `32px` (24), `6px` (5), and full pill (19; computed 3.35544e+07px, tokenised as 9999px) on buttons and nav controls. Buttons carry a circular icon chip: the primary button's padding `0px 4px 0px 28px` leaves 4px on the right for a black circle with an arrow. Cards are large-radius rectangles; logo tiles are rounded white squares.
## Components
- **Primary CTA "ปรึกษาเรา"**: white pill, 184px by 60px, black 18px / 700 label, trailing black circular arrow chip, soft shadow; hover fill `#f5f5f5` and 66px height (measured).
- **Secondary "คุยกับเรา"**: black pill, white 14px / 700 label, 40px high, 123px wide; hover fill `#404040` and 44px height.
- **Outline link "ติดต่อเรา"**: 12px / 700, pill, 1px `#e6e6e6` border, 32px high, 94px wide.
- **Black CTAs** "ข่าวสารทั้งหมด", "บทความทั้งหมด", "รู้จักเรามากขึ้น": black pill, 16px / 700, 52px high.
- **Nav**: floating white pill with logo, dropdown buttons (Our services, Resources, About 1Moby), Contact us and a black chat pill; hover on nav buttons fills `rgb(232, 233, 234)`.
- **Statistic card**: cobalt `#006bff` fill with a background image, 20px radius, white 24px title and large numerals.
- **Client logo tiles**, **award tiles** (orange and amber), **article cards**, and a **footer** with contact, social channels (Facebook, TikTok, LINE) and link columns in `#91bfff`.
## Design System Architecture
No public design system or brand guidelines were found: the home page (https://www.1moby.com) links a "Download Resource" page with expert solution materials, but no press kit or guideline document. The de-facto system is a Tailwind-based CSS layer: the root holds Tailwind utility variables (`--tw-ring-shadow`, `--tw-inset-shadow`, `--tw-gradient-from`) and named colour ramps (`--vibrant-blue-*`, `--blue-*`, `--orange-*`, `--yellow-*`, `--dark-grey-*`, `--black-*`, `--white-*`). Type uses a self-hosted MeroThai with a metric-matched "MeroThai Fallback" face, and Geometrica with a "Geometrica Fallback".
## Do's and Don'ts
- Do use white pill buttons with a black label and a trailing black arrow chip as the main CTA on dark sections.
- Do use cobalt `#006bff` for statistic cards, key words in headings and links.
- Do set Thai headlines in MeroThai 700 and keep Thai line heights near 1.4.
- Do round cards at 20px and use soft cobalt-tinted shadows.
- Do pair a dark gradient hero with white content bands.
- Don't use the cookie bar, chat pill or other overlays as brand components.
- Don't use orange `#fc4c02` or amber `#ffa400` outside award or badge tiles.
- Don't set large Thai text with tight line height.
## Responsive Behavior
Mobile pass (390px wide): h1 40px / 700 / 56px (358px wide block); h2 32px / 700 / 44.8px; body 16px / 400 / 25.6px; primary CTA 18px / 700, 177px by 60px with the same pill shape; nav 16px / 700 / 24px, 72px tall with `12px 12px 0px` padding (60px side padding on desktop). Character-weighted mobile sizes: 16px, 14px, 18px, 10px, 32px, 12px, 24px, 40px. Section reflow beyond those values was not measured.
## Iteration Guide
1. Start from `#171717` → `#006bff` hero gradient and white sections; text `#5e5e5e` on white.
2. Use MeroThai 700 for headings (60 / 48 / 24px) and 14px / 400 for body.
3. Build buttons as pills with a trailing arrow chip; white on dark, black on light.
4. Round cards at 20px; use the cobalt glow shadow `4px 4px 40px` at 8% blue.
5. Keep cookie and chat widgets out of the token set.
6. Run `node web/scripts/verify-designs.mjs --slug=1moby` after edits.