# Aigro Design System — v3

Brand baseline: the beta v3 standard dated 22 October 2026.
Public guide: /branding · Updated: 29 October 2026.

## Identity

AI + Growth = Aigro. Help Hong Kong small businesses and professionals use AI
for real outcomes. Trusted, welcoming, refined and growing.
Five signatures: paired dots, ten-segment growth ring, Gro and Ai, honey stars,
paper and ink. Use at least two per touchpoint.

## Colour roles

| Identity | Hex | Use |
| --- | --- | --- |
| Cream | #FBFAF9 | Everyday canvas, about 60% |
| Navy | #00142C | Text, primary actions, evening ground, about 25% |
| Teal | #1BC39A | Gro, progress, completion, about 9% |
| Ai blue | #2571E9 | Ai and AI assistance only, about 5% |
| Honey | #FFBB26 | Achievements, stars and fine certificate details, about 1% |
| Sand | #B9A47E | Learning-stage badges and certificate frames |
| Line | #E8E4DC | Fine borders |

One focal accent per screen. No decorative gradients, neon, glass effects or
heavy shadows. Logo artwork keeps its original colours; do not recolour it.

CSS variables in src/index.css own runtime values. Use Tailwind semantic tokens,
not hardcoded component colours. Legacy lime/ink tokens now mean navy primary
actions on light, cream primary actions on dark. on-accent supplies their
foreground. Teal/blue/honey artwork colours are not general-purpose text colours;
use contrast-tuned success, ai and honey-ink tokens for text. Status colours retain
their error/warning/success meanings. Draft/priority chips use honey-ink on
tint-honey in both themes to keep small status text above 4.5:1 contrast.
Status chips and mentor labels use the 13px caption minimum.
/branding shows live computed token values.

## Type and layout

Noto Sans HK for Chinese, Latin and numbers. PingFang HK / PingFang TC / system
sans are fallbacks. No separate serif display face. Body 400, headings 600,
large numbers 700. Code can use a monospace fallback when glyph alignment matters.

| Role | Size | Weight |
| --- | --- | --- |
| Display | 56px, reduced on mobile | 600 |
| Heading | 32px | 600 |
| Small heading | 18px | 600 |
| Body | 16px / 1.7 | 400 |
| Metadata | 13px minimum | 400 |
| Metric | 40px, tabular numbers | 700 |

Maximum reading measure 44rem. Section space 96px desktop / 64px mobile.
Cards use 20px corners and 1px borders. Pill buttons have at least 44px targets.
Keep visible keyboard focus. Feedback transitions <=300ms, strong ease-out,
hover transforms only on fine hover pointers; disable transforms for reduced
motion. Existing public routes retain their information architecture.

## Logo

Use the supplied navy PNG on light and white PNG on dark. Minimum width: 80px
screen / 20mm print. Clear space: at least the height of the wordmark's “a”.
Never stretch, retype, redraw, reorder dots, crop or add effects.
The supplied SVG wordmark downloads are PNG containers, not vector masters.
Obtain original vectors for large-format printing. The app mark is supplied PNG.

## Gro and Ai

Gro represents the member; Ai is the blue AI companion. Wave = welcome,
point = next step, think = processing, celebrate = achievement, empty = empty
state. Reuse all ten supplied SVG poses. Preserve proportions and colours;
no new expressions, clothing or 3D conversions. At most one Gro and one Ai in
an everyday viewport. A labelled asset index may display poses together.

## Brand modes and themes

Everyday: Cream, white cards and Navy type; Gro/Ai can guide the reader.
Occasions: Navy ground, fine Honey detail, official mark or approved real mentor
photography. No mascots on evening campaign materials. Pick one campaign mode
per page. Site dark mode is an accessibility/reading preference, distinct from
the campaign mode. Both themes must remain readable and operable. Mascot assets
in the guide stay on Cream specimen cards in either theme.

## Graphics and levels

Paired dots stay blue then teal. A growth ring has ten segments and a top opening
for the dots. Honey stars mark achievements. Ten names: 種子、發芽、長葉、成苗、
開花、結果、新星、恒星、星座、領航星. Five stages: learn, do, deliver, share, lead.
Unlock conditions remain undecided; displaying artwork does not activate rewards.
The live UI keeps its existing Lucide icons; the original custom 38-icon source
set is not present in this delivery. Do not claim it is included in the ZIP.

## Imagery and words

Reuse the beta artwork library. Covers establish context; spot illustrations
support one action; empty states explain the next step. Generated scenes are
illustrative, never proof of real attendance or outcomes. Human portraits require
original approved photography. Keep page titles and CTAs as accessible HTML.

Use Hong Kong Traditional Chinese and conversational Cantonese where appropriate.
Short, direct sentences; verb-led buttons. No emoji, fabricated results, unsupported
rankings, urgency or guarantees. Explain unknowns and preserve attribution.

## Downloads and release checks

/brand/aigro-press-kit.zip contains the public asset collection, this specification,
usage notes and CSS tokens. Rebuild with python3 scripts/build-brand-press-kit.py.
Source provenance remains in docs/brand/asset-provenance.json, outside public.

Check real desktop/mobile layouts, both themes, all download URLs, ZIP contents,
keyboard navigation, colour contrast, language reload, image loading, logo clear
space and truthful product availability. Never publish demo features as available.

Accessible interface text uses deeper Ai blue `#1D63D0`, success teal `#11785E`,
and honey ink `#936400`; the decorative identity colours remain unchanged.
These text tokens meet 4.5:1 on the light canvas, white cards and warm wells.

## Application library

/branding chapters 10–15 cover social compositions, header/footer layouts,
instructor identity, badges, chat states and component rules. Editable SVG
compositions are in /brand/templates/. Detailed implementation guidance is
/brand/application-standards.md. Chat examples are local design specimens.