Doublea Brand Guidelines

Double A Brand Guidelines

Single source of truth for how Double A web interfaces should look, derived from the official Brand Visual Identity Design Guidelines 2023. Goal: anyone in the company can ask Claude to build a page and the result is consistent with everyone else's — same blues, same logo usage, same typography, same component feel.

When you build any web UI, you do not invent colors or fonts. You read the tokens here and apply them.

Brand at a glance

• Colors: Brand Blue #004DF4 (primary), Cyan #00E5F9, Light Blue #467DFA,

on clean white. Five accent colors exist but are for advertising/lifestyle only.

• Type: Poppins (English) + Prompt (Thai). Both free on Google Fonts.
• Signature look: the "Core Signature 1" angular triangle/diagonal motif in the

three blues — used as corner flourishes, header bands, and dividers.

• Personality: Active Attitude — premium, beyond paper; Younger, Active, Modern.

Clean, minimal, lots of white space (like a fresh sheet of paper).

How to use this skill (workflow)

Follow these every time you build or restyle a Double A web interface:

1. Load the design tokens. Copy assets/tokens.css into the project (or inline the :root variables). Every color, font, radius, and shadow comes from these — never hardcode a hex not defined here. This is what keeps every page consistent. 2. Place the logo correctly. Use assets/logo-primary.svg (blue, light bg), assets/logo-white.svg (white, blue/dark bg), or assets/logo-mark.svg (square mark, tight spaces). Read references/logos.md for clear-space, sizing, and the 9 misuse rules — including the key one: never combine the Square Mark with the Brand Logotype. 3. Apply typography. Read references/typography.md — Poppins for English, Prompt for Thai, with the HEADLINE / SUB-HEADLINE hierarchy. 4. Use the signature motif & layout language. Read references/design-language.md for the Core Signature triangle motif (ready-to-use CSS/SVG) and the light/blue surface modes. 5. Build components from the patterns in references/components.md. 6. Sanity-check against the rules below before finishing.

User content/layout/product requirements always win on what the page says; this skill governs the look. If the two conflict (e.g. a request for a hot-pink corporate hero), flag that it's off-brand and offer the on-brand equivalent, but do what they confirm.

Reference files — read what you need

Loaded on demand so this file stays short:

• references/colors.md — full palette (HEX + Pantone/CMYK), accent rules, tint ladder, contrast.
• references/typography.md — Poppins + Prompt, type scale, weights, Thai handling.
• references/logos.md — logo variants, clear space, sizing, the 9 improper-use rules.
• references/design-language.md — the Core Signature motif, brand personality, layout modes.
• references/components.md — buttons, badges, cards, stat/KPI cards, inputs, navbar,

sidebar, dropdown, tabs, breadcrumbs, pagination, tables, alerts, toasts, modal, accordion, footer.

• references/layouts.md — full-page skeletons: marketing/landing page, **dashboard app

shell (sidebar + topbar)**, content/article page, auth/login screen, responsive rules.

• references/graphics.md — visual graphics: Core Signature motif variants, section

dividers, watermarks, data-visualization palette, iconography, photo treatment.

Assets

• assets/tokens.css — canonical CSS custom properties. Drop this in first.
• assets/logo-primary.svg / logo-white.svg / logo-mark.svg — logo variants.
• assets/example-landing.html — a complete, correct reference page (blue theme,

Core Signature corner, "Better Paper, Better World" hero). Match its structure/spacing.

• assets/example-dashboard.html — a dashboard reference (sidebar app shell, topbar,

KPI/stat cards, brand-blue mini chart, table). Use it as the model for internal tools.

Core brand rules (the short version)

These cover ~90% of on-brand pages:

• Blue is the accent on a white canvas. Brand blue for primary buttons, headlines,

key links, active states; cyan for the signature triangle and small sparks. Aim ~60% white / 30% neutral & soft blue / 10% saturated blue. A page drowning in blue looks heavy — let white space breathe.

• Accent colors (pink/orange/yellow/mint/indigo) are advertising-only. Corporate,

product, about, and contact pages stay on the blues.

• Use the logo from `assets/` — never retype "Double A" as styled text, never

recolor/stretch/rotate it, never combine the Square Mark with the wordmark, never put it on a busy background (use the white logo on a solid blue block instead).

• Typography: Poppins (EN) + Prompt (TH) only. Headlines in blue or ink. Never use

cyan/light-blue for running text (contrast too low).

• Premium minimalism: flat color, soft shadows (--shadow-*), rounded corners

(--radius-*), generous spacing. No clutter, no gradients on the logo or text.

• Accessible contrast (WCAG AA, 4.5:1). The tokens pair safe foreground/background

combos — keep ink on light, white on blue/dark.

⚠️ One thing to finalize before company-wide rollout

The color values, typography, motif, and rules in this skill are taken directly from the official 2023 guideline and are accurate. The only placeholders are the logo SVG files in assets/, which are clean recreations in the correct style. Replace them with the official vector logo files from the brand team (keep the same filenames). They're marked with TODO(brand-owner) in references/logos.md.

