# DESIGN.md — WebG Design System (v2, homepage webg.my) > Plain-text design system for AI coding agents (Claude Code, etc.). > Read this file before generating or modifying any UI in this project. > Structure follows the [awesome-design-md](https://github.com/voltagent/awesome-design-md) convention (MIT). > > **Scope:** this file governs the WebG marketing site at root `public/` > (index, tentang, servis, harga, hasil-kerja, hubungi, terma). Client sites > under `public/client//` each carry their own `DESIGN.md`. The design > catalog under `public/demo/` has its own README. > > **License & client-safety:** original work under this repo's MIT license. > Imitates no brand's trade dress. Fonts are OFL and self-hosted (no CDN). > Only license-safe assets: OFL fonts, MIT/CC0 icons/images, hand-drawn SVG. ## 1. Visual Theme Clean modern SaaS. Light-first: white canvas, generous whitespace, sharp typography, subtle 1px borders, restrained shadows. One vivid teal accent on a deep slate ink. Feels like a focused product site (calm, confident, professional), never a generic template. No stock photos, no gradient soup; imagery is minimal inline SVG (browser-window mockups, abstract shapes). Dark slate is reserved for the footer and final CTA bands. ## 2. Color Palette Defined as Tailwind tokens in `tailwind.config.js`; compiled to `public/assets/css/styles.css` via `./build.sh`. | Token | Hex | Usage | |-------|-----|-------| | `ink` | `#0F172A` | Headings, nav text, footer/CTA-band background | | `accent` | `#0D9488` | CTAs, links, highlights, check icons, eyebrows | | `accent-hover` | `#0F766E` | Button hover state | | `surface` | `#FFFFFF` | Page background, cards | | `surface-alt` | `#F8FAFC` | Alternate section background | | `line` | `#E2E8F0` | 1px borders on cards, nav, tables | | body text | `#475569` (slate-600) | Paragraphs, secondary text | | WhatsApp | `#25D366` | Floating WhatsApp button only | | sales accent | `#FBBF24` (amber-400) / `#FCD34D` (amber-300) | Halaman jualan/promo sahaja (promo.html): CTA utama, highlight marker, badge, offset shadow. Jangan guna pada halaman korporat | Rules: - One accent family (teal). Check/success icons are teal, not green. - Never introduce a second hue without updating this file first. - Text on `accent` and on `ink` is white. ## 3. Typography - Headings: **Space Grotesk** 700 (`font-heading`). Body: **Inter** 400 (`font-sans`). Both variable woff2, self-hosted at `public/assets/fonts/`, loaded via `@font-face` with `font-display: swap`. Never hotlink fonts. - H1: `text-4xl md:text-6xl`, tight leading. H2: `text-3xl md:text-4xl`. - Body: `text-base md:text-lg`, `text-slate-600`, `leading-relaxed`. - Eyebrow labels: Inter 600 uppercase `tracking-wide text-accent text-sm` (class `.eyebrow`). - Prices always formatted **RM499** (no decimals, no space). ### Suara & bahasa (copywriting) - **Bahasa Melayu santai**, mesra dan terus ke maksud. Guna "anda" sahaja (jangan "korang"/"kau"). Elakkan BM formal-kaku ("sekiranya" jadi "kalau", "dijelaskan" untuk bayaran jadi "dibayar"). - **Istilah English yang umum JANGAN diterjemah** ke BM. Tulis terus dalam English dan gayakan *italic* dengan tag `` (cth. website, mobile-friendly, copywriting, hosting, preview, update, support, add-on). - Nama jenama/produk (WhatsApp, Google, Meta) dan akronim (SEO, SSL, FAQ, CTA) TIDAK di-italic. - Tiada em dash dalam copy. Ayat pendek, mudah dibaca di telefon. ## 4. Component Styling Reusable classes live in `src/input.css` (`@layer components`): - **`.btn-primary`**: teal background, white text, `rounded-lg`, subtle shadow, hover lifts (`-translate-y-0.5`) and darkens to `accent-hover`. - **`.btn-secondary`**: white background, slate outline, ink text; hover turns border and text teal. - **`.card`**: white, 1px `line` border, `rounded-2xl`, `p-6 md:p-8`, hover border tints teal. No heavy drop shadows. - **Nav**: sticky top, `bg-white/80` + `backdrop-blur`, bottom border, mobile hamburger toggled by JS. CTA button on the right. - **Footer**: `ink` background, 4 columns (brand + tagline, halaman, servis, hubungi) + bottom bar "© 2026 Teras Core Sdn Bhd. Hak cipta terpelihara." - **`.wa-float`**: fixed bottom-right WhatsApp button, all pages. - **`.badge-popular`**: teal pill, uppercase, marks the Pro package. - **FAQ accordion**: `.faq-item` + `.faq-answer` (CSS grid-rows animation), toggled by JS with `aria-expanded`. - **Testimonial slider**: `.slider` uses CSS scroll-snap, no JS library. ## 5. Layout Principles - Content column: `.container-site` = `max-w-content` (72rem), centered, `px-5 md:px-8`. - Section rhythm: `py-16 md:py-24`; alternate `surface` / `surface-alt` backgrounds between sections. - Card grids: CSS grid `sm:grid-cols-2 lg:grid-cols-3` (or 4 for stats); gap 5-6. - Page anatomy: sticky header → `
` → dark CTA band → footer. - One H1 per page; semantic HTML5 (`header/nav/main/section/footer`). ## 6. Depth & Elevation Flat-plus: depth from borders and background alternation, not shadows. Allowed shadows: `shadow-sm` on primary buttons, `shadow-lg` on the floating WhatsApp button and browser-mockup SVG frames only. Nav uses the single backdrop-blur. No glassmorphism, no 3D transforms. ## 7. Do's and Don'ts **Do** - Reuse `.btn-primary`, `.card`, `.eyebrow`, nav and footer markup verbatim; copy from an existing page when creating a new one. - Keep copy in Bahasa Malaysia, professional tapi mesra; always "anda". - Make WhatsApp the primary CTA everywhere: `https://wa.me/601154392359?text=` with pre-filled text naming the package/context. - Run `./build.sh` after any class change; commit the compiled CSS. - Keep internal links relative (must work via file:// and at domain root). **Don't** - No em dashes in copy. No "korang", no "kau". - No stock photos, no CDN assets, no external JS/CSS, no jQuery. - Don't touch `public/client/**` or `public/demo/**` when working on the homepage; don't add their paths to Tailwind `content`. - Don't introduce new colors/fonts/radii outside this file; update the file first, then the code. ## 8. Responsive Behavior - Mobile-first; a phone reader must get each section in 5 seconds. - No horizontal overflow at 375px (QA-checked). Wide pricing tables scroll inside their own `overflow-x-auto` wrapper. - Nav collapses to hamburger below `md`; menu is a full-width dropdown panel under the header. - Testimonial slider scroll-snaps horizontally on all sizes. - All images/SVG: `max-width: 100%`. ## Agent Prompt Guide When asked to add or modify UI on the WebG homepage: 1. Read `src/input.css` and one existing page for current patterns. 2. Reuse component classes and the shared nav/footer markup; set the active nav state (`.nav-link-active`) on the current page's link. 3. New pages: unique `` + meta description in BM, one H1, OG tags, add the page to `sitemap.xml`. 4. Any new design decision (color, font, spacing) must be added to this file in the same change. 5. Rebuild CSS with `./build.sh` and commit `public/assets/css/styles.css`.