菜单
Reference DESIGN.md for Korean-fintech playful: Toss Blue against bright white, Toss Product Sans paired with Noto Sans KR, generous radii, friendly mood, mobile-first density. Use when building UI components, applying design tokens, or implementing visual styles for playful toss.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Choose a 3D generation or reconstruction pipeline given input type, output format, and use case. Use when you need help with 3d pipeline.
|. Use when you need help with 8 bit orbit video template.
Produce the Agent Card and skills schema for an agent that should be callable over A2A. Use when you need help with a2a agent spec.
Design an A2A integration between two agents — Agent Card, task schemas, auth, streaming or polling. Use when you need help with a2a integrator.
Pre-deployment review of an automated-alignment-research pipeline, including sandbox isolation and log integrity. Use when you need help with aar deployment review.
Design an LLM A/B test — pick platform (Statsig or GrowthBook), primary metric, guardrails, sample size with LLM-noise buffer, CUPED, sequential stopping, and multiple-comparison correction. Use when you need help with ab plan.
| name | acd-playful-toss-design |
| description | Reference DESIGN.md for Korean-fintech playful: Toss Blue against bright white, Toss Product Sans paired with Noto Sans KR, generous radii, friendly mood, mobile-first density. Use when building UI components, applying design tokens, or implementing visual styles for playful toss. |
You are an expert in the Toss — Playful Fintech aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.
Reference DESIGN.md for Korean-fintech playful: Toss Blue against bright white, Toss Product Sans paired with Noto Sans KR, generous radii, friendly mood, mobile-first density.
Playful fintech. The page reads like a friend explaining money — bright white surfaces, one confident blue, generous radii, illustrations of cards and coins rendered in flat vector. The brand is warm without being childish; type stays geometric, copy stays plainspoken, and every CTA invites a tap. Korean-first, but the system holds in Latin script.
Mood: friendly, approachable, confident, never sterile.
--bg: #ffffff /* canvas */
--bg-alt: #f9fafb
--surface: #f2f4f6 /* cool gray surface lift */
--surface-2: #e8f3ff /* tinted blue wash for callouts */
--text: #191f28 /* near-ink */
--text-secondary: #333d4b /* body copy */
--text-muted: #6b7684
--text-dim: #8b95a1
--border: #e5e8eb
--border-strong: #d1d6db
--accent: #3182f6 /* Toss Blue — primary action + brand */
--accent-hover: #1b64da
--accent-deep: #1e40af /* pressed / dark variant */
--accent-soft: #e8f3ff /* tinted callouts, secondary button bg */
--success: #00c896 /* mint, positive balance */
--warning: #ff9500 /* amber, attention */
--danger: #f04452 /* coral red, decline / loss */
--info: #3182f6
Rule: Toss Blue is the only branded hue. Status colors are reserved for state (positive balance, attention, decline). Never reuse status hues for decoration. The tinted blue wash --surface-2 carries callouts and secondary buttons — it is the brand's softening move.
Toss Product Sans, fallback Pretendard, -apple-system, BlinkMacSystemFont, Apple SD Gothic Neo, Noto Sans KR, system. Weight 600–700, tight tracking (−1% at large sizes).Toss Product Sans, fallback as above. Weight 400/500. Line-height 1.5–1.6. Korean glyphs rendered via Noto Sans KR and Apple SD Gothic Neo fallbacks.JetBrains Mono, fallback SF Mono. Used for transaction IDs, code samples, OTPs.Scale: 12 / 14 / 15 / 17 / 20 / 24 / 32 / 40 / 50 / 66.
Hero headlines run 50–66px on desktop. Korean and Latin glyphs share metrics within Toss Product Sans.
Buttons
--accent, white text #f9fafb, radius 7px, padding 14/20, weight 500. Hover: --accent-hover. Pressed: --accent-deep. No lift, no scale.--surface-2, deep blue text --accent-hover, radius 7px. The two-step blue is Toss's signature hierarchy.--text-secondary, blue underline on hover.--danger fill, white text, only on confirm modals.Cards / list items
--border, radius 12px, padding 20. Soft shadow 0 1px 3px rgba(25, 31, 40, 0.04) only.--border-strong. No lift.Inputs
--surface fill, no border at rest, radius 12px, padding 16/20 (large tap targets).--accent ring, no offset. Label floats above on focus.Nav
--border, blue underline on active.Illustrations
Soft shadows allowed sparingly — single 0 1px 3px rgba(25, 31, 40, 0.04) on cards, 0 8px 24px rgba(25, 31, 40, 0.08) on modals and bottom sheets. No neumorphism. No stacked shadows. Tap targets get a brief scale(0.98) press feedback (96ms ease-out).
Do
Don't
Bias: bright white #ffffff canvas, single Toss Blue #3182f6 accent paired with a tinted blue #e8f3ff secondary, Toss Product Sans with Noto Sans KR fallback, 7px radii on buttons and 12px on cards, mobile-first 480px content lane, 64px tap-target row heights, tabular numerals on every monetary value, flat-vector illustrations of cards / coins, bottom-sheet modals on mobile.
Reject: dark-mode marketing as default, multi-accent palettes, gradient fills, drop-shadow heavy cards, photorealistic imagery, soft-pill buttons over 16px radius, dense desktop-first dashboards, decorative emoji in chrome.