Double A — Brand Guidelines Skill

Claude Code/Cowork skill ที่รวม design system ทางการของ Double A (สี โลโก้ ตัวอักษร motif และ component) เพื่อให้ทุกคนในบริษัทออกแบบเว็บ/แอป/แดชบอร์ดให้ออกมาเป็นแนวเดียวกัน อ้างอิงจาก Brand Visual Identity Design Guidelines 2023.

A shared design-system skill so every team builds on-brand UI consistently.

What's inside

doublea-brand-guidelines/
├── SKILL.md                  # entry point: when to use + workflow
├── references/               # loaded on demand
│   ├── colors.md             # palette (HEX + Pantone/CMYK), ratios, contrast
│   ├── typography.md         # Poppins (EN) + Prompt (TH)
│   ├── logos.md              # logo variants + 9 misuse rules
│   ├── design-language.md    # Core Signature motif, personality, surface modes
│   ├── components.md         # buttons, sidebar, cards, tables, modals… (13 groups)
│   ├── layouts.md            # landing page, dashboard app shell, auth, article
│   └── graphics.md           # motif variants, data-viz palette, icons
└── assets/
    ├── tokens.css            # canonical CSS variables (single source of truth)
    ├── logo-primary.svg / logo-white.svg / logo-mark.svg
    ├── example-landing.html  # reference marketing page
    └── example-dashboard.html# reference dashboard (sidebar shell)

Install (Claude Code)

Quickest — npx skills

The repo has a SKILL.md at its root, so the `skills` CLI can install it from GitHub directly (repo must be public):

# Into the current project (recommended)
npx skills add chrpac/doublea-brand-guidelines

# Preview without installing
npx skills add chrpac/doublea-brand-guidelines --list

Manual — git clone

Clone into your skills directory:

# Personal (available in all your sessions)
git clone https://github.com/chrpac/doublea-brand-guidelines.git \
  ~/.claude/skills/doublea-brand-guidelines

# OR per-project & shared with the team via the project repo
git clone https://github.com/chrpac/doublea-brand-guidelines.git \
  .claude/skills/doublea-brand-guidelines

Then just ask Claude to "build a landing page / dashboard for Double A" — the skill triggers automatically.

Update

cd ~/.claude/skills/doublea-brand-guidelines && git pull

TODO before wide rollout

Replace the placeholder SVGs in assets/ (logo-primary.svg, logo-white.svg, logo-mark.svg) with the official vector logo files — keep the same filenames. Search the repo for TODO(brand-owner).

Maintainers

Brand owner / design system team. Open a PR for changes; keep assets/tokens.css as the single source of truth and update references/colors.md to match.

Colors

All values are from the Double A Brand Visual Identity Design Guidelines 2023. The guideline gives two sets: FOR OFFLINE (print — Pantone/CMYK) and FOR ONLINE (digital — RGB/HEX). For websites, always use the ONLINE / HEX values below. The canonical machine-readable values live in assets/tokens.css.

Primary brand palette (the blues)

