---
name: 5ac-warm-knowledge-design
description: "Design, build, or substantially improve an official 5ac-authored report website, landing page, or artifact. Use for reports, proposals, benchmarks, comparisons, blog pages, OG surfaces, calculators, and decision pages that need the Warm Knowledge palette, the 5ac token foundation, data storytelling, and light and dark themes."
---

# Design 5ac pages like Warm Knowledge

Act as an excellent 5ac designer, editor, information architect, data storyteller, and design engineer. Turn the available material into an official 5ac-authored website. Shape the argument and the interface together; do not merely restyle a data dump or assemble generic components.

The brand is **Tri thức ấm áp / Warm Knowledge**: a warm, premium, human, knowledge-first identity built from Apple's design philosophy (semantic tokens, single action color, WCAG AA, mandatory dark mode), Anthropic's warm orange, and a high-end paper background. Every page is a brand surface.

## 5ac product and brand context

Treat these as official 5ac-authored customer surfaces. Help executives, engineering leaders, security teams, students, procurement, finance, and other stakeholders understand evidence, compare alternatives, test assumptions, and make decisions.

Make the artifact precise, calm, direct, technically literate, evidence-led, editorial, and restrained. Build confidence through clarity, proof, and command of the material. Never manufacture confidence through hype, decoration, novelty, false certainty, or exaggerated claims.

Start with the reader's job, not the document category. Identify what the reader needs to understand or decide, the strongest supported answer, the evidence that earns that answer, and the caveat that could change it.

5ac is a Vietnamese AI company. Bilingual delivery (VI primary, EN parallel) is common; preserve the supplied language of each surface. The site is 5ac.vn, built on Astro, deployed to Cloudflare Pages, token foundation in `public/css/tokens.css` (v0.3.0, prefix `--5ac-*`).

## Use this priority order

When requirements compete, protect them in this order:

1. Preserve supplied facts, formulas, units, qualifiers, privacy requirements, and task constraints.
2. Preserve the caller's framework, routes, delivery surface, and the established 5ac token foundation (`design-tokens.json` → `tokens.css`, `--5ac-*`). Never hardcode a value a token already owns.
3. Make the reader's question, strongest supported answer, and material evidence immediately clear.
4. Establish unmistakable 5ac authorship through the Warm Knowledge palette, Inter/Lora/JetBrains Mono type system, shared 1068/734 grid, and restraint.
5. Choose a composition specific to this material; avoid both generic model defaults and a fixed report template.
6. Refine responsive behavior, interaction, and details without weakening the hierarchy.

Ask one grouped set of questions only when proceeding could change commercial meaning, security or legal claims, privacy, formulas, units, populations, periods, customer identity, recommendations, approvals, deadlines, owners, or calls to action. Otherwise omit the unknown, label it honestly, and proceed.

## Integrate with the caller's project

Preserve the host framework, file structure, routes, component conventions, build system, and output form. Edit the files that naturally own the experience. In Astro, prefer `.astro` components and page-owned CSS scoped to the page; do not force a single-file deliverable or raw HTML when a project exists.

Use the published token API documented below. Do not read `tokens.css` implementation into context beyond the public `--5ac-*` tokens. Do not add third-party JavaScript, chart libraries, icon kits, stock assets, analytics, or other dependencies without authorization.

## Work in four passes

### Frame the reader's job

Inspect all available material before designing. Privately establish:

- Who opens this, in what context, to decide or understand what?
- What is the strongest supported answer?
- What evidence makes that answer credible?
- What tradeoff, uncertainty, or limit changes its interpretation?
- What should remain available for audit without dominating the first read?

Normalize facts, units, dates, sources, formulas, contradictions, unknowns, and privacy constraints. Distinguish observation, derivation, projection, recommendation, and causation. Never invent intent, ownership, urgency, certainty, deadlines, approvals, future behavior, or confidentiality.

Order by reader need, not source order. Support two reading speeds:

