Web
Source of truth

The Bee design system.

Every colour, type size, and component on bee.com.bn resolves to a token defined in app/globals.css. This page renders those tokens live — if it looks right here, it is right everywhere.

See the Mobile App design system
Tokens

Colour

All colours are named by role. Hex values target WCAG AA against the surfaces they sit on. Light-only system — the dark sections are design moments, not a theme.

Brand — Bee yellow

The real Bee yellow. honey-500 (#FFE048) is the exact brand value; the ramp is built around it. Yellow is a fill colour — black ink sits on it. For yellow-family text or icons on white, only honey-800 clears AA contrast.

--color-brand-honey-50#FFFDEC

Subtle wash, callout backgrounds

--color-brand-honey-100#FFF7CC

Hover backgrounds, highlights

--color-brand-honey-200#FFF0A6

Light fills

--color-brand-honey-300#FFE978

Decorative accents, hover borders

--color-brand-honey-400#FFE45C

Hover on primary fills

--color-brand-honey-500#FFE048

Primary brand — button fills, icon squares

--color-brand-honey-600#E6C42A

Pressed on primary fills

--color-brand-honey-700#B89800

Focus ring, deep accent fills

--color-brand-honey-800#7D6700

Yellow-family text & icons on white (AA)

--color-brand-honey-900#4A3D00

Darkest accent, pressed link text

Surfaces & ink

White-base scheme. The page is a hair-warm white; cards sit a touch brighter with a hairline border; true black is reserved for dark “moment” sections and is the ink colour.

--color-surface-page#FDFDFB

Default page background

--color-surface-raised#FFFFFF

Cards, modals — pair with a hairline border

--color-surface-dark#0A0A0A

Dark moment sections — true black

--color-ink#0A0A0A

Headings + primary text, ink on yellow

--color-ink-on-dark#FFFFFF

Text on --surface-dark

Neutrals

Greys for borders, dividers, and secondary text. Never gray-on-gray for body copy.

--color-neutral-0#FFFFFF

Card surfaces, modals

--color-neutral-50#F7F7F5

Section backgrounds

--color-neutral-100#EDEDEA

Dividers, subtle surfaces

--color-neutral-300#C9C9C4

Borders

--color-neutral-500#7A7A75

Secondary text

--color-neutral-700#3D3D3A

Body text

--color-neutral-900#1A1A1A

Headings

Semantic

Trimmed to three. There is no warning colour — it collided with honey, so honey itself carries attention. These appear only in real UI states.

--color-success#0F8A4F

Confirmations, completed states

--color-danger#C0392B

Errors, destructive actions

--color-info#2A6EBB

Informational

Tokens

Typography

Single-family system in Geist Sans. Display defaults to weight 600 — self-assured without shouting. Geist Mono handles rate codes and numerals.

  • --text-xs

    12px / 0.75rem · Captions, badges, eyebrow labels

    Brunei, in one app.

  • --text-sm

    14px / 0.875rem · Secondary body, footnotes

    Brunei, in one app.

  • --text-base

    16px / 1rem · Body

    Brunei, in one app.

  • --text-lg

    20px / 1.25rem · Lead paragraphs

    Brunei, in one app.

  • --text-xl

    25px / 1.5625rem · H4, large body

    Brunei, in one app.

  • --text-2xl

    31px / 1.9375rem · H3

    Brunei, in one app.

  • --text-3xl

    39px / 2.4375rem · H2

    Brunei, in one app.

  • --text-4xl

    49px / 3.0625rem · H1 — interior pages

    Brunei, in one app.

  • --text-5xl

    61px / 3.8125rem · Hero — desktop

    Brunei, in one app.

Tokens

Spacing

A 4px-base scale. Section rhythm leans on the larger steps; component padding on the smaller ones.

  • --spacing-14px
  • --spacing-28px
  • --spacing-312px
  • --spacing-416px
  • --spacing-524px
  • --spacing-632px
  • --spacing-748px
  • --spacing-864px
  • --spacing-996px
  • --spacing-10128px
Tokens

Radius

Cards use md, buttons use pill, hero and feature blocks use lg.

--radius-sm6px · Inputs, small chips
--radius-md12px · Cards
--radius-lg20px · Hero / feature blocks
--radius-pill9999px · Buttons, pills
Tokens

Elevation

Used sparingly — the system leans on colour and spacing more than shadow.

--shadow-smCard resting state
--shadow-mdCard hover
--shadow-lgModals, popovers
Library

Components

Live instances of the primitives in components/ui and components/marketing — rendered, not screenshotted.

Button

Four variants, three sizes. md is the default; lg for hero CTAs only. Focus ring is always visible.

primary
secondary
tertiary
destructive

Eyebrow label

The only place all-caps is allowed. 12px, weight 600, tracking 0.08em, honey-800.

Brunei’s everyday platform

Card

White surface, md radius, sm shadow at rest. Add interactive for the hover lift.

Static card

Resting elevation, no hover behaviour.

Interactive card

Hover to see the 1–2px lift and shadow change.

Audience tile

The hero’s audience pickers. Icon chip, label, trailing arrow — the whole tile is a link with a 44px+ tap target.

SendSellDrive
Behaviour

Motion

Default transition is 200ms ease-out for colour, transform, and opacity. Everything respects prefers-reduced-motion.

Permitted

  • Card hover lift (1–2px translate-Y + shadow)
  • Button press (0.97 scale on active)
  • Stat counter count-up on scroll-into-view
  • Hero entrance — fade up 8px, staggered, under 600ms
  • Accordion expand/collapse

Forbidden

  • Auto-play hero carousels
  • Parallax scroll
  • Scroll-jacking
  • Animation chains over 800ms on load
Baseline

Accessibility

WCAG 2.1 AA is the floor. Every page must pass this checklist before handoff.

  • All interactive elements reachable by keyboard, in a logical order.
  • Visible focus indicator on every interactive element.
  • Meaningful alt for content images, alt="" for decorative.
  • Headings in semantic order — no skipped levels.
  • Contrast ≥4.5:1 for body text, ≥3:1 for large text and UI.
  • Forms label every input and associate errors with aria-describedby.
  • Page language set on <html>. Skip-to-content link is first focusable.
  • No content conveyed by colour alone.

Full spec: 03_design_system.md in the project root.