Helikona Design System

Colour

Green

Primary brand. Gravity (deep) → approachability (light).

Rust

Accent & emphasis. Use sparingly.

Amber

Warning / pending states.

Stone

Neutrals with character, in place of flat greys.

Surface

Page and panel grounds, plus the two tappable washes.

Text & borders

Semantic

Sit above the palette — these are the ones that flip in dark mode.

Typography

Display — --font-display

'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif

Heliconia DM Sans 700 / 48px

The brand, set large DM Sans 700 / 32px

A section heading DM Sans 600 / 24px

A card title DM Sans 600 / 17px

Body — --font-body

'Inter', -apple-system, BlinkMacSystemFont, sans-serif

The heliconia grows toward the light it can reach. Inter 400

The heliconia grows toward the light it can reach. Inter 500

The heliconia grows toward the light it can reach. Inter 600

Logo & app icons

Photography

Icons

Outline glyphs 59

24×24, fill: none, stroked in currentColor at 2 — so one component serves a leaf-green icon button and a muted table cell alike. Shown here at 24px.

Brand marks 4

The platforms' own solid logos, in their own colours rather than currentColor. Where a UI names a channel, the logo is the thing you scan for — a generic speech bubble does not read as one.

Colour inheritance

The same three glyphs, drawn inside three different colours. Nothing is passed to the component — it takes the colour of whatever it sits in.

Sizes

A single size number, defaulting to 14.

Buttons & links

Looks

Sizes

Icon-only

Squares the padding so the glyph sits in a square box. Callers must supply an accessible name — the glyph alone is not one.

With a label

States

[data-pending] is mid-submit — you've taken the action and the server hasn't come back. Not the same as :disabled, which says you can't take it; plenty of these stay clickable while pending. Hover and press are live — try them.

Icon-only page actions

36px, growing to 44px below 640px so the tap target stays comfortable on a phone — the glyph stays the same size, centred. Narrow the window to see it. Solid outranks outline, the same pairing the labelled buttons use.

Text

.btn-quiet is the smallest action there is — it sits inside a line of body text, where a box would outrank the sentence it annotates. Its dotted underline goes solid on press.

Chat

The shared vocabulary every agent rail draws on — @helikona/brand/chat.css for the layout and @helikona/brand/chat-markdown's <ChatMarkdown> for rendering a reply. This section doubles as the regression check for the two things ChatMarkdown exists to fix: a GFM table rendering as an actual table, and a reply mid-stream surviving an unterminated ** as literal text rather than breaking.

Turn shapes

The user's message is a bubble; the assistant's is bare text — the reply is the page, not a log entry. The flag affordance sits at the assistant turn's left edge, at rest (opacity: .6) — hover it to see it sharpen.

Mid-stream, unterminated markdown

The exact failure mode a streamed reply hits before its closing ** arrives. This must read as literal asterisks, never throw.

Tool chips

Only a clean success may read in the past tense — .is-failed and .is-declined exist so a failed or declined call never looks like it happened.

Composer

.hk-chat-composer, .hk-chat-icon-btn and .hk-chat-send — the input row every rail assembles the same way.

Motion

The brand's answer to a generic spinner. Two nested rotations make the sway read as wind rather than a rocking icon — the whole plant pivots at the base of the stem, and the upper bracts pivot on the same period but phase-shifted, so the tip lags the stem and catches up. Purely decorative (aria-hidden); pair it with your own visible status text.

In context, at the size it's usually drawn:

Working…

It respects prefers-reduced-motion on its own — under that setting the sway is replaced by a slow breathe. Toggle it in your OS to check.

Email

Email clients mostly strip custom properties, so the templates carry literal hex. These are the same brand values, flattened — and light-mode only: don't attempt dark-mode switching in email.

Signatures

Table-based, inline styles only, for pasting straight into Gmail's signature settings. Rendered below in an iframe on a white ground, which is what a mail client will give them.

Accessibility

Measured on this build from the token values themselves, not asserted. Ratios are WCAG 2.2 relative luminance. The threshold applied depends on what the pair is for: 4.5:1 under 1.4.3 Contrast (Minimum) for body text, 3:1 under 1.4.11 Non-text Contrast for borders, glyphs and other interface parts. AAA marks a text pair clearing 1.4.6's 7:1.

Only pairings the shipped CSS actually draws are listed. A full cross-product would be noise, and would imply the package endorses combinations it never puts on screen.

Light mode

Dark mode

What the numbers say

Light: 18 pass, 1 fail — .btn-secondary's border against its ground (1.28:1). Dark: 18 pass, 1 fail — .btn-secondary's border against its ground (1.17:1).

Two defects this analysis found on its first run have since been fixed, and one entry remains listed deliberately:

