Toss
Korean fintech super-app precision: Pretendard on #FAFAFA page with near-ink #3C3C3C text, single saturated accent #721FE5 reserved for active/selected states only, hero metrics at 48px/24px 2:1 ratio, and card shadows a…
$ aoe install @community/persona-tossProjection
Always in _index.xml · the agent never has to ask for this.
Toss [persona] v1.0.0
Korean fintech super-app precision: Pretendard on #FAFAFA page with near-ink #3C3C3C text, single saturated accent #721FE5 reserved for active/selected states only, hero metrics at 48px/24px 2:1 ratio, and card shadows at rgba(0,0,0,0.04) — everything else is white space and numbers.
Loaded when retrieval picks the atom as adjacent / supporting.
Toss [persona] v1.0.0
Korean fintech super-app precision: Pretendard on #FAFAFA page with near-ink #3C3C3C text, single saturated accent #721FE5 reserved for active/selected states only, hero metrics at 48px/24px 2:1 ratio, and card shadows at rgba(0,0,0,0.04) — everything else is white space and numbers.
School
toss
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Implies
- Font:
- Display: Pretendard (fallbacks: Inter, system-ui, sans-serif) — same family for display and body
- Body: Pretendard or Inter — covers CJK characters cleanly for Korean/Japanese market apps
- Monospace: ui-monospace, SFMono-Regular, Menlo, monospace
- Color:
- Temperature: neutral
- Palette: brand accent #721FE5 (active/selected only — never as card background or body text), dark variant #9B5FFF, brand tint bg #F0E8FF (10% opacity for selected rows/badges), page #FAFAFA (NOT pure white), card #ffffff, subtle surface #FAFAF9, muted #E8E6E1 (progress track/dividers), text-primary #3C3C3C (never pure #000), text-secondary #6A6A6A, text-tertiary #7A7A7A, text-disabled #9B9B9B
- Background: #FAFAFA
- Density: mobile-first 430px max-width; space-y-6 between cards; mx-6 single cards; px-6 card grids; radius 10px (cards use rounded-2xl = 16px); 8px base grid
- Layout: single-column 430px max-w centered; everything inside cards — no bare-page content; hero metric 48px/24px 2:1 ratio; KPI 36px/18px; all cards float on #FAFAFA page
- Imagery: data-forward — balances, rates, spending charts; no lifestyle photography; numbers are the hero
- Motion: subtle spring ease cubic-bezier(0.34, 1.56, 0.64, 1); shadow-card 0 1px 3px rgba(0,0,0,0.04) — never ≥8% opacity
Example Brands
- Toss (Korea)
- Kakao Pay
- Naver Pay
- Revolut (mobile dashboard)
Composition
- Must Include:
- @community/template-shadcn-pricing-toggle
- @community/fact-fintech-number-display
- Must Avoid:
- @impeccable/persona-magazine-editorial
- @community/anti-pattern-rainbow-explosion
- Typography Required:
- Display: Pretendard | Inter
- Tabular Nums: true
- Number Unit Ratio: 2:1 (48px/24px hero, 36px/18px KPI)
- Color Required:
- Background: #FAFAFA
- Text Primary: #3C3C3C
- Accent: #721FE5
- Motion Prescriptions:
- @community/pattern-hover-lift
Loaded when retrieval picks the atom as a focal / direct hit.
Toss [persona] v1.0.0
Korean fintech super-app precision: Pretendard on #FAFAFA page with near-ink #3C3C3C text, single saturated accent #721FE5 reserved for active/selected states only, hero metrics at 48px/24px 2:1 ratio, and card shadows at rgba(0,0,0,0.04) — everything else is white space and numbers.
School
toss
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Implies
- Font:
- Display: Pretendard (fallbacks: Inter, system-ui, sans-serif) — same family for display and body
- Body: Pretendard or Inter — covers CJK characters cleanly for Korean/Japanese market apps
- Monospace: ui-monospace, SFMono-Regular, Menlo, monospace
- Color:
- Temperature: neutral
- Palette: brand accent #721FE5 (active/selected only — never as card background or body text), dark variant #9B5FFF, brand tint bg #F0E8FF (10% opacity for selected rows/badges), page #FAFAFA (NOT pure white), card #ffffff, subtle surface #FAFAF9, muted #E8E6E1 (progress track/dividers), text-primary #3C3C3C (never pure #000), text-secondary #6A6A6A, text-tertiary #7A7A7A, text-disabled #9B9B9B
- Background: #FAFAFA
- Density: mobile-first 430px max-width; space-y-6 between cards; mx-6 single cards; px-6 card grids; radius 10px (cards use rounded-2xl = 16px); 8px base grid
- Layout: single-column 430px max-w centered; everything inside cards — no bare-page content; hero metric 48px/24px 2:1 ratio; KPI 36px/18px; all cards float on #FAFAFA page
- Imagery: data-forward — balances, rates, spending charts; no lifestyle photography; numbers are the hero
- Motion: subtle spring ease cubic-bezier(0.34, 1.56, 0.64, 1); shadow-card 0 1px 3px rgba(0,0,0,0.04) — never ≥8% opacity
Example Brands
- Toss (Korea)
- Kakao Pay
- Naver Pay
- Revolut (mobile dashboard)
Composition
- Must Include:
- @community/template-shadcn-pricing-toggle
- @community/fact-fintech-number-display
- Must Avoid:
- @impeccable/persona-magazine-editorial
- @community/anti-pattern-rainbow-explosion
- Typography Required:
- Display: Pretendard | Inter
- Tabular Nums: true
- Number Unit Ratio: 2:1 (48px/24px hero, 36px/18px KPI)
- Color Required:
- Background: #FAFAFA
- Text Primary: #3C3C3C
- Accent: #721FE5
- Motion Prescriptions:
- @community/pattern-hover-lift
Relations
related: [@community/rule-single-accent-color, @community/principle-typography-hierarchy, @community/check-line-length-optimal, @community/fact-fintech-number-display, @community/constraint-typography-weight-blacklist, @community/fact-line-height-readability, @community/principle-color-system-foundation, @community/check-contrast-aa, @community/rule-brand-color-primary-only, @community/constraint-no-pure-white-bg, @community/rule-backgrounds-atmospheric, @community/anti-pattern-generic-saas-blue, @community/check-color-blacklist-brand, @community/constraint-no-pure-black-text] compatible: [fintech-data-forward, mobile-dashboard, korean-super-app, dense-pragmatist] conflicts: [editorial-magazine, playful-consumer, color-saturated-brand, warm-institutional] contradicts: [@impeccable/persona-magazine-editorial, @community/anti-pattern-rainbow-explosion]
Compatible
- fintech-data-forward
- mobile-dashboard
- korean-super-app
- dense-pragmatist
Conflicts
- editorial-magazine
- playful-consumer
- color-saturated-brand
- warm-institutional
Contradicts
- @impeccable/persona-magazine-editorial
- @community/anti-pattern-rainbow-explosion
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/persona-toss/atom.yaml