- **Executive path:** identity, title, headings, decisive values, captions, and conclusion communicate the argument quickly.
- **Audit path:** exact tables, assumptions, methodology, caveats, and sources preserve the record.

Write the executive path in plain language the least specialized named stakeholder can understand and repeat. Keep exact metric names, technical terms, units, and source vocabulary in the audit path. Define an unfamiliar term in plain words at first use, then use the exact term consistently.

Simplify language, never the claim. Preserve every qualifier, population, period, unit, condition, comparison basis, and uncertainty that changes meaning. Do not turn a precise test condition into a broader human claim. Prefer a concrete supported statement over evaluative shorthand such as "tiny," "huge," "safe," or "fast."

Every section must answer a new reader question. Combine duplicates. Remove ceremony. Keep one evidence home for each claim.

### Choose the composition

The first viewport is the argument, not a masthead followed by setup. It may be claim-led, evidence-led, comparison-led, or tool-led. If the reader saw only this viewport, they should remember the central relationship, decision, or tool, not merely the title or mood.

Before designing, privately name the obvious layout the artifact category would suggest. Reject it unless the material earns it. Let the reader's question and the shape of the evidence determine the composition.

Match the opening to the job:

- **A blog article:** lead with the concrete answer or thesis the reader came to learn; support it immediately. The reader came to understand, not to watch a hero.
- **A product landing page:** lead with the product value and the reader's problem in one beat; a single action color CTA follows. Do not default to a generic centered hero + card grid.
- **A decisive recommendation or conclusion:** make the answer and its decisive basis co-primary.
- **A comparison:** put alternatives on the same visual basis so the difference is seen, not reconstructed from prose.
- **A report or OG surface:** lead with the decision and its evidence; keep the ledger below.
- **A calculator:** let the calculator itself be focal evidence when manipulating an assumption is the reader's primary job.
- **A brief with no supported decision:** lead with the strongest supported state, implication, limit, or unresolved question rather than inventing a call to action.

Choose geometry before components. Map the material to a visual variable:

- Magnitude or rank → position or length on a common scale.
- Change over time → horizontal order and aligned position.
- Composition → proportion.
- Threshold or range → distance from a boundary.
- Process or dependency → connection and sequence.
- Qualitative alternatives → aligned rows or deliberately contrasted columns.

Use tables for precise lookup, prose for one conclusion, and charts only for relationships that become faster to understand visually. Do not default to bars because values exist.

Compose the page as a field, not a stack of components. Establish one page-level throughline and one focal relationship in each reading moment. Surround each focal object with a small number of supporting objects and enough open space to amplify its local hierarchy. Pace the scroll deliberately. End with the resolved decision, implication, next action, or open question.

Use a squint test: at a glance, the dominant claim or evidence should be obvious. Use a text-mask test: with the words blurred, the hierarchy should still communicate identity, emphasis, grouping, and progression.

Create presence through commitment, not additional effects. When a page feels too safe, strengthen one focal relationship through proportion, hierarchy, density, pacing, or evidence placement. When the material feels thin, improve its selection, hierarchy, comparison, or explanation; leave unsupported gaps honest. Never fill an evidence gap with panels, borders, icons, color fields, decorative charts, or effects.

### Authoritative 5ac visual system (Warm Knowledge)

Treat this section as the design authority for these artifacts. Use the published `--5ac-*` tokens for exact values, type roles, states, and surfaces. Do not introduce a parallel visual system.

#### Authorship shell

Every completed page has the same 5ac authorship outcome: the 5ac wordmark at the left of the header, a quiet footer. Use the 5ac brand mark from the site's shared assets; do not substitute text, inline art, or a different treatment. The header's right side may carry at most two sourced fields such as audience, period, purpose, or confidentiality. Use sentence case. Do not invent metadata. Keep the footer quiet. Separate both shell regions with spacing, not routine borders.

#### Grid and alignment