1. Fixed — brand green as a label colour on a light ground. --leaf-light is a mid-tone green drawn to sit on --deep-jungle, and it does that well, but .btn-outline also used it for its text on --surface, at 2.16:1 against a 4.5:1 requirement — and for .icon-outline-btn's glyph, which missed the looser 3:1 bar too. Both now take --leaf-strong, which is --jungle-mid in light mode and --leaf-light again in dark. The control looks unchanged on a dark ground and merely becomes legible on a light one. The palette token itself was not touched: it is a brand colour, and it was never wrong — it was being asked to do a job it was not drawn for.
2. Fixed — the press state in dark mode. --off-white on dark mode's --jungle-mid was 2.52:1. The press now runs through --press-fill / --press-text, which flip: in light mode it darkens to jungle green with a pale label as before, and in dark it inverts to --deep-jungle with a --leaf-light label. Both clear 4.5:1, and both still read unmistakably as a press, because each is a change of hue rather than of lightness.
3. Listed, not failed — --border on --surface. 1.4.11 asks 3:1 of visual information required to identify a control. .btn-secondary carries a full-contrast text label, so its border is not doing that work alone, and a heavier rule would cost the quiet that makes it read as secondary in the first place. It stays in the table because the number is real — but it does mean a border must never be the only thing marking a control.

Both fixes were made as semantic tokens rather than as a prefers-color-scheme block inside buttons.css. That is deliberate: Turbopack is documented in two consuming repos as dropping @media blocks from a package's imported CSS, so a theme-dependent rule written there would have failed silently in exactly the apps that need it.

Beyond contrast

Contrast is the part a page can measure itself. These are the rest of the accessibility decisions baked into the shipped CSS and components — stated plainly, including where they fall short.

Target size — 2.5.8 (AA, WCAG 2.2)

Met by .icon-outline-btn / .icon-solid-btn, which grow from 36px to 44px below 640px, and by .btn-tall. Not met by .btn-sm (29px) or .btn-icon (26px) if they are the only way to reach a function. 2.5.8 asks for 24×24 CSS px as a floor, which both clear — but the 44×44 of 2.5.5 (AAA) is the target worth hitting on touch. Reach for .btn-tall on anything a thumb has to find.

Pointer gestures and hover — 1.4.13

Met. No control in the package depends on hover to reveal content or function; every :hover rule is decorative and gated behind @media (hover: hover), so a touch device never enters a hover state it cannot leave. Nothing here requires a drag, a path gesture, or a multi-point gesture.

Use of colour — 1.4.1

Partially met, and the gap is the consumer's to close. Press states change hue by design, but they are transient feedback rather than information. The real risk is downstream: a status shown only as --amber-mid text or a bare dot glyph conveys its meaning by colour alone. Pair any colour-carried status with a word or a distinct glyph.

Non-text content — 1.1.1

Met by the component, unmet by default at the call site. Icon renders aria-hidden="true", which is correct: the glyph is decorative and the surrounding text is the label. But an icon-only button has no surrounding text, so .btn-icon, .icon-outline-btn and .icon-solid-btn are inaccessible until the caller supplies aria-label. The package cannot enforce this; every example on this page does it.

Focus visible — 2.4.7

Met. Every control in buttons.css takes a 2px --focus-ring outline on :focus-visible, at a 2px offset. :focus-visible rather than :focus, so a mouse press leaves no ring behind — that is the reason rings get deleted from stylesheets, and the fix for it rather than an excuse to ship none. The offset is what lets one colour serve all six looks: drawn on .btn-primary itself the ring would be leaf-on-leaf, but two pixels out it lands on the page. outline rather than box-shadow, so it follows the border radius, takes no part in layout, and survives a forced-colours mode where a shadow is discarded. Tab through this page to see it. Measured against both grounds in the table above.

Motion — 2.3.3

Met. BrandSway honours prefers-reduced-motion on its own, replacing the sway with a slow breathe. Button transitions are 180ms opacity and colour changes, below the threshold at which motion becomes a vestibular concern, and press deliberately drops its transition entirely.

Resize text — 1.4.4 / 1.4.10

Met with one caveat. Type is set in px, which browser zoom scales but a user's minimum-font-size setting does not. Buttons carry white-space: nowrap, so a long label in an enlarged font will overflow its container rather than wrap. Worth reviewing on any button whose label is user- or locale-supplied.

Contrast of the washes — 1.4.11

Not measurable here, and unmeasured. --surface-hover and --surface-active are translucent greens (6% and 18% light; 7% and 20% dark) composited over whatever sits behind them. They carry no information on their own — they are feedback layered on a control that is already distinguishable — so 1.4.11 does not apply to them directly. They are excluded from the table above rather than silently given a number.

This is a static analysis of the design tokens and the shipped CSS. It is not an audit of any application built from them: focus order, heading structure, form labelling, live regions and keyboard traps are all properties of the assembled page, and none of them can be settled here.