DESIGN.md@design-systems/library/aei alphaA

Immutable. This exact content never changes and is served at /api/v1/blob/31fc583134a5a541.

---
version: alpha
name: AI Energy
category: "Thai Brands"
description: "AI Energy (aienergy.co.th), a Thai palm-based biodiesel, glycerin and cooking-oil producer, uses white #ffffff pages with #ebebeb bands, warm grey text #685d5d, orange #f57d00 for the contact button, green #008c39 and #006e2d for hover and footer, and IBM Plex Sans with Kanit at 50px/600 hero and 14px/300 body."
colors:
  canvas: "#ebebeb"
  page-body: "#ffffff"
  ink: "#685d5d"
  primary: "#f57d00"
  on-primary: "#ffffff"
  surface-light: "#f8f8f8"
  ink-nav: "#666666"
  ink-strong: "#333333"
  ink-black: "#000000"
  ink-faint: "#aaaaaa"
  hairline: "#f2f2f2"
  green: "#008c39"
  green-deep: "#006e2d"
typography:
  display:
    fontFamily: "\"IBM Plex Sans\", Kanit, sans-serif"
    fontSize: 50px
    fontWeight: 600
    lineHeight: 55px
    textTransform: uppercase
  display-mobile:
    fontFamily: "\"IBM Plex Sans\", Kanit, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 48.4px
    textTransform: uppercase
  heading:
    fontFamily: "\"IBM Plex Sans\", Kanit, sans-serif"
    fontSize: 32px
    fontWeight: 300
    lineHeight: 35.2px
    textTransform: uppercase
  body:
    fontFamily: "\"IBM Plex Sans\", Kanit, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 23.8px
  button:
    fontFamily: "\"IBM Plex Sans\", Kanit, sans-serif"
    fontSize: 12px
    fontWeight: 100
    lineHeight: 17.1429px
    textTransform: uppercase
  nav:
    fontFamily: "\"IBM Plex Sans\", Kanit, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    textTransform: capitalize
rounded:
  xs: 2.5px
  sm: 5px
  md: 6px
  pill: 9999px
spacing:
  s1: 1px
  s2: 2px
  s3: 3px
  s4: 4px
  s5: 5px
  s6: 8px
  s7: 10px
  s8: 12px
  s9: 15px
  s10: 18px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.page-body}"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    padding: 10px
    height: 39px
  button-secondary:
    backgroundColor: "{colors.green}"
    textColor: "{colors.page-body}"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    padding: 10px
    height: 39px
  link:
    textColor: "{colors.ink-nav}"
    typography: "{typography.nav}"
  nav:
    textColor: "{colors.ink-nav}"
  nav-link:
    textColor: "{colors.ink-nav}"
    typography: "{typography.nav}"
  card:
    backgroundColor: "{colors.page-body}"
    textColor: "{colors.ink-strong}"
    rounded: "{rounded.sm}"
    padding: 40px 40px 100px
    boxShadow: rgba(0, 0, 0, 0.576) 2px 2px 6px 0px
  footer:
    backgroundColor: "{colors.green-deep}"
    textColor: "{colors.page-body}"
---

## Overview

AI Energy (บริษัท เอไอ เอนเนอร์จี จำกัด (มหาชน), `https://www.aienergy.co.th/th`, title "AI Energy", 288 visible elements, 2774px tall) describes itself on the home page as a producer of renewable energy in the form of biodiesel made from palm oil, using a distillation and biodiesel-production system, with products for sale in Thailand and abroad. Its product navigation lists biodiesel, refined glycerin, cooking oil and by-products; the "ผลิตภัณฑ์ของเรา" (Our products) band shows four white product cards with bottles and palm fruit photographed on white.