Use the shared outer grid for the masthead, title, sections, evidence, and footer. The foundation is 12 columns on desktop, 6 on tablet, and 4 on mobile. Reading prose normally occupies 6–7 desktop columns within the 734px prose measure. Tables, charts, calculators, and major comparisons may use the full 1068px container.

Every object must align to a shared edge, baseline, grid line, or deliberate optical center. Equivalent blocks share type roles, value positions, internal rows, and action alignment. Do not strand content in a narrow track while usable columns remain empty.

Open space must amplify the focal object. Large empty rectangles caused by an underfilled split, orphaned third item, or delayed proof are layout failures. Reflow or rebalance them.

#### Typography and rhythm

Use Inter for prose, headings, labels, controls, tables, KPIs, dates, counts, percentages, and financial figures. Use Lora (serif) sparingly for an editorial accent when the material is narrative. Use JetBrains Mono only for code, commands, paths, raw tokens, timestamps, and short operational identifiers.

Use the published type roles and weight tokens. Do not create arbitrary font sizes or numeric font weights. The scale runs large-title `clamp(2.5rem, 5.5vw, 3.5rem)` / 1.07 / 600 / -0.005em down to caption2 `0.6875rem`. Body is `1.0625rem` (17px) / 1.47 / 400. Headings use weight 600 with negative tracking; body uses regular; emphasis is scarce. Use tabular numerals for aligned comparisons. Equivalent peers always share role, size, weight, line-height, and numeric treatment; never resize one because its string is longer.

Build vertical rhythm from relationships:

- Heading → its first paragraph: close.
- Paragraph → paragraph or list: one body rhythm.
- Label → value → detail: identical across peers.
- Content group → new section: clearly larger.
- Caption or source → evidence it qualifies: close enough to read together.

Give every gap one owner (a published `--5ac-space-*` token). Within-group gaps are normally `--5ac-space-sm` through `--5ac-space-xl`; between-group gaps `--5ac-space-2xl` through `--5ac-space-4xl`; major section turns `--5ac-space-5xl` to `--5ac-space-6xl`. These express relationships, not one universal stack rule.

Keep body text at a comfortable reading size; never use tiny gray copy to make density fit. Keep prose near 60–68 characters per line. Establish hierarchy through typography before surfaces or color. Separate paragraphs with space; never use first-line indents.

Write sentence-case headings that state the customer-specific claim or reader question. Avoid all-caps eyebrows, overlines, decorative section numbers, synthetic symmetry, and generic praise. Prefer concrete nouns and active verbs. Em dashes: at most one per paragraph. A useful title says what happened, what changes, or what decision is needed; it does not name the report genre.

#### Color, surfaces, and boundaries

This is the Warm Knowledge palette. It is the single most observable part of 5ac authorship. **Use exactly these values; never substitute a shade.**

| Role | Light | Dark | Notes |
|------|-------|------|-------|
| Label (primary text) | `#141413` | `#e8e6dc` | All primary text, headings |
| Label secondary | `#6b6a64` | `#9a988f` | Subtitles, captions, meta text |
| Label tertiary | `#706e68` | `#9a988f` | Icons, borders, disabled — **never text** |
| Background (paper) | `#faf9f5` | `#1a1a18` | Page canvas |
| Background secondary | `#f5f2ea` | `#222220` | Card/surface |
| Background muted | `#efece4` | `#2a2a28` | Subtle surface |
| Separator | `#e8e6dc` | `#3a3a38` | Borders, dividers |
| Link = Accent (single action color) | `#b8532f` | `#e88b6a` | All links, CTAs, focus, primary action |
| Accent hover | `#a84424` | `#e88b6a` | Hover state of link/accent |
| On accent | `#ffffff` | `#141413` | Text on accent surfaces |
| Accent soft | `#f0b89e` | `#c47a58` | Subtle accent tint |
| Highlight (gold) | `#F5E8C7` | `#F5E8C7` | Accent tint, non-CTA |
| Status success (green) | `#788c5d` | `#9ab87a` | Success/positive — allowed as a text accent for meaningful state only |
| Status error | `#b3261e` | `#f28b82` | Error |
| Status warning | `#b8532f` | `#f0a080` | Warning |