Brand blue has a tint ladder (90%→10%, mixing toward white) defined as --da-blue-90 … --da-blue-10 for charts, backgrounds, and subtle states. The 10% tint (#E5EDFE, also --da-blue-soft) is the go-to soft background / badge fill.

Accent palette — Advertising / lifestyle ONLY

The guideline labels these "Accent Color (Recommendation)" and reserves them for Advertising C.I. — campaign, promotional, and lifestyle content meant to feel "colorful and eye-catching." Do not use them on corporate/brand pages, which stay on the blues. Use at most one accent per campaign piece.

Brand C.I. vs Advertising C.I. (the ratio rule)

The guideline splits usage into two contexts:

• Brand C.I. (corporate / product / about / contact): blues only — #004DF4,

#00E5F9, #467DFA on clean white. Premium, minimal, trustworthy.

• Advertising C.I. (campaigns / promos / lifestyle): core blues plus the

accent colors above for variety and energy.

Default any website to Brand C.I. unless the page is explicitly a campaign.

Neutrals

Usage ratio (keep it clean)

Double A is premium and minimal. Aim for roughly 60% white / 30% neutral & soft blue / 10% saturated brand blue. Large areas stay white or cloud; blue is the confident accent, plus the cyan triangle motif for brand signature. A page drowning in saturated blue looks heavy — let the white space breathe (it echoes a fresh sheet of paper).

Accessibility / contrast

Body text must meet WCAG AA (4.5:1).

• ✅ Ink (#1A1A1A) on white / cloud.
• ✅ White on Brand Blue (#004DF4), on ink.
• ✅ Brand Blue text on white (passes — good for links/headlines).
• ✅ Slate (#5B6472) for secondary text on white.
• ❌ Cyan (#00E5F9) or Light Blue text on white — too low contrast; cyan is a fill/accent, never body text.
• ❌ White text on cyan or on soft tints — use ink instead.
• ❌ Brand Blue text on ink/charcoal.

Do / Don't

Do use brand blue as a confident accent on white; use cyan for the signature triangle and small sparks; use soft tints for gentle background blocks.

Don't recolor the brand blue to a different hue; don't use accent (pink/orange/ yellow/mint) on corporate pages; don't make cyan or light blue do the job of readable text; don't fill whole pages with saturated blue.

Components

Copy-paste patterns so UI building blocks look identical across teams. All assume assets/tokens.css is loaded — use the tokens, never hardcode colors/sizes.

For full-page skeletons (landing pages, dashboard app shell) see references/layouts.md. For decorative/visual graphics (the Core Signature motif, dividers, chart colors) see references/graphics.md.

Contents

• Buttons
• Badges & tags
• Cards · Stat / KPI cards
• Form inputs
• Navbar (top navigation)
• Sidebar (side navigation)
• Dropdown menu
• Tabs · Breadcrumbs · Pagination
• Tables
• Alerts / banners · Toasts
• Modal / dialog
• Accordion
• Footer

---

Buttons

.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.5rem;
  font:var(--weight-semibold) var(--text-base)/1 var(--font-sans);
  border-radius:var(--radius-md); border:1px solid transparent; cursor:pointer;
  transition:background .15s,border-color .15s,color .15s; }
.btn-primary { background:var(--color-primary); color:var(--color-on-primary); }
.btn-primary:hover { background:var(--color-primary-hover); }
.btn-secondary { background:transparent; color:var(--color-primary); border-color:var(--color-primary); }
.btn-secondary:hover { background:var(--da-blue-soft); }
.btn-ghost { background:transparent; color:var(--color-text); }
.btn-ghost:hover { background:var(--color-bg-subtle); }
.btn-sm { padding:.5rem 1rem; font-size:var(--text-sm); }
.btn-lg { padding:1rem 2rem; font-size:var(--text-lg); }

One primary button per screen — if everything is blue, nothing stands out.

Badges & tags

.badge { display:inline-block; font-size:var(--text-xs); font-weight:var(--weight-semibold);
  padding:.25rem .6rem; border-radius:var(--radius-pill); background:var(--da-blue-soft); color:var(--color-primary); }
.badge-solid { background:var(--color-primary); color:#fff; }
.badge-success { background:#E6F4EC; color:var(--color-success); }
.badge-warning { background:#FCF1E0; color:var(--color-warning); }
.badge-error   { background:#FBEAEA; color:var(--color-error); }
.tag { display:inline-flex; align-items:center; gap:.35rem; font-size:var(--text-sm);
  padding:.3rem .7rem; border:1px solid var(--color-border); border-radius:var(--radius-pill); color:var(--color-text); }

Cards

.card { background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:var(--space-6); transition:box-shadow .2s,transform .2s; }
.card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card h3 { margin:0 0 var(--space-2); font-size:var(--text-xl); color:var(--color-text); }
.card p  { margin:0; color:var(--color-text-muted); }

Soft shadows + rounded corners over heavy borders.

Stat / KPI cards

For dashboards. Keep the number big, label muted, optional blue trend.

<div class="stat">
  <span class="stat-label">Total production</span>
  <span class="stat-value">1,284 <small>ADt</small></span>
  <span class="stat-trend up">▲ 4.2% vs last week</span>
</div>

.stat { background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:var(--space-6); display:grid; gap:var(--space-2); }
.stat-label { font-size:var(--text-sm); color:var(--color-text-muted); }
.stat-value { font-family:var(--font-display); font-weight:var(--weight-bold); font-size:var(--text-3xl); color:var(--color-text); line-height:1; }
.stat-value small { font-size:var(--text-lg); color:var(--color-text-muted); font-weight:var(--weight-medium); }
.stat-trend { font-size:var(--text-sm); font-weight:var(--weight-semibold); }
.stat-trend.up { color:var(--color-success); } .stat-trend.down { color:var(--color-error); }
.stat-accent { border-left:4px solid var(--color-primary); }  /* optional brand emphasis */

Form inputs

.field { display:grid; gap:var(--space-2); }
.field label { font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--color-text); }
.input { padding:.7rem 1rem; font:var(--text-base) var(--font-sans); color:var(--color-text);
  background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-md);
  transition:border-color .15s, box-shadow .15s; }
.input:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--da-blue-soft); }
.input[aria-invalid="true"] { border-color:var(--color-error); }
.help { font-size:var(--text-sm); color:var(--color-text-muted); }
.error{ font-size:var(--text-sm); color:var(--color-error); }

Always keep a visible blue focus ring for accessibility.

Navbar (top navigation)

<header class="navbar">
  <a href="/" class="brand"><img src="assets/logo-primary.svg" alt="Double A" width="140" height="40"></a>
  <nav class="nav-links">
    <a href="#">Products</a><a href="#">Services</a><a href="#">News &amp; Blog</a>
    <a href="#">About Double A</a><a href="#">Contact</a>
  </nav>
  <a href="#" class="btn btn-primary">Contact</a>
  <button class="nav-toggle" aria-label="Menu">☰</button>
</header>

.navbar { display:flex; align-items:center; justify-content:space-between; gap:var(--space-8);
  max-width:var(--container-max); margin:0 auto; padding:var(--space-4) var(--container-pad); }
.nav-links { display:flex; gap:var(--space-6); }
.nav-links a { color:var(--color-text); text-decoration:none; font-weight:var(--weight-medium); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--color-primary); }
.nav-toggle { display:none; background:none; border:0; font-size:1.5rem; color:var(--color-primary); cursor:pointer; }
@media (max-width:860px){ .nav-links{ display:none; } .nav-toggle{ display:block; } }

Logo links home. Mark the active page with aria-current="page" (turns blue).

Sidebar (side navigation)

The core of any dashboard/app. White surface, blue active item, the active state uses a soft-blue fill + a blue left accent bar so it reads instantly. Pair with the app shell in references/layouts.md.

<aside class="sidebar">
  <a href="/" class="sidebar-brand"><img src="assets/logo-primary.svg" alt="Double A" width="120" height="32"></a>
  <nav class="sidebar-nav">
    <span class="sidebar-section">Overview</span>
    <a href="#" class="sidebar-link is-active"><span class="ico">▦</span> Dashboard</a>
    <a href="#" class="sidebar-link"><span class="ico">▤</span> Production</a>
    <a href="#" class="sidebar-link"><span class="ico">◷</span> Reports</a>
    <span class="sidebar-section">System</span>
    <a href="#" class="sidebar-link"><span class="ico">⚙</span> Settings</a>
  </nav>
  <div class="sidebar-foot">
    <div class="avatar">CA</div>
    <div><strong>Chirdchai</strong><br><small>Admin</small></div>
  </div>
</aside>

.sidebar { width:264px; flex:0 0 264px; height:100%; background:var(--color-bg);
  border-right:1px solid var(--color-border); display:flex; flex-direction:column;
  padding:var(--space-6) var(--space-4); gap:var(--space-6); }
.sidebar-brand { padding:0 var(--space-2) var(--space-2); }
.sidebar-nav { display:flex; flex-direction:column; gap:.15rem; flex:1; }
.sidebar-section { font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:.06em;
  text-transform:uppercase; color:var(--color-text-muted); padding:var(--space-4) var(--space-2) var(--space-1); }
.sidebar-link { display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border-radius:var(--radius-md);
  color:var(--color-text); text-decoration:none; font-weight:var(--weight-medium);
  border-left:3px solid transparent; transition:background .15s,color .15s; }
.sidebar-link .ico { width:1.2em; text-align:center; color:var(--color-text-muted); }
.sidebar-link:hover { background:var(--color-bg-subtle); }
.sidebar-link.is-active { background:var(--da-blue-soft); color:var(--color-primary);
  border-left-color:var(--color-primary); font-weight:var(--weight-semibold); }
.sidebar-link.is-active .ico { color:var(--color-primary); }
.sidebar-foot { display:flex; align-items:center; gap:.6rem; padding-top:var(--space-4);
  border-top:1px solid var(--color-border); font-size:var(--text-sm); }
.avatar { width:36px; height:36px; border-radius:var(--radius-pill); background:var(--color-primary);
  color:#fff; display:grid; place-items:center; font-weight:var(--weight-bold); font-size:var(--text-sm); }

/* Optional dark sidebar (for a stronger brand feel): swap surface to brand blue */
.sidebar.dark { background:var(--da-blue); border-right-color:transparent; }
.sidebar.dark .sidebar-link { color:rgba(255,255,255,.85); }
.sidebar.dark .sidebar-link:hover { background:rgba(255,255,255,.12); }
.sidebar.dark .sidebar-link.is-active { background:rgba(255,255,255,.16); color:#fff; border-left-color:var(--da-cyan); }
.sidebar.dark .sidebar-section { color:rgba(255,255,255,.6); }

A collapsed/icon-only variant: set width:72px, hide the text labels and section headers, keep the icons centered.

Dropdown menu

.menu { position:absolute; min-width:200px; background:var(--color-bg); border:1px solid var(--color-border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:var(--space-2); z-index:50; }
.menu a { display:block; padding:.55rem .7rem; border-radius:var(--radius-sm); color:var(--color-text);
  text-decoration:none; font-size:var(--text-sm); }
.menu a:hover { background:var(--da-blue-soft); color:var(--color-primary); }
.menu hr { border:0; border-top:1px solid var(--color-border); margin:var(--space-2) 0; }

Tabs

.tabs { display:flex; gap:var(--space-2); border-bottom:1px solid var(--color-border); }
.tab { padding:.7rem 1rem; border:0; background:none; cursor:pointer; color:var(--color-text-muted);
  font:var(--weight-medium) var(--text-base) var(--font-sans); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab:hover { color:var(--color-text); }
.tab.is-active { color:var(--color-primary); border-bottom-color:var(--color-primary); font-weight:var(--weight-semibold); }

Breadcrumbs

.crumbs { display:flex; gap:.5rem; align-items:center; font-size:var(--text-sm); color:var(--color-text-muted); }
.crumbs a { color:var(--color-text-muted); text-decoration:none; }
.crumbs a:hover { color:var(--color-primary); }
.crumbs .sep { color:var(--color-border); }
.crumbs [aria-current="page"] { color:var(--color-text); font-weight:var(--weight-medium); }

Pagination

.pager { display:flex; gap:.25rem; }
.pager a { min-width:36px; height:36px; display:grid; place-items:center; border-radius:var(--radius-md);
  border:1px solid var(--color-border); color:var(--color-text); text-decoration:none; font-size:var(--text-sm); }
.pager a:hover { border-color:var(--color-primary); color:var(--color-primary); }
.pager a.is-active { background:var(--color-primary); border-color:var(--color-primary); color:#fff; font-weight:var(--weight-semibold); }

Tables

.table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.table th { text-align:left; padding:.8rem 1rem; color:var(--color-text-muted); font-weight:var(--weight-semibold);
  border-bottom:1px solid var(--color-border); background:var(--color-bg-subtle); }
.table td { padding:.8rem 1rem; border-bottom:1px solid var(--color-border); color:var(--color-text); }
.table tbody tr:hover { background:var(--da-blue-soft); }
.table .num { text-align:right; font-variant-numeric:tabular-nums; }

Alerts / banners

.alert { display:flex; gap:.7rem; padding:var(--space-4); border-radius:var(--radius-md);
  border:1px solid var(--color-border); background:var(--color-bg-subtle); color:var(--color-text); }
.alert-info    { background:var(--da-blue-soft); border-color:#bcd2fb; }
.alert-success { background:#E6F4EC; border-color:#bfe3cd; }
.alert-warning { background:#FCF1E0; border-color:#f0d8a8; }
.alert-error   { background:#FBEAEA; border-color:#f2c2c2; }

Toasts

.toast { display:flex; align-items:center; gap:.7rem; background:var(--da-ink); color:#fff;
  padding:.8rem 1.1rem; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); font-size:var(--text-sm); }
.toast .dot { width:8px; height:8px; border-radius:50%; background:var(--da-cyan); }

Modal / dialog

.overlay { position:fixed; inset:0; background:rgba(26,26,26,.45); display:grid; place-items:center; z-index:100; }
.modal { background:var(--color-bg); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:min(520px,92vw); padding:var(--space-8); }
.modal h3 { margin:0 0 var(--space-2); font-size:var(--text-xl); }
.modal .actions { display:flex; gap:var(--space-3); justify-content:flex-end; margin-top:var(--space-6); }

Accordion

.acc { border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; }
.acc summary { list-style:none; cursor:pointer; padding:var(--space-4); font-weight:var(--weight-medium);
  display:flex; justify-content:space-between; align-items:center; }
.acc summary::-webkit-details-marker { display:none; }
.acc[open] summary { color:var(--color-primary); }
.acc .body { padding:0 var(--space-4) var(--space-4); color:var(--color-text-muted); }

Footer

.footer { background:var(--da-blue); color:var(--color-text-on-dark); padding:var(--space-16) var(--container-pad); }
.footer a { color:rgba(255,255,255,.8); text-decoration:none; }
.footer a:hover { color:var(--da-white); }

Use assets/logo-white.svg on the blue/dark footer.

Design Language

Captured from the Double A Brand Visual Identity Guidelines 2023. This is the "feel" that makes a page recognizably Double A beyond just colors and fonts.

Brand personality (let it guide tone & layout)

• Active Attitude — premium global brand that goes "beyond paper," supporting both

work and play.

• Younger — bright, smart, witty, positive.
• Active — frictionless, smooth experience.
• Modern — minimalism, but in a popular/approachable way.

Translate that to UI: clean, confident, lots of white space, crisp blue accents, quick and frictionless interactions, nothing fussy or heavy.

Core Signature 1 — the triangle / diagonal motif

The brand's signature graphic element is an angular, diagonal composition built from the three blues:

• a large brand-blue (#004DF4) block,
• a cyan (#00E5F9) triangle cutting across it,
• a smaller light-blue (#467DFA) triangle.

It appears as banner headers, corner accents (e.g. top-left of a page or header bar), and section dividers. It's what the eye reads as "Double A" instantly. Use it:

• as a header/hero accent (a diagonal blue shape with the cyan spark),
• as a corner flourish (top-left triangle, as on the corporate website),
• as a band/divider between sections.

Keep it as flat color shapes with clean diagonal edges — no gradients, no noise.

Reusable CSS for the corner motif

/* Top-left diagonal "Core Signature" corner flourish */
.da-corner { position: relative; overflow: hidden; }
.da-corner::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 160px; height: 120px; pointer-events: none;
  background:
    linear-gradient(135deg, var(--da-cyan) 0 38%, transparent 38%),
    linear-gradient(125deg, var(--da-blue) 0 60%, transparent 60%);
}

Header band with the motif (inline SVG, scales cleanly)

<svg class="da-band" viewBox="0 0 1200 120" preserveAspectRatio="none" aria-hidden="true">
  <polygon points="0,0 520,0 360,120 0,120" fill="var(--da-blue)"/>
  <polygon points="360,0 560,0 460,120 300,120" fill="var(--da-cyan)"/>
  <polygon points="300,120 460,120 360,120" fill="var(--da-blue-light)"/>
</svg>

Layout principles

• Generous white space. White (or cloud #F4F7FC) dominates; blue is the accent.
• HEADLINE + SUB-HEADLINE pattern. Bold blue headline, smaller semibold

sub-headline, then body — straight from the guideline's content layouts.

• Two surface modes:
• Light — white background, ink/blue text, blue accents (default for most pages).
• Blue — solid #004DF4 (or the motif) background, white text (for heroes,

feature bands, footers, CTAs).

• Premium minimalism. Flat color, soft shadows, rounded corners (--radius-*),

no heavy borders, no clutter. Echo the cleanliness of a fresh sheet of paper.

Corporate vs Advertising

• Corporate / product / about (Brand C.I.): blues only, very clean.
• Campaign / promo (Advertising C.I.): may add one accent color (pink/orange/

yellow/mint/indigo) for energy. Still anchored by the blues.

Visual Graphics

Decorative and data-visual elements that carry the Double A look beyond plain components. Built on the three brand blues. See references/design-language.md for the "Core Signature 1" concept; this file is the practical toolbox. All use the tokens.

Contents

• Core Signature motif — variants
• Section dividers
• Decorative watermark / backdrop
• Data visualization palette
• Iconography
• Imagery & photo treatment
• Do / Don't

Core Signature motif — variants

The angular triangle in brand-blue + cyan + light-blue. Keep it flat color, clean diagonal edges, no gradients, no noise.

Corner flourish (top-left):

.da-corner { position:relative; overflow:hidden; }
.da-corner::before { content:""; position:absolute; top:0; left:0; width:170px; height:130px; pointer-events:none;
  background:
    linear-gradient(135deg, var(--da-cyan) 0 38%, transparent 38%),
    linear-gradient(122deg, var(--da-blue) 0 60%, transparent 60%); }

Header / hero band (inline SVG, scales to any width):

<svg viewBox="0 0 1200 320" preserveAspectRatio="none" aria-hidden="true" style="width:100%;height:100%">
  <polygon points="0,0 620,0 420,320 0,320"   fill="#004DF4"/>
  <polygon points="430,0 660,0 520,320 330,320" fill="#00E5F9"/>
  <polygon points="300,320 520,320 410,320"   fill="#467DFA"/>
</svg>

Bottom-right accent (mirror of the corner):

.da-corner-br { position:relative; overflow:hidden; }
.da-corner-br::after { content:""; position:absolute; right:0; bottom:0; width:170px; height:130px; pointer-events:none;
  background:
    linear-gradient(-45deg, var(--da-cyan) 0 38%, transparent 38%),
    linear-gradient(-58deg, var(--da-blue) 0 60%, transparent 60%); }

Use one motif per surface — corner OR band, not both competing.

Section dividers

Slanted edge between a blue band and white, echoing the diagonal language:

.slant-top { clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%); }    /* angled top edge */
.slant-bottom { clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); }   /* angled bottom edge */

Apply to a blue .section so its edge cuts diagonally against the next white section.

Decorative watermark / backdrop

A faint oversized Square Mark or triangle behind a hero/quote — subtle, never competing with text:

.watermark { position:relative; overflow:hidden; }
.watermark > .mark { position:absolute; right:-40px; bottom:-40px; width:280px; opacity:.06; pointer-events:none; }

Keep opacity ≤ 0.08 and behind content. On blue backgrounds use white at low opacity.

Data visualization palette

For charts/graphs (dashboards, reports). Order matters — start with brand blue, then the supporting blues, then bring in accent hues only when you need more than three series.

// Sequential / single-metric (light → dark): use the brand-blue tint ladder
const sequentialBlues = ['#E5EDFE','#B2C9FC','#80A6FA','#467DFA','#1A5FF5','#004DF4'];

// Categorical (multi-series): blues first, accents to extend
const categorical = ['#004DF4','#00E5F9','#467DFA','#4B53F2','#FF8533','#88F2CB','#FF6BFF','#F2F250'];

// Semantic: up/good vs down/bad
const semantic = { positive:'#1E9E5A', negative:'#E23B3B', neutral:'#5B6472' };

Chart rules: gridlines in --da-line; axis labels in --da-slate; one highlighted series in brand blue with the rest muted; tooltips on --da-ink with white text. Avoid rainbow palettes — lead with blue, stay restrained.

Iconography

• Style: line / outline icons, ~1.75px stroke, rounded caps/joins — clean and modern

to match Poppins. (Lucide, Phosphor, or Material Symbols Outlined all fit.)

• Default icon color --color-text-muted; active/brand icons --color-primary.
• Don't mix filled and outline icon sets in the same UI.
• Keep a consistent box (e.g. 20px or 24px) and optical alignment with text.

Imagery & photo treatment

• Prefer bright, optimistic, people-and-work imagery (the brand's "work & play" Active

Attitude). Lots of light, clean backgrounds.

• For text over photos, add a brand-blue overlay (rgba(0,77,244,.55)) or place text on

a solid blue block beside the image — never put the logo on a busy photo (use the white logo on a solid area).

• Rounded corners (--radius-lg) on photos to match cards.

Do / Don't

Do keep the motif flat and diagonal; lead visuals with blue; use cyan as the spark; keep decoration subtle and behind content.

Don't add gradients/shadows/3D to the motif or logo; don't use the advertising accent colors on corporate dashboards; don't build busy rainbow charts; don't let watermarks reduce text contrast below WCAG AA.

Layouts

Full-page skeletons. Compose them from the pieces in references/components.md and the visual elements in references/graphics.md. All use assets/tokens.css.

Contents

• Page container & responsive rules
• Marketing / landing page
• Dashboard / app shell (sidebar + topbar)
• Content / article page
• Auth (login) screen

Page container & responsive rules

.container { max-width:var(--container-max); margin:0 auto; padding-inline:var(--container-pad); }
.section  { padding:var(--space-24) 0; }
.section.alt { background:var(--color-bg-subtle); }   /* alternate bands of cloud */
.grid { display:grid; gap:var(--space-6); }
.grid-2 { grid-template-columns:repeat(2,1fr); } .grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr;} }

Mobile-first: stack to one column, keep generous spacing, never let text touch edges (the --container-pad clamp handles this).

Marketing / landing page

Order that fits the brand (clean, premium, blue accents):

1. Navbar (logo left or per project, primary CTA right). 2. Hero with the Core Signature corner flourish (.da-corner), a bold blue/ink headline using the "Better X, Better Y" emphasis pattern, one primary CTA. 3. Feature grid (.grid-3 of .cards) on white. 4. Stat band or blue feature band with the motif (references/graphics.md). 5. Alternating `.section.alt` content blocks (cloud background) for rhythm. 6. CTA band (solid blue + white logo + white→blue button). 7. Footer (blue/ink, white logo).

assets/example-landing.html is the full reference implementation.

Dashboard / app shell (sidebar + topbar)

The standard internal-tool layout: fixed sidebar, sticky topbar, scrolling content.

<div class="app">
  <aside class="sidebar"><!-- see components.md > Sidebar --></aside>
  <div class="app-main">
    <header class="topbar">
      <div class="crumbs"><a href="#">Home</a><span class="sep">/</span><span aria-current="page">Dashboard</span></div>
      <div class="topbar-right">
        <input class="input search" placeholder="Search…">
        <button class="btn btn-secondary btn-sm">+ New</button>
        <div class="avatar">CA</div>
      </div>
    </header>
    <main class="content">
      <h1 class="page-title">Production Overview</h1>
      <div class="grid grid-4"><!-- .stat cards --></div>
      <div class="grid grid-2" style="margin-top:var(--space-6)"><!-- .card charts/tables --></div>
    </main>
  </div>
</div>

.app { display:flex; min-height:100vh; background:var(--color-bg-subtle); }
.app-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4); padding:var(--space-3) var(--space-6); background:var(--color-bg);
  border-bottom:1px solid var(--color-border); }
.topbar-right { display:flex; align-items:center; gap:var(--space-3); }
.input.search { padding:.5rem .9rem; min-width:220px; }
.content { padding:var(--space-8) var(--space-6); }
.page-title { margin:0 0 var(--space-6); font-size:var(--text-2xl); color:var(--color-text); }
@media (max-width:860px){
  .sidebar { position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%); transition:transform .2s; z-index:60; }
  .sidebar.open { transform:none; }
  .input.search { display:none; }
}

Content area sits on cloud (--color-bg-subtle); cards/topbar are white — that contrast defines the panels. Use the light sidebar by default; the dark (brand-blue) sidebar variant when you want a stronger brand presence.

Content / article page

Single readable column. Generous line-height (Thai-friendly), blue headings, blue links.

.article { max-width:720px; margin:0 auto; padding:var(--space-16) var(--container-pad); }
.article h1 { font-size:var(--text-3xl); color:var(--color-text); }
.article h2 { font-size:var(--text-2xl); color:var(--color-primary); margin-top:var(--space-12); }
.article p, .article li { color:var(--color-text); line-height:var(--leading-normal); }
.article a { color:var(--color-primary); }
.article img { max-width:100%; border-radius:var(--radius-lg); }

Auth (login) screen

Split layout: a brand-blue panel with the motif on one side, the form on the other.

.auth { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
.auth-brand { position:relative; overflow:hidden; background:var(--da-blue); color:#fff;
  display:grid; place-content:center; padding:var(--space-24); }
.auth-form { display:grid; place-content:center; padding:var(--space-24); }
.auth-form .box { width:min(360px,90vw); display:grid; gap:var(--space-4); }
@media (max-width:760px){ .auth{ grid-template-columns:1fr;} .auth-brand{ display:none;} }

Put a .da-corner flourish or the band motif (references/graphics.md) on .auth-brand, with the white logo and a one-line tagline.

Logos

Per the Double A Brand Visual Identity Guidelines 2023, the identity has two separate elements that must never be combined into one lockup:

1. Brand Logotype — the italic "Double A" wordmark. 2. Square Mark — the blue paper-ream square icon (the "a / A" box).

⚠️ Rule #1 from the guideline: **Do not use the Square Mark together with the Brand

Logotype** as a single combined logo. Use one or the other in a given spot.

Files in this skill

TODO(brand-owner): these SVGs are clean recreations matching the official style

(blue italic wordmark; blue square mark). Replace them with the **official vector

logo files** from the brand team before company-wide rollout. Keep the same filenames.

Pick the variant by background: light → logo-primary; blue/dark/photo → logo-white; tiny space → logo-mark.

Clear space & minimum size

• Keep clear space around the logo equal to at least the cap-height of the wordmark on

all sides. Nothing intrudes into that zone.

• Minimum on-screen width: wordmark 120px; Square Mark 24px. Below that, switch

to the mark.

Placement

• Header: the guideline's layouts place the Brand Logotype top-right of the header

bar (often paired with the Core Signature triangle motif at top-left). Top-left is also acceptable for web headers — be consistent within a project. The logo links home.

• Footer on dark/blue: use logo-white.svg.

Improper use — the 9 rules from the guideline (never do these)

1. ❌ Don't use the Square Mark together with the Brand Logotype. 2. ❌ Don't change the Square Mark proportion. 3. ❌ Don't change the logotype proportion (no stretching/squashing). 4. ❌ Don't change the logotype design. 5. ❌ Don't change the logotype color (no off-brand colors — only the approved blue / white). 6. ❌ Don't add any effects to the logotype (no gradients). 7. ❌ Don't apply any effects/transforms (no warping, rotating, skewing). 8. ❌ Don't create a stroke/outline around the logotype. 9. ❌ Don't place the logotype on a complicated/busy background (use a clean area, or the white logo on a solid blue block).

In code

<!-- header on light background -->
<a href="/" class="brand"><img src="assets/logo-primary.svg" alt="Double A" width="140" height="40"></a>

<!-- footer / dark or blue background -->
<img src="assets/logo-white.svg" alt="Double A" width="120" height="34">

<!-- favicon -->
<link rel="icon" type="image/svg+xml" href="assets/logo-mark.svg">

Always include alt="Double A".

Typography

Official brand typefaces from the Double A Brand Visual Identity Guidelines 2023:

• English → Poppins (weights shown in the guide: Regular, SemiBold, Bold, Extra Bold; Light is also available)
• Thai → Prompt (weights: Light, Regular, SemiBold, Bold)

Both are free on Google Fonts and cover their scripts cleanly, so use them directly on the web. Keep these two as the only families — don't introduce others.

Note: the logotype "Double A" is a custom italic mark (Creato Display) and is part

of the logo, not a text typeface. Never set body or headline text in an italic

logo style — use Poppins/Prompt for all real copy.

Font stack

--font-sans: "Prompt", "Poppins", -apple-system, "Segoe UI", Roboto, sans-serif;
--font-display: "Poppins", "Prompt", sans-serif;

Prompt is listed first so Thai glyphs use the Thai brand face; Poppins handles Latin. For predominantly-English pages you can lead with Poppins instead.

Load from Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800&family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet">

Type scale

The guideline's content layouts use a HEADLINE (bold, brand blue) with a smaller SUB-HEADLINE beneath it, then body text — mirror that hierarchy.

Weights & line-height

• Headlines: --weight-bold (700) / --weight-extrabold (800). Brand blue or ink.
• Sub-headlines / labels: --weight-semibold (600).
• Body: --weight-regular (400).
• Body line-height --leading-normal (1.6); headlines --leading-tight (1.2).
• Thai needs breathing room — don't drop paragraph line-height below ~1.5, and never

letter-space Thai (it breaks the script). Light tracking is fine only on short Latin overlines/labels.

Rules

• Headlines in brand blue (#004DF4) or ink — the guide favors blue headlines on white.
• Never use cyan/light-blue for running text (contrast too low).
• Keep ~2–3 sizes per content area; hierarchy comes from size + weight + color.
• Comfortable line length: ~60–75 characters Latin, a little shorter for Thai.