The page opens on a slider photograph of the plant's tiered tower and white storage tanks under a blue sky, with the greeting "ยินดีต้อนรับ เอไอ เอนเนอร์จี" (Welcome, AI Energy) in 50px uppercase white type and green slider dots. Below, an "เกี่ยวกับเรา" (About us) section sets three slanted tiles at left (a green production-capacity tile with a globe and the figure 1,150,000, an orange business-groups tile and a green responsibility tile) against a text column and a grey "ข้อมูลเพิ่มเติมเกี่ยวกับเรา" button at right. A grey "ข้อมูลสำหรับนักลงทุน" band follows with three document cards (latest news, financial statements Q2 2569, annual report Form 56-1 One Report) each with a coloured top line and a stock photograph, then a "ข่าวสาร" news row of SET-notification thumbnails and a row of line icons.

A cookie consent bar (`cookieconsent`) was hidden by the extractor; it is not brand UI.

## Colors

Background area by weight: white #ffffff (713), grey #ebebeb (608), #f8f8f8 (304), dark green #006e2d (244), darker green #005b25 (46), grey #666666 (41), green #008c39 (6). Text by characters: warm grey #685d5d (698), white (649), grey #666666 (359), #333333 (199), black (54), light grey #aaaaaa (33), green #29b82a (9).

- **canvas #ebebeb** is the grey section band (the investor-information band) and **page-body #ffffff** is the white page and card colour; **surface-light #f8f8f8** is the pale band behind the product cards.
- **ink #685d5d**: paragraph text; **ink-nav #666666**: navigation and links; **ink-strong #333333**, **ink-black #000000**, **ink-faint #aaaaaa** for headings, emphasis and dates.
- **primary #f57d00**: the orange of the "ติดต่อเรา" (Contact us) button, white text; the same orange fills the "กลุ่มธุรกิจ" tile in the capture.
- **green #008c39**: secondary button fill ("แผนที่"), hover fill of the grey About button; **green-deep #006e2d**: footer background and the large green tiles.
- **hairline #f2f2f2**: a measured border colour.

The hover of "ข้อมูลเพิ่มเติมเกี่ยวกับเรา" was recorded as a change from fill rgb(102, 102, 102) with white text to fill rgb(0, 140, 57) with text rgb(51, 51, 51).

## Typography

**IBM Plex Sans** (1936 characters) with **Kanit** (65) and sans-serif fallbacks. Weights measured: 300 (877 characters), 500 (441), 100 (194), 200 (189), 600 (124), 400 (110), 700 (66); the very light 100 and 200 weights are used on small button and tile captions. Roles: hero h1 600 50px/55px uppercase (mobile 44px/48.4px); section heading 300 32px/35.2px uppercase ("ผลิตภัณฑ์ของเรา"); body 300 14px/23.8px; button 100 12px/17.1429px uppercase; navigation 400 14px/20px capitalised, header text 13px. Most-read sizes: 14px (882), 11px (310), 13px (242), 18px (189), 10.5px (93), 12px (80), 50px (64). The fonts are named in the site's CSS; no substitute is declared beyond sans-serif.

## Layout

Desktop viewport 1280px. The header is 89px tall and 1200px wide: logo "AIE" at left, a language switch (EN | TH) at top right and a single row of Thai labels (เกี่ยวกับเรา, กลุ่มธุรกิจ, ผลิตภัณฑ์, นักลงทุนสัมพันธ์, การกำกับดูแลกิจการที่ดี, การพัฒนาความยั่งยืน, สมัครงาน, ติดต่อเรา). The full menu lists vision and mission, history, directors, products, financial information, 56-1 One Report, shareholder meetings, press room, governance charters, supply-chain policies and human-rights policy. Content is centred in a 1200px container with four-up product cards, a two-column About section and a three-column document-card row. Paddings by frequency: 20px (18), 40px (15), 25px (14), 12px (11), 18px (7), 5px (7), 30px (6). The footer is 187px tall.

## Elevation & Depth