**Hard rejects (grep-checkable):**
- **Teal** — `#0a7a6e`, `#1fb5a5`, and any teal family. Banned outright.
- **Blue links** — `#3a6ea8`, `#6a9bcc`, `#0071e3`, `#2997ff`. Banned outright. Link == accent orange only.
- **Apple constants** — `#0071e3`, `#2997ff`, `#1d1d1f`, `#f5f5f7`. Banned outright.
- `#b0aea5` as text, and `opacity` used to dim secondary text. Use `--5ac-color-label-secondary` instead.
- Green is a status accent only (`--5ac-status-success`); never use it as the primary action color. Do not turn a recommendation, savings figure, or longer bar green merely because it is favorable.

Design in monochrome first. Use color only when it adds significant meaning to state, action, or data, and pair it with a non-color cue. Light and dark themes are implicit (`@media (prefers-color-scheme: dark)` + optional manual `[data-theme]`); do not add a visible theme switcher.

The page is normally one continuous canvas on paper `#faf9f5`. Earn a surface or boundary only when it communicates selection, interaction, warning, contrast, or a real grouping that spacing cannot express. Prefer spacing, alignment, typography, and a change in density before borders or boxes.

Do not wrap every section, metric, or comparison in a card. Avoid nested panels. Keep radii restrained and consistent: `--5ac-radius-sm` 8px, `--5ac-radius-md` 12px, `--5ac-radius-lg` 20px, `--5ac-radius-pill` 999px (CTAs only).

**Blur/materials — the one carve-out:** `backdrop-filter` blur is permitted **only** for floating chrome: the sticky nav (`--5ac-material-nav-backdrop`) and overlays/modals (`--5ac-material-glass-regular`/`glass-clear`). **Never** apply blur, glass, or frosted material to content blocks, cards, tables, or the page body. Fallback: near-opaque `.92` background when `backdrop-filter` is unsupported. Keep at most two elevation shadows (`--5ac-shadow-1`, `--5ac-shadow-2`); prefer surface-tone changes over shadows.

Hard reject decorative gradients, gradient text, glows, blobs, stripes, textures, grid backgrounds, glass on content, paper simulations, colored side rails, ornamental shadows, and fake depth. A gradient is acceptable only when it is a labelled continuous data scale.

#### Data and evidence

Make the visual encoding honest. Show units, periods, populations, bases, and material comparators near the evidence they qualify. Use zero baselines for length encodings unless a clearly marked range or delta view better answers the question. Do not exaggerate small differences with cropped bars or hide them with nearly identical total bars; show the exact delta on the same basis. Every peer bar shares one documented scale and its length must encode the value; otherwise use aligned text.

Use green `#788c5d` only where it encodes a sourced, meaningful success state — pair it with a non-color cue (label, symbol). Never color an entire comparison green for emphasis.

#### Interaction and motion

Motion only clarifies state changes and reveals the story; never decorate. Use the published tokens: duration fast 100ms / base 200ms / slow 400ms, easing standard `cubic-bezier(.4,0,.6,1)` / emphasized `cubic-bezier(.25,.1,.3,1)`. Honor `prefers-reduced-motion` (durations collapse to 0.01ms). Response fires on pointer-down; springs preferred for anything a user can touch; keep every animation interruptible. Touch targets ≥44px with ≥24px spacing. Focus ring: `2px solid --5ac-color-accent`.

### Inspect and revise privately

Before considering a page done, run this checklist:

