---
name: akefin-design
description: Use this skill to generate well-branded interfaces and assets for Akefin, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping a precision multi-entity finance dashboard with Korean (Hangul) + Latin bilingual support.
user-invocable: true
---

# Akefin Design Skill

**Akefin** is a multi-entity personal & business accounting platform for a solo consultant across Korea (KRW), Turkey (TRY), and Japan (JPY). It automates Korean Toss bank imports, runs them through a 3-tier AI categorization pipeline (Rules → LLM → Agent), and outputs plain-text double-entry ledger files. The visual language is **paper-quiet, grid-anchored, type-led** — heavily inspired by pi.dev: warm cream surface, italic-serif display type, monospaced data, hairline borders, no shadows on cards, no rounded everything.

## Read first

1. `README.md` — full context: company, content fundamentals, visual foundations, iconography.
2. `colors_and_type.css` — CSS variables for color + type, and ready-made semantic classes (`.chip`, `.entity-badge`, `.tier`, `.amount`, `.term`, etc).
3. `preview/` — small specimen cards showing every primitive. Skim before designing.
4. `ui_kits/web/` and `ui_kits/mobile/` — full reference implementations to copy components from.

## When invoked

If the user gives you a clear request (e.g. *"design the rules promotion modal"*, *"make a 6-slide deck on Akefin's import pipeline"*), proceed and produce HTML artifacts that:

1. **Import the system stylesheet:** `<link rel="stylesheet" href="path/to/colors_and_type.css">`. Always.
2. **Use the cream grid background** on the page body (`.grid-bg` class, or set `background-image` per the variable scheme).
3. **Use the two-surface system:** cream (`--bg`, `--paper`) for chrome, ink-grey (`--surface`) for data containers. The contrast is the signature.
4. **Use the existing atoms** instead of inventing new ones: `.chip` (confidence), `.entity-badge`, `.tier`, `.amount`, `.btn`, `.term`. Look in `ui_kits/web/dashboard.css` if you need more class definitions.
5. **Handle Korean text gracefully** — `font-family: var(--font-sans-kr)` (Pretendard) on any element that may contain Hangul. Don't romanise unless explicitly for an inferred-name secondary line.
6. **Amounts:** always mono, right-aligned, signed (`+ 1,240,000 KRW` / `− 38,500 KRW`), currency code follows.
7. **Voice:** authoritative, calm, technical. Imperative verbs. UPPERCASE small-tracked mono labels for tab/chrome. Never emoji.
8. **Iconography:** Lucide via CDN, 1.5px stroke, 16–20px. Don't draw new SVG icons.

If the user gives you a vague request (*"design something for Akefin"*), ask 3–5 questions: what surface (web / mobile / slide), what flow, do they want variants, etc.

## Quick reference — the most-used pieces

| Need | Use |
|---|---|
| Background | `class="grid-bg"` on body |
| Page heading | `<h1 class="display-l">…</h1>` (italic serif) |
| Tab/chrome label | `<span class="eyebrow">REVIEW QUEUE</span>` |
| Confidence chip | `<span class="chip high">★ 0.94</span>` (rules/high/mid/low) |
| Entity badge | `<span class="entity-badge personal">Personal</span>` (personal/tfox/finacode) |
| Tier badge | `<span class="tier llm">LLM</span>` |
| Money | `<span class="amount neg">38,500<span class="ccy">KRW</span></span>` |
| Data block | `<div class="term">…mono content…</div>` with `.term-title` header |
| Primary button | `<button class="btn primary">APPROVE</button>` |
| Bracket button (pi.dev style) | `<button class="btn bracket">READ DOCS</button>` |

## What to AVOID

- Emoji of any kind
- Drop shadows on cards (only on popovers)
- Colored gradients
- Border-radius > 4px (chips/pills excepted)
- Heavy borders > 1px
- Color-tinted whole-page backgrounds based on entity (entity is accent, not tint)
- Inter, Roboto, system-default fonts — use Spectral / IBM Plex Sans / JetBrains Mono / Pretendard
- Page-wide rounded "card with left accent border" — explicit anti-pattern

## Output modes

- **Production code:** Copy `colors_and_type.css` and `assets/` into the target project. Reference variables directly; don't redefine.
- **Throwaway prototype:** Reference the system files via relative paths from the project root. Produce ONE HTML file unless explicitly asked for more.
- **Slides:** Use `deck_stage.js` starter, light theme default. Display headings in italic Spectral. Don't pad with filler content.

## Notes from the field

- Plantin MT Pro is the original target display face; `Spectral` is a Google Fonts substitute — flag this if the user expects exact pi.dev parity.
- The akefin-design-system GitHub repo was empty at time of generation. If it's been populated since, prefer its components over what's here.
- This skill is best when paired with screenshots of the existing Akefin product (none were provided originally).