---
version: alpha
name: 3BB Fibre3
category: "Thai Brands"
description: "3BB Fibre3 (fiber.3bb.co.th, AIS group home broadband, Thai): DB Heavent 62px bold brown #65260f section titles on white, #f5781e orange accent and hover, charcoal #414143 nav bar, 8px card radius and photographic promo banners."
colors:
  canvas: "#ffffff"
  ink: "#262626"
  primary: "#f5781e"
  surface-nav: "#414143"
  surface-light: "#f5f5f5"
  surface-black: "#000000"
  ink-secondary: "#7b7b7b"
  heading-brown: "#65260f"
  primary-dark: "#ae5515"
  secondary-orange: "#da5220"
  primary-tint: "#fef2e9"
  hairline: "#d9d9d9"
typography:
  display:
    fontFamily: >-
      "DB Heavent", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
    fontSize: 62px
    fontWeight: 700
    lineHeight: 64px
  display-mobile:
    fontFamily: >-
      "DB Heavent", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
    fontSize: 40px
    fontWeight: 700
    lineHeight: 40px
  body-lg:
    fontFamily: >-
      "DB Heavent", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
    fontSize: 24px
    fontWeight: 400
    lineHeight: 28px
  body:
    fontFamily: >-
      "DB Heavent", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 20px
  input:
    fontFamily: >-
      "DB Heavent", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
    fontSize: 20px
    fontWeight: 700
    lineHeight: 20px
rounded:
  xs: 8px
  sm: 30px
  md: 48px
  pill: 9999px
spacing:
  s1: 2px
  s2: 4px
  s3: 8px
  s4: 9px
  s5: 10px
  s6: 12px
  s7: 14px
  s8: 16px
  s9: 23px
  s10: 24px
components:
  nav:
    backgroundColor: "{colors.surface-nav}"
    textColor: "{colors.canvas}"
    padding: 0px 0px 0px 8px
  nav-link-hover:
    textColor: "{colors.primary}"
  text-input:
    textColor: "{colors.canvas}"
    typography: "{typography.input}"
    padding: 0px 29px 0px 10px
    height: 24px
  card:
    backgroundColor: "{colors.surface-black}"
    textColor: "{colors.primary}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.xs}"
---

## Overview

The queued address www.3bb.co.th resolved to https://www.fiber.3bb.co.th/main, the Thai-language home page titled "3BB Fibre3 | ที่หนึ่งของเน็ตบ้านคุณภาพ มาตรฐานความเร็ว 1 Gbps". This document is named after the measured site, 3BB Fibre3, a home broadband service of 3BB Broadband Public Company Limited (บริษัท ทริปเปิลที บรอดแบนด์ จำกัด (มหาชน)), which the page says is part of the AIS group. The page header shows the AIS 3BB Fibre3 lockup.

The page (1280px wide, 6,475px tall, 673 visible elements) opens with an orange utility bar (payment channels, help, log in, a Thai flag language selector), a charcoal main navigation bar with the logo and the items Internet packages, Promotions, Points and privileges, Current customers and About us, a full-width promotional banner carousel (for example "AIS Cloud PC", "แพ็กเกจเริ่ม 299.-/เดือน"), a section with an embedded video on a yellow-to-orange gradient ("ศักยภาพที่เกิดจากในบ้าน สู่หนัง AI เรื่องแรกในไทย"), a grey "ไฮไลท์" section of three promotional tiles, a "แพ็กเกจแนะนำ" section with four package cards (Home FibreLAN MAX, Smart Soundbar, Super FAST Plus 7, Home FibreLAN PLUS) each with a photo, bold name, grey description and an orange "ดูเพิ่มเติม" link, and a charcoal footer with the company address. The page lists headline offers such as a Smart Soundbar service at 250 THB per month, speeds of 1 Gbps and 2 Gbps, and package prices from 199 THB per month.

Imagery is bright, saturated promotional artwork with smiling presenters, devices and 3D mascots. The language is Thai, with English product names. No popup or consent overlay appears in the capture.

## Colors

- **Canvas `#ffffff`**: the body background. Light sections use `#f5f5f5` (area weight 846).
- **Ink `#262626`** (`--cms-color-defaultText`, `--cms-color-darkestGrey`): headings and card titles (494 characters).
- **Primary `#f5781e`** (`--cms-color-primary`, `--cms-btn-default`, `--cms-border-primary`): the brand orange, used for the "ดูเพิ่มเติม" links (330 characters), the video play glyph, and nav hover. The utility bar behind it measures `#f57921`.
- **Heading brown `#65260f`** (`--cms-color-secondary`, `--cms-color-back-button`): section titles such as "ไฮไลท์" and "แพ็กเกจแนะนำ" (96 characters).
- **Navigation surface `#414143`**: the main bar and the footer (area weight 860, the largest).
- **Secondary text `#7b7b7b`** (`--cms-color-dark-grey`): card descriptions, the most-read colour (1,182 characters). White text `#ffffff` (723 characters) sits on the charcoal surfaces.
- **Black `#000000`**: the video frame background.
- **Hairline `#d9d9d9`** (`--cms-color-grey`, `--cms-color-border-bottom`).
- A numbered orange ramp is declared: `--cms-color-primary50 #fef2e9`, `primary100 #fcd5b9` to `primary900 #67320d`, including `primary700 #ae5515`, and a secondary ramp (`secondary600 #da5220`, `secondary900 #65260f`). Green (`kellyGreen`, `museGreen`) and sand (`serenade`) ramps and a purple-to-pink gradient `--cms-color-privilege-gradient` (`#8e30e1` to `#e6007e`) are declared; they were not measured as element colours on this page.
- The root also holds Bootstrap defaults (`--bs-primary #0d6efd` and others). Those are framework defaults and not brand colours.