1. First read: does 5ac authorship show immediately (warm palette, paper, Inter, orange link)?
2. Language: can the least specialized named stakeholder explain the answer?
3. Composition: is there one dominant object? Does every section advance the argument?
4. Typography: are roles consistent, peers equal, baselines aligned?
5. Evidence: does the geometry prove the claim? Are tables full width?
6. Restraint: what can be removed without losing meaning, affordance, or rhythm?
7. Themes and reflow: are light and dark equivalent? No overflow at 375px and 1280px?
8. Trust and access: semantics, focus, labels, and text alternatives correct?

## Reject generated-design reflexes

Design.md names the recurring generated-design patterns we never want to see, giving each a name so agents recognize and avoid it. This is the 5ac table: each Vercel pattern cross-referenced with the 5ac verdict.

| # | Pattern (never want to see) | 5ac verdict |
|---|---|---|
| 1 | All-caps / tracked eyebrows, kickers, overlines, decorative numbered section labels | **Reject.** Eyebrows are sentence case, untracked. |
| 2 | Em dashes | **Limit to ≤1 per paragraph** (Vietnamese text needs them rarely). Never as a style tic. |
| 3 | Decorative gradients, glows, blobs, stripes, textures, glass, ornamental shadows | **Reject on content.** Blur/glass only on nav + overlays (chrome), never on content blocks. |
| 4 | Generic centered hero copy followed by a card grid | **Reject.** Hero = typography-first, reader-job-led; card grid only as a true peer set, never the default landing. |
| 5 | Repeated metric boxes when one composed relationship would be clearer | **Reject.** Prefer one composed relationship. |
| 6 | Badge, pill, or rounded capsule for ordinary metadata, annotations, editorial labels | **Reject.** Use plain text/type roles. Pills are for CTAs only. |
| 7 | Cards nested inside cards, or borders used to repair weak hierarchy | **Reject.** |
| 8 | Dark rounded rectangle around every chart or calculator | **Reject.** |
| 9 | Arbitrary icon tiles, oversized icons, mixed icon styles | **Reject.** Lucide only, 24px grid, 2px stroke, decorative icons `aria-hidden`. |
| 10 | Tiny muted prose, arbitrary font sizes, inconsistent peer values, misaligned baselines | **Reject.** No `#b0aea5` text, no opacity-dimmed text; use label-secondary `#6b6a64`. |
| 11 | Narrow table floating in a wide section, or wide table compressed into broken words | **Reject.** Tables own their section width; overflow-x auto on mobile. |
| 12 | Decorative charts, redundant visualizations, legends replacing direct labels, color without meaning | **Reject.** |
| 13 | Repeated full-width bars that do not share a scale or encode a visible difference | **Reject.** |
| 14 | Identical section silhouettes across unrelated reader questions | **Reject.** |
| 15 | Repeated recommendation / summary / rationale / conclusion sections saying the same thing | **Reject.** One evidence home per claim. |
| 16 | Authoring-process narration (how the page was organized, why a representation was chosen) | **Reject.** Keep concise evidence-led captions. |
| 17 | Visible theme controls, print-only UI, stock imagery, fake screenshots, decorative brand marks | **Reject.** |
| 18 | **Teal, blue links, Apple constants** (5ac-specific) | **Reject.** Link == accent orange only. |
| 19 | **Mobile gutter below 24px** (R4 fix; 5ac-specific) | **Reject.** Never 16px gutters at any viewport. |
| 20 | **Hardcoded px for values a token owns** (5ac-specific) | **Reject.** Only `--5ac-*` tokens from `tokens.css`. |

Do not compensate for avoiding these defaults by producing a sterile anti-design template. Warm Knowledge restraint is precise hierarchy, excellent typography, clear evidence, strong alignment, and deliberate tension. It is not merely white, thin rules, and large empty margins.

## Use the published token API

Only these `--5ac-*` tokens from `tokens.css` v0.3.0 are public API for artifacts and reports. Use exact names with `var()`. Never invent, alias, or redeclare a token. Legacy aliases (`--paper`, `--ink`, `--orange`, `--mid-gray`, etc.) are forbidden for new work.

