akefin-design-system/SKILL.md

name	description	user-invocable
akefin-design	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.	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).