Measured shadows: `rgba(0, 0, 0, 0.576) 2px 2px 6px 0px` (4 elements, the cards), `rgba(0, 0, 0, 0.15) 0px 1px 1.5px 0px` (3) and `rgba(0, 0, 0, 0.3) 2px 2px 5px 0px` (1). Cards lift off the grey and pale bands with a noticeable bottom-right shadow; slanted tiles are flat colour.

## Shapes

Measured radii: `0% 0px 0px` (7 elements), 6px (7), 100% (4), 5px (4) and 2.5px (4). Buttons are 2.5px, cards 5px, 6px is used on other boxed elements, 100% on four elements whose shape the extraction did not isolate. The About tiles are parallelograms (slanted edges) rather than rectangles, and the tabs on document cards are angled.

## Components

- **Contact button:** "ติดต่อเรา", orange #f57d00, white Plex 100 weight 12px uppercase, padding 10px, 39px tall, 2.5px radius.
- **Map button:** "แผนที่", green #008c39 with the same type and shape.
- **About button:** grey #666666 with white text, 45px tall, changing to green on hover.
- **Product cards:** white, 5px radius, shadow `rgba(0, 0, 0, 0.576) 2px 2px 6px 0px`, product photo, product name and a grey "ข้อมูลเพิ่มเติม >" tab at the bottom.
- **Document cards:** white, a coloured top line (orange, green, red), a line icon at top right, a photograph and a "ดาวน์โหลด" tab.
- **Slanted tiles:** green #006e2d and orange tiles with a white heading and small caption.
- **Footer:** #006e2d background, white 18px text, 187px tall, company name and address.
- The cookie bar is not a component.

## Design System Architecture

No public design system or brand-guidelines page was found: the opened page https://www.aienergy.co.th/th links to company, product, investor, governance, sustainability, careers and contact pages only. The extraction recorded no root CSS variables (rootVars is empty), so the system is plain class-based CSS: the palette above lives directly in component rules, with IBM Plex Sans and Kanit as the fonts named in the CSS.

## Do's and Don'ts

- Do use white cards on grey (#ebebeb) and pale (#f8f8f8) bands with the noticeable bottom-right shadow.
- Do reserve orange #f57d00 for the contact action and green #008c39 / #006e2d for hover, tiles and footer.
- Do set body text in IBM Plex Sans 300 at 14px/23.8px in warm grey #685d5d.
- Do show a coloured top rule on each investor document card.
- Don't use heavy weights for small captions; the page uses weight 100 and 200 there.
- Don't document the cookie bar as brand UI.
- Don't round buttons beyond 2.5px.

## Responsive Behavior

Mobile was measured at 390px. The hero h1 drops from 50px to 44px (line 48.4px) in a 263px by 97px block; body text shrinks from 14px to 12.32px/20.944px in a 354px by 188px block; the contact button measures 10.56px text with 8.8px padding; the header is 354px by 69px and records only "EN TH". Mobile size frequencies: 12.32px (817 characters), 11.44px (264), 15.84px (189), 9.68px (181), 9.24px (93), 10.56px (80); each of these equals the desktop size multiplied by 0.88 (14px to 12.32px, 13px to 11.44px, 18px to 15.84px, 11px to 9.68px, 10.5px to 9.24px, 12px to 10.56px). Menu behaviour, column reflow and card widths at narrow viewports were not measured.

## Iteration Guide

1. Start from page-body #ffffff, canvas #ebebeb, ink #685d5d, primary #f57d00, green #008c39, footer #006e2d.
2. Type: IBM Plex Sans 300 for body and light headings, 600 for the hero; Kanit as the second family.
3. Buttons are 2.5px radius, 10px padding, uppercase 12px; orange for contact, green for secondary, grey-to-green hover for text buttons.
4. Cards: white, 5px radius, strong bottom-right shadow, tab-shaped action bar.
5. Hero with a slider photograph and a 50px uppercase white greeting.
6. Measure new components before adding tokens; states not recorded stay "not measured".