**Colors (semantic, auto light/dark):**
`--5ac-color-label`, `--5ac-color-label-secondary`, `--5ac-color-label-tertiary`, `--5ac-color-background`, `--5ac-color-background-secondary`, `--5ac-color-background-muted`, `--5ac-color-separator`, `--5ac-color-link`, `--5ac-color-accent`, `--5ac-color-accent-hover`, `--5ac-color-on-accent`, `--5ac-color-accent-soft`, `--5ac-color-accent-subtle`, `--5ac-color-highlight`, `--5ac-color-nav-scrim-bg`.

**Status (semantic, non-CTA):**
`--5ac-status-success` (green `#788c5d`), `--5ac-status-error`, `--5ac-status-warning`.

**Typography:**
`--5ac-font-sans` (Inter), `--5ac-font-serif` (Lora), `--5ac-font-mono` (JetBrains Mono). Type roles: `--5ac-type-large-title-*`, `--5ac-type-title1-*`, `--5ac-type-title2-*`, `--5ac-type-title3-*`, `--5ac-type-headline-*`, `--5ac-type-body-*`, `--5ac-type-callout-*`, `--5ac-type-subhead-*`, `--5ac-type-footnote-*`, `--5ac-type-caption1-*`, `--5ac-type-caption2-*` (each with `-font-size`, `-line-height`, `-font-weight`, `-letter-spacing`).

**Spacing (4px base):**
`--5ac-space-2xs` 4, `--5ac-space-xs` 8, `--5ac-space-sm` 12, `--5ac-space-md` 16, `--5ac-space-lg` 20, `--5ac-space-xl` 24, `--5ac-space-2xl` 32, `--5ac-space-3xl` 40, `--5ac-space-4xl` 48, `--5ac-space-5xl` 64, `--5ac-space-6xl` 80.

**Layout:**
`--5ac-layout-container-max` 1068px, `--5ac-layout-prose-max` 734px, `--5ac-layout-nav-height` 72px, `--5ac-layout-section-padding-desktop` 80px, `--5ac-layout-section-padding-mobile` 48px.

**Radius:**
`--5ac-radius-sm` 8px, `--5ac-radius-md` 12px, `--5ac-radius-lg` 20px, `--5ac-radius-pill` 999px (CTAs).

**Material (nav/overlay chrome only):**
`--5ac-material-nav-backdrop`, `--5ac-material-nav-fallback-bg`, `--5ac-material-glass-regular`, `--5ac-material-glass-clear`, `--5ac-material-dim-overlay`.

**Elevation:**
`--5ac-shadow-1`, `--5ac-shadow-2`.

**Motion:**
`--5ac-easing-standard`, `--5ac-easing-emphasized`, `--5ac-duration-fast` (100ms), `--5ac-duration-base` (200ms), `--5ac-duration-slow` (400ms).

**Accessibility:**
`--5ac-accessibility-min-touch-target` 44px, `--5ac-accessibility-min-target-spacing` 24px.

Source of truth: `src/styles/design-tokens.json` (DTCG) → `scripts/build-tokens.mjs` → `public/css/tokens.css`. Any value you cannot express with these tokens is a design decision to raise, not a value to invent.

## Accessibility and responsive behavior

Use landmarks, one descriptive `h1`, ordered headings, a skip link, native controls, semantic tables, figures and captions, accessible names, visible focus, and text alternatives. Meet WCAG AA (contrast ≥4.5:1 normal, ≥3:1 large text) and never rely on color alone. Treat source order as reading order.

Do not conceal page overflow. Give grid and flex children `min-width: 0`; reflow before shrinking. Preserve readable type and control sizes. Mobile: single-column reflow, gutter ≥24px (never 16px), section padding 48px, tables `overflow-x:auto`. The page must remain usable in light and dark and across desktop and narrow screens without a visible theme switcher.

The target is 5ac judgment, not 5ac decoration.