tanghoong.com — visual identity

This is what tanghoong looks like.

One green. One typeface. One set of rules — and every property carrying the name inherits all three. The mark, the colour, the spacing, the way a thing moves when you touch it: decided once, written down here, and reused until it is unmistakable.

Start with the mark Foundations

9 CSS files
1 token set
2 themes
0 webfonts
No build step

Building with an agent?

Give it /llms.txt and skip these pages entirely.

It is the whole system as one plain-text file — every token with its real value, the full class vocabulary, the layout rules, and the traps that have already cost a day to find. One fetch, no crawling, and it is maintained alongside the CSS rather than written about it. The pages you are looking at are the human documentation; that file is the machine one.

Open llms.txt Starter template Pin it in a CLAUDE.md

Starting a whole sub-domain rather than a page? The template has the header, footer, nav sheet, theme toggle and meta block already wired — the details that go wrong when rebuilt by hand are the ones you cannot see.

Four rules the whole system rests on

Break these and a page stops looking like it belongs.

Every value comes from a token

No literal hex, px, radius or duration outside tokens.css. If a value you need does not exist, add it to the token file — do not inline it.
Four surfaces, three inks, one accent

Page, sunken, elevated, glass. Text, text-2, text-3. One accent, used sparingly enough that it still means something.
Spacing belongs to the container

Sections own vertical rhythm; grids own gaps. Components should not carry outer margins.
Native elements first

<dialog>, <details>, real <label>s. You inherit focus management, keyboard handling and assistive-tech support for free.

Reference

Each page is a live specimen with the markup beside it. Copy from the page, not from memory.

Where the rules came from They were read back out of cv.tanghoong.com, which was simply the most finished surface at the time — the identity existed there before it existed anywhere else. That direction is now reversed: this is the source, and the CV follows it like everything else.

01 Logo & identity The mark's construction geometry, its fixed colour pair, minimum sizes, clear space, the header lockup and the favicon set. favicon.svg 02 Foundations Colour, surfaces, typography, the 4 px space scale, radius, shadow, motion and the focus ring. tokens.css 03 Layout Container widths, section banding, the sticky header, the footer, grids, sidebars and the content rail. layout.css 04 Components Buttons, chips, badges, cards, panels, notes, stats, rows, tables, tabs, breadcrumbs, avatars, meters. components.css 05 Forms Inputs, textareas, selects, checkboxes, radios, switches, file drops, validation states and form layout. forms.css 06 Overlays Modals, drawers, dropdown menus, tooltips, toasts, accordions and the mobile nav sheet. overlays.css 07 Loading & motion Skeletons, spinners and the four async states; the complete list of what this system animates, and what it deliberately does not. async 08 Content & prose Article typography, leads, eyebrows, quotes, code, keyboard keys, steps and the print stylesheet. content.css 10 Patterns Whole compositions: the hero, a work index, a case study, a stats band, the closing CTA and the footer. compositions 09 SVG & data graphics Icons, the six-step chart ramp, stacked bars, radar charts and the self-contained SVG cards behind the GitHub profile. graphics 11 Agent prompt The system prompt to paste into any repo or CLAUDE.md so generated code lands on-system first time. CLAUDE.md

Using it in a new project

Copy assets/css/ into the new repo and link the files in this order. Order matters: tokens must resolve before anything references them, and utilities must come last so they can win.

Link order

<link rel="stylesheet" href="/assets/css/tokens.css">
<link rel="stylesheet" href="/assets/css/base.css">
<link rel="stylesheet" href="/assets/css/layout.css">
<link rel="stylesheet" href="/assets/css/components.css">
<link rel="stylesheet" href="/assets/css/forms.css">
<link rel="stylesheet" href="/assets/css/overlays.css">
<link rel="stylesheet" href="/assets/css/content.css">
<link rel="stylesheet" href="/assets/css/utilities.css">

Drop any layer the project does not use. docs.css is for this site only — never ship it.

Theme init — inline in <head>, before the stylesheet

<script>try{var t=localStorage.getItem('th');
if(t==='light'||t==='dark')document.documentElement.dataset.theme=t;}catch(e){}</script>

This must stay inline and must run before the CSS loads, or the page paints the wrong theme for a frame. It is the one script that cannot be deferred.