ahu.ai — logo system
Nine marks for nine systems, built from one drawing rule. Derived from the
Pengayoman emblem: single-weight line art, gold #F6CD0E over deep navy
#0E395B. No third colour. Every mark carries exactly one gold element —
that element is what the mark means.
Browse everything: open index.html in a browser (self-contained,
all SVG inlined).
Palette
| Token | Hex | Use |
|---|---|---|
| Pengayoman Navy | #0E395B |
structure ink, wordmark, frames |
| Pengayoman Gold | #F6CD0E |
the single accent, one per mark |
| Kertas | #FFFFFF |
primary ground |
| Navy 55% | #5B7186 |
descriptor line only |
Both hexes are lifted from the official AHU vector
(ahu-codebase/e-pasti-v3/core-e-pasti-v3/images/Logo-AHU-10.svg), so these
marks sit next to the Kemenkum / Ditjen AHU emblems without a colour clash.
Construction
- 64 × 64 grid, artwork inside
6..58, coordinates on a 2 px sub-grid - monoline:
stroke-width: 4, round caps, round joins - built only from straight lines, circular arcs, and dots
- geometry lives in one file — see the build notes at the bottom
The nine
| Slug | Name | System | Repo |
|---|---|---|---|
platform |
ahu.ai | umbrella mark | — |
ocr |
ahu.ai OCR | notaris / PP / umum / verifikator app | ahu-ocr-akta-notaris (master) |
tanya |
Tanya | public chatbot (Document RAG) | ahu-ai-chatbot / public-web |
tanya-data |
Tanya Data | staff chat (text-to-SQL data agent) | ahu-ai-chatbot / internal-web |
konsol |
Konsol Admin | chatbot admin console | ahu-ai-chatbot / admin |
observatory |
Observatory | audit trail + BI | ahu-ai-observatory, ahu-observatory-dashboard |
gateway |
Gateway | model router, queue, audit | ahu-gpu-manager |
classifier |
Classifier | LayoutLMv3 document classifier | ahu-doc-classifier |
rag |
Document RAG | AHU knowledge base | ai-ahu-document-rag |
Files per system
| File | What it is | When to use |
|---|---|---|
svg/<slug>-mark.svg |
glyph, navy + gold, transparent | on white / light surfaces, ≥ 24 px |
svg/<slug>-mark-reverse.svg |
glyph, white + gold, transparent | on navy / photo / dark surfaces |
svg/<slug>-mark-mono.svg |
glyph in currentColor |
one-colour print, inherits CSS colour |
svg/<slug>-tile.svg |
glyph knocked out of a navy squircle | app icon, favicon, anything < 24 px |
svg/<slug>-lockup.svg |
glyph + name + descriptor | headers, decks, docs, letterheads |
svg/<slug>-lockup-reverse.svg |
same, for navy grounds | dark headers, slide title bars |
svg/<slug>-lockup-1line.svg |
glyph + name only | app nav bars, compact headers |
PNG mirrors in png/: marks at 512/256/128/64/32/16, tiles at
1024/512/192/180/64/32/16, lockups at 1200 px wide. Reverse lockups are
exported already sitting on navy; everything else is transparent.
png/_family-sheet.png — the 9-up contact sheet, drop straight into a slide.
Wiring it in
<!-- app header -->
<img src="/brand/svg/tanya-lockup-1line.svg" alt="Tanya" height="32">
<!-- favicon + home-screen icon -->
<link rel="icon" type="image/svg+xml" href="/brand/svg/tanya-tile.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/brand/png/tanya-tile-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/brand/png/tanya-tile-180.png">
<!-- one colour, follows the text colour -->
<span style="color:#0E395B"><!-- inline tanya-mark-mono.svg --></span>
Where it is wired in
The mark is a React component, not an image: dist/ahu-mark.tsx is copied into
each app as components/brand/AhuMark.tsx. Colour is CSS-driven —
| Custom property | Default | Meaning |
|---|---|---|
--logo-ink |
currentColor |
the line colour; inherits the host surface's ink |
--logo-accent |
#F6CD0E |
the one gold — leave this alone |
--logo-tile |
#0E395B |
squircle fill, tile mode only |
--logo-tile-ink |
#fff |
line colour inside a tile |
The form is the identity, not the hex. Ink adapts so the mark belongs to
whatever surface it sits on; the gold never changes, which is what ties the
nine systems together.
| App | Surface | Mark | Mode |
|---|---|---|---|
ahu-ai-chatbot public-web |
/beranda nav |
platform |
tile 36 |
/beranda footer (navy) |
platform |
36, white ink | |
/tanya top bar + sidebar |
tanya |
26 | |
/reset-password |
platform |
30 | |
| favicon / apple-icon | tanya |
tile | |
ahu-ai-chatbot internal-web |
staff rail | tanya-data |
28 |
| admin rail | konsol |
26 | |
| favicon / apple-icon | tanya-data |
tile | |
ahu-ocr-akta-notaris |
sidebar header | ocr |
tile 36 |
/login |
ocr |
tile 52 | |
| favicon / apple-icon / title | ocr |
tile | |
ahu-observatory-dashboard |
Carbon header | observatory |
26 |
| login gate | observatory |
44 | |
| favicon / apple-icon | observatory |
tile |
Not yet wired: ahu-gpu-manager (Gateway), ahu-doc-classifier (Classifier),
ai-ahu-document-rag (Document RAG) — all three are headless services with no
UI of their own. Their marks exist for docs, decks, and dashboards.
Rules
Do
- keep clear space equal to the wordmark's cap height on all four sides
- use
-reverseon navy — white lines, gold accent unchanged - use
-monofor single-colour print; it inheritscurrentColor - use the tile below 24 px — monoline goes thin and dies there
Don't
- recolour the gold accent — it is the one accent across the whole platform
- set these larger than the Kemenkum / Ditjen AHU emblem on official material
- add shadows, gradients, outlines, or skew
Rebuilding
Geometry is code, not a binary. The generator lives outside this repo
(/tmp/build/{glyphs,build,gallery}.py in the session that produced it) and
depends on fontTools + uharfbuzz + Plus Jakarta Sans. Wordmarks are
converted to outlines at build time, so no SVG here depends on a font being
installed. If the source needs to be kept, copy those three files into
brand/src/ before the sandbox is recycled.
Type: Plus Jakarta Sans — ExtraBold for names, Medium for descriptors.
Open-source (SIL OFL), designed for Jakarta's city identity.