## Typography

One family: **DB Heavent** (2,825 characters, weights 400 and 700, plus a 500 to 600 range loaded), with a system fallback stack.

- **Display 62px / 700 / 64px**: section titles in `#65260f`, 1,140px wide (mobile 40px / 40px).
- **Body large 24px / 400 / 28px**: the most used size (1,518 characters), card names and descriptions.
- **Body 20px / 400 / 20px**: footer address and nav text (717 characters; 1,637 characters on mobile).
- **Input 20px / 700 / 20px**: the language select.
- **32px (494 characters)**: card titles in `#262626`; its weight was not tied to an element, so it has no token.

The root defines a CMS type scale (`--cms-font-h4-size: 32px`, `--cms-font-h5-size: 28px`, `--cms-font-h5-line-height: 28px`, `--cms-font-h3-line-height: 40px`, `--cms-font-body2-line-height: 24px`, `--cms-font-keywords-size: 12px`). Thai text has line heights near 1.0 to 1.17 in these measurements, which are copied as measured. No foundry pages were opened.

## Layout

Content sits in a centred 1,140px container within the 1,280px viewport (the h1 block is 1,140px wide). The carousel and video band are full-bleed. The highlight section is a two-column tile grid (one large tile on the left, two stacked tiles on the right), and the package section is a four-card row with arrows for a carousel. Measured gaps are 16px (34 uses), 8px (12), 40px (8), 24px (4), 9px, 80px and 39px; paddings 12px (43), 4px (11), 80px (9), 24px (5), 70px (3), and 2px, 40px, 14px and 44px. The main nav is 24px tall in its language control and the bar itself spans the full width. Section spacing is large (80px paddings) relative to the 20px text.

## Elevation & Depth

No box shadows were measured. Separation uses colour fields: a white page, light grey `#f5f5f5` bands, charcoal `#414143` navigation and footer, and a gradient video band. The video frame is a black rounded rectangle on the gradient. Promotional tiles carry their own artwork and no outlines. A rgba(0,0,0,0.86) dark-brown background and `rgba(255,255,255,0.2)` SVG image border are declared in the root variables.

## Shapes

Radii: `8px` (19 uses: cards, tiles and the video), `30px` (5), `48px` (4) and `50%` (4, circular carousel arrows and icons). Larger radii of 30px and 48px belong to rounded promotional elements. The package cards and banners have 8px corners; the images inside the cards have the same 8px.

## Components

- **Utility bar**: orange (`#f57921`) strip with payment, help, login and language items in white.
- **Main nav**: `#414143` bar, white 20px links, hover colour `rgb(245, 120, 30)` (`#f5781e`) in 28px-high link boxes, a search icon and a location icon.
- **Language select**: TH/EN `select`, 58px by 24px, 20px / 700, white arrow image, padding `0px 29px 0px 10px`.
- **Carousel**: full-width banner with circular arrows and dot indicators.
- **Video card**: a 752px by 423px YouTube embed with 8px radius and a black background, orange play label.
- **Package card**: photo, 24px bold name, grey description in `#7b7b7b`, orange "ดูเพิ่มเติม" link with a chevron.
- **Footer**: `#414143` with white 20px text including the company address (89 Cosmo Office Park, Popular Road, Ban Mai, Pak Kret, Nonthaburi, as the page text states).

## Design System Architecture

No public design system or brand guidelines were found: the page (https://www.fiber.3bb.co.th/main) links privacy, careers, contact, CSR and complaint pages but no guidelines. The de-facto system is a CMS token layer in root variables: `--cms-color-*` ramps (primary50 to 900, secondary50 to 900, grey scale, kellyGreen, museGreen, serenade), `--cms-bg-color-*`, `--cms-font-*` sizes and line heights, `--cms-border-primary` and `--cms-btn-default`, on top of a Bootstrap 5 base (`--bs-*`) and Font Awesome 6. The loaded select-arrow icon URL shows client libraries served from an `etc.clientlibs/ais/clientlibs` path.

## Do's and Don'ts

- Do use orange `#f5781e` for links and hover states and brown `#65260f` for section titles.
- Do use charcoal `#414143` for navigation and footer with white text.
- Do round cards and video at 8px.
- Do pair bright promotional art with plain white and `#f5f5f5` bands.
- Do keep Thai text in DB Heavent at 20px and 24px.
- Don't use Bootstrap's `#0d6efd` or other `--bs-*` colours as brand colours.
- Don't add shadows; none were measured.
- Don't use the green, sand or purple-pink gradient ramps until measured on an element.

## Responsive Behavior

Mobile pass (390px wide): the section title is 40px / 700 / 40px, 358px wide; the footer address is 20px / 400 / 20px, 358px wide and 100px tall; the character-weighted sizes are 20px (1,637 characters), 24px (535), 16px (99), 40px (96) and 18px (41). The mobile pass found no nav or CTA role. Layout of cards, carousel and navigation at 390px was not measured.

## Iteration Guide

1. White canvas, `#262626` ink, `#f5781e` orange accent, `#65260f` brown titles, `#414143` bars.
2. DB Heavent only: 62px / 700 titles, 24px and 20px body.
3. 8px corners; no shadows; colour-field sections.
4. Use the CMS ramps (primary50 to primary900) for tints rather than inventing new oranges.
5. Run `node web/scripts/verify-designs.mjs --slug=3bb` after edits.