oh-my-design-cli 1.0.2 → 1.2.0

package/references/kakao/DESIGN.md

@@ -1,261 +0,0 @@
-# Design System Inspiration of Kakao (카카오)
-
-## 1. Visual Theme & Atmosphere
-
-Kakao is the connective tissue of Korean digital life -- KakaoTalk is on virtually every smartphone in the country, and the iconic yellow is as recognizable as any global tech brand's signature. The interface presents a clean, functional canvas where conversations take center stage, accented by that unmistakable Kakao Yellow (`#FEE500`) that radiates warmth and friendliness. This isn't the cautious, muted yellow of enterprise warnings; it's full-saturation sunshine that feels like a friend's smile.
-
-The design philosophy is "모든 연결의 시작" (The Beginning of All Connections). Every decision serves communication -- the interface should be invisible enough that conversations flow naturally, yet distinctive enough that users feel at home. KakaoTalk's chat bubbles are the defining UI element: warm yellow for your messages, clean white for others', creating an instantly legible visual language that has become the standard mental model for messaging in Korea.
-
-Typography is deliberately neutral -- system fonts (San Francisco on iOS, Roboto on Android) so messages feel personal, not branded. When personality is needed, the custom **Kakao Font** steps in: Big Sans for confident headlines, Small Sans for legible small-screen details. The overall aesthetic is flat, warm, and content-forward. Minimal shadows, minimal gradients, strong color coding through yellow and clean neutrals.
-
-**Key Characteristics:**
-- Kakao Yellow (`#FEE500`) as the singular brand accent -- pure sunshine
-- System font stack for conversations -- messages feel personal, not designed
-- Kakao Font (Big Sans + Small Sans) for brand display moments (OFL open-source)
-- Chat bubble-centric UI: yellow for self, white for others -- the defining pattern
-- Flat design with minimal shadow -- depth through background color layering, not elevation
-- Near-black (`#1E1E1E`) brand base instead of pure black -- subtle warmth
-- 12px border-radius as the universal standard for interactive elements
-- 9-patch chat bubble system for pixel-perfect messaging UI
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Kakao Yellow** (`#FEE500`): Primary brand color, login button, send button, CTA accent. Compliance-mandated for Kakao Login. The iconic color.
-- **Near Black** (`#1E1E1E`): Brand base color (Pantone 433 C). Wordmark, symbol, primary text in corporate contexts.
-- **Pure White** (`#ffffff`): Chat background, card surfaces, other-person chat bubbles.
-
-### Chat-Specific
-- **My Bubble** (`#FEE500`): Yellow -- your messages are sunshine.
-- **Other's Bubble** (`#ffffff`): Clean white with subtle `#E5E5E5` border.
-- **System Message** (`#F0F0F0`): Date dividers, join/leave notices.
-- **Unread Count** (`#FAEB00`): Yellow text on unread badge -- draws attention.
-
-### Semantic
-- **Error Red** (`#E02000`): Error messages, destructive actions, critical alerts.
-- **Link Blue** (`#2196F3`): Hyperlinks within chat and content.
-- **Success Green** (`#47B881`): Completion states, verified status.
-- **Warning Orange** (`#FF9800`): Attention-needed states.
-
-### Neutral Scale
-- **Text Primary** (`#222222`): Friend names, chat titles, strong labels.
-- **Text Standard** (`#333333`): Chat messages, body text, action bar titles. The workhorse.
-- **Text Secondary** (`#666666`): Secondary labels, descriptions.
-- **Text Muted** (`#808080`): Status messages, placeholder-level text.
-- **Text Light** (`#999999`): Captions, timestamps, system messages.
-- **Text Lightest** (`#BBBBBB`): Disabled text, hint text.
-
-### Surface & Borders
-- **Surface Elevated** (`#F8F8F8`): Subtle elevation through background shift.
-- **Surface Fill** (`#F0F0F0`): Secondary surfaces, search bars, disabled fields.
-- **Border Default** (`#E5E5E5`): Standard borders, dividers, input outlines.
-- **Border Subtle** (`#F0F0F0`): Lightest borders, subtle separation.
-- **Overlay** (`rgba(0,0,0,0.4)`): Modal backdrops -- lighter than most systems, keeping context visible.
-
-## 3. Typography Rules
-
-### Font Family
-- **UI Primary**: `-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Roboto, "Noto Sans KR", "Malgun Gothic", sans-serif`
-- **Monospace**: `"SF Mono", SFMono-Regular, Menlo, Consolas, monospace`
-- **Brand Display**: `"Kakao Big Sans"` -- confident headlines, promotional banners
-- **Brand Body**: `"Kakao Small Sans"` -- legible small-screen brand text
-
-Kakao Font is open-source (OFL-1.1) on GitHub. Big Sans has Regular/Bold/ExtraBold weights, Small Sans has Light/Regular/Bold. Both support full Hangul (11,172 characters).
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Display Hero | Kakao Big Sans | 36px | 800 | 1.25 | normal | Splash screens, marketing |
-| Display Large | Kakao Big Sans | 28px | 700 | 1.30 | normal | Service section titles |
-| Heading Large | System | 22px | 700 | 1.36 | normal | Screen titles, major sections |
-| Heading | System | 20px | 600 | 1.40 | normal | Navigation titles, modal headers |
-| Title | System | 18px | 600 | 1.44 | normal | Friend names, chat room titles |
-| Body | System | 16px | 400 | 1.50 | normal | Chat messages, descriptions |
-| Body Small | System | 14px | 400 | 1.57 | normal | Secondary info, metadata |
-| Caption | System | 13px | 400 | 1.54 | normal | Timestamps, status text |
-| Caption Small | System | 12px | 400 | 1.50 | normal | Fine print, badges |
-| Micro | System | 11px | 400 | 1.45 | normal | Tab bar text, smallest labels |
-
-### Principles
-- **System fonts for trust**: Custom fonts would make conversations feel "designed" rather than personal. Messages should feel like YOUR messages.
-- **Kakao Font for brand**: When the brand speaks (promotions, onboarding, empty states), Big Sans adds personality. When users speak, the system font stays neutral.
-- **Weight restraint**: Most UI uses 400-500 weight. Bold (700) only for names, titles, amounts. Chat-heavy apps need typographic calm, not emphasis competition.
-
-## 4. Component Stylings
-
-### Buttons
-
-**Kakao Login (Compliance-Mandated)**
-- Background: `#FEE500` (mandatory, do not modify)
-- Text: `#000000` at 85% opacity (mandatory)
-- Icon: Kakao chat bubble in `#000000` (mandatory)
-- Radius: 12px (mandatory)
-- Use: Kakao Login integration -- specs are non-negotiable
-
-**Primary Action**
-- Background: `#FEE500`
-- Text: `#333333` (not white -- insufficient contrast on yellow)
-- Padding: 12px 20px
-- Radius: 12px
-- Font: 16px system weight 600
-- Use: Primary CTAs ("확인", "완료", "보내기")
-
-**Secondary / Outline**
-- Background: transparent
-- Text: `#333333`
-- Border: 1px solid `#E5E5E5`
-- Radius: 12px
-- Use: Secondary actions ("취소", "더보기")
-
-**Danger**
-- Background: `#E02000`
-- Text: `#ffffff`
-- Radius: 12px
-- Use: Destructive actions ("삭제", "차단")
-
-### Chat Bubbles (Defining Component)
-- **My Message**: `#FEE500` bg, `#333333` text, asymmetric radius via 9-patch, max-width ~70% of chat
-- **Other's Message**: `#ffffff` bg, `#333333` text, subtle `#E5E5E5` border, sender name 12px weight 600 `#666666` above
-- **System**: `#F0F0F0` bg, `#999999` text, pill (9999px), centered, 12px weight 400
-
-### Cards & Containers
-- Background: `#ffffff`
-- Border: 1px solid `#E5E5E5` or no border
-- Radius: 12px
-- Shadow: none or `0px 1px 3px rgba(0,0,0,0.04)` -- Kakao is intentionally flat
-
-### Friend List Item
-- Avatar: 48px rounded square (12px radius) -- KakaoTalk uses rounded squares, not circles
-- Name: 16px weight 500, `#222222`
-- Status: 14px weight 400, `#808080`, single line ellipsis
-- Row height: 64px, Horizontal padding: 16px
-
-### Inputs & Forms
-- Border: 1px solid `#E5E5E5`, Radius: 12px
-- Focus: border changes to `#333333`
-- Text: `#222222`, Placeholder: `#BBBBBB`
-- Chat input: `#F0F0F0` bg, 20px radius
-- Search bar: `#F0F0F0` bg, 20px radius, `#999999` search icon
-
-### Navigation
-- Tab bar: white bg, 44px height, 4 equal tabs
-- Active: `#333333` text + 2px bottom border, Inactive: `#999999` text
-- Font: 14px weight 600
-
-## 5. Layout Principles
-
-### Spacing System
-- Base unit: 8px
-- Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px
-- Horizontal screen padding: 16px
-- Chat message gap (same sender): 4px, (different sender): 16px
-- List item vertical padding: 12px
-
-### Grid & Container
-- Mobile: full-width, 16px horizontal padding
-- Chat messages: left-aligned (others) or right-aligned (self) with 16px margins
-- Friend list: single-column, full-width items
-- Grid menu (More tab): 3-4 column icon grid
-
-### Whitespace Philosophy
-- **Conversation-optimized**: Message bubbles are compact but well-separated between senders. Maximize visible messages while maintaining clear attribution.
-- **List efficiency**: Friend/chat lists prioritize density -- 64px rows show avatar + name + status in a scannable format.
-- **Flat layering**: Instead of shadows, Kakao uses background color shifts (`#ffffff` → `#F0F0F0` → `#E5E5E5`) for visual hierarchy. Lightweight, fast-rendering.
-
-### Border Radius Scale
-- Standard (12px): Buttons, cards, avatars (rounded square), inputs, login button
-- Rounded (20px): Search bars, rounded containers
-- Pill (9999px): System message bubbles, notification badges
-- Chat bubble: asymmetric via 9-patch assets
-
-## 6. Depth & Elevation
-
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow | Primary — most elements. Chat bubbles, list items, cards |
-| Minimal (Level 1) | `0px 1px 3px rgba(0,0,0,0.04)` | Rare — floating action button, keyboard toolbar |
-| Subtle (Level 2) | `0px 2px 6px rgba(0,0,0,0.08)` | Popovers, dropdown menus |
-| Elevated (Level 3) | `0px 4px 12px rgba(0,0,0,0.12)` | Bottom sheets, modal dialogs |
-
-**Shadow Philosophy**: Kakao is intentionally one of the flattest major design systems in production. Depth is communicated almost entirely through background color differentiation and border lines, not shadow elevation. This serves two purposes: performance on the millions of low-to-mid-range devices KakaoTalk targets, and aesthetic -- a messaging app should feel like a clean sheet of paper, not floating cards.
-
-## 7. Do's and Don'ts
-
-### Do
-- Use Kakao Yellow (`#FEE500`) as the primary brand accent
-- Follow Kakao Login button specs exactly -- they are compliance-mandated
-- Use system fonts for all conversational/functional UI
-- Use 12px border-radius as the standard for most interactive elements
-- Keep the interface flat -- rely on background color, not shadows, for depth
-- Use yellow bubbles for self-messages, white for others -- the universal Kakao pattern
-- Use rounded squares (12px radius) for KakaoTalk-style avatars
-
-### Don't
-- Don't modify Kakao Login button colors, radius, or proportions
-- Don't use heavy shadows -- Kakao is one of the flattest design systems in production
-- Don't use yellow for text on white backgrounds -- contrast ratio is insufficient
-- Don't use pure black (`#000000`) for text -- use `#222222` or `#333333` for warmth
-- Don't override system fonts in chat contexts -- messages should feel personal
-- Don't use rounded circles for KakaoTalk avatars -- they use 12px rounded squares
-- Don't add gradient or 3D effects to brand elements -- strictly prohibited
-
-## 8. Responsive Behavior
-
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile (Primary) | <480px | Full design fidelity, KakaoTalk native layout |
-| Tablet | 480-768px | Side panel for chat list + detail |
-| Desktop | >768px | Fixed sidebar + chat panel + optional right panel |
-
-### Touch Targets
-- Chat bubble: entire bubble tappable for context menu
-- Friend list items: 64px row height, full-width tappable
-- Tab bar items: 56px height, evenly distributed
-- Send button: 36px minimum, right side of input bar
-
-### Collapsing Strategy
-- Desktop: multi-column (chat list | conversation | info panel)
-- Tablet: 2-column (chat list | conversation)
-- Mobile: single screen with navigation between views
-- Chat input: always bottom-fixed with safe area handling
-
-### Image Behavior
-- Chat photos: grid layout (1/2/3+ images), 8px rounded corners
-- Profile avatars: 48px in lists, 80-100px in profile view, rounded square (12px)
-- Stickers/Emoticons: centered in bubble area, 120-200px display
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Primary CTA: Kakao Yellow (`#FEE500`)
-- CTA Text: Near Black (`#333333`) -- NOT white on yellow
-- Background: Pure White (`#ffffff`)
-- Background Fill: Light Gray (`#F0F0F0`)
-- Heading text: Dark (`#222222`)
-- Body text: Charcoal (`#333333`)
-- Secondary text: Gray (`#666666`)
-- Caption text: Muted (`#999999`)
-- Placeholder: Light (`#BBBBBB`)
-- Border: Soft Gray (`#E5E5E5`)
-- My Bubble: Kakao Yellow (`#FEE500`)
-- Other Bubble: White (`#ffffff`)
-- Link: Blue (`#2196F3`)
-- Error: Red (`#E02000`)
-
-### Example Component Prompts
-- "Create a KakaoTalk chat screen: white bg. My messages: right-aligned #FEE500 bubbles, #333333 text 16px, timestamp below #999999 12px. Others: left-aligned, 36px circle avatar, 12px sender name #666666 above white bubble with #E5E5E5 border."
-- "Build a Kakao Login button: #FEE500 bg, 12px radius. Left: black chat bubble icon. Center: '카카오 로그인' in #000000 at 85% opacity. Full-width, 16px margin."
-- "Design a friend list: white bg, 16px h-padding. Each row: 48px rounded-square avatar (12px radius) + 12px gap + name (16px weight 500, #222222) over status (14px weight 400, #808080, ellipsis). 64px row height. Divider: 1px #F0F0F0."
-- "Create a tab bar: white bg, 44px height, 4 tabs. Active: #333333 text (14px weight 600) + 2px bottom border. Inactive: #999999 text."
-- "Design a chat input bar: #F0F0F0 bg, 20px radius, 40px height. Left: plus button 36px #999999. Right: send button #FEE500 bg 36px circle. Text input #222222, placeholder #BBBBBB '메시지 보내기'. Bottom-fixed with safe area."
-
-### Iteration Guide
-1. System fonts for ALL functional UI -- Kakao Font for brand/marketing only
-2. Primary yellow is `#FEE500` -- text ON yellow is `#333333` (never white)
-3. Chat bubbles are the visual DNA: yellow = self, white = other, pill = system
-4. 12px is THE border-radius -- buttons, cards, avatars, login, all 12px
-5. Flat design: no shadows on chat bubbles, minimal elsewhere, depth via background color
-6. Gray hierarchy: #222222 → #333333 → #666666 → #808080 → #999999 → #BBBBBB
-7. Kakao Login specs are non-negotiable compliance requirements

package/references/karrot/DESIGN.md

@@ -1,252 +0,0 @@
-# Design System Inspiration of Karrot (당근)
-
-## 1. Visual Theme & Atmosphere
-
-Karrot's interface is the digital equivalent of a friendly neighborhood bulletin board -- warm, approachable, and built for trust between strangers. The page opens on a clean white canvas (`#ffffff`) with warm near-black headings (`#1a1c20`) and the unmistakable Karrot Orange (`#ff6600`) that serves as the singular brand accent. This isn't the corporate orange of enterprise dashboards; it's the vivid, saturated orange of a fresh carrot -- energetic, trustworthy, and unmistakably local.
-
-The design system, called **Seed Design**, is one of the most mature open-source systems in Korean tech. It operates on a strict 4px grid with a three-tier token architecture (palette → semantic → component) that ensures every measurement is intentional. Typography relies entirely on the platform's native font stack rather than a custom typeface -- Pretendard on web, system fonts on native -- putting community content first. The overall aesthetic is warm neutral: soft grays, generous whitespace, and that singular orange accent. Where Stripe uses shadows as brand expression, Karrot uses shadows as pure function -- minimal, neutral, and warm.
-
-**Key Characteristics:**
-- Karrot Orange (`#ff6600`) as the singular brand accent -- warm, energetic, unmistakable
-- System font stack (Pretendard / Apple SD Gothic Neo) -- content takes center stage, no custom typeface
-- 4px base grid with precise spacing from 2px (x0.5) to 64px (x16)
-- Three-tier token system: palette → semantic → component for systematic theming
-- Full dark mode via semantic token remapping (not simple inversion)
-- 11-step gray scale (gray-00 through gray-1000) for nuanced depth
-- Three-level shadow system with separate light/dark mode intensities
-- Mobile-first at 375px baseline with `clamp()`-based accessibility font scaling
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Karrot Orange** (`#ff6600`): `$color.palette.carrot-600`. Primary CTA, active states, brand solid backgrounds. The iconic orange that defines every Karrot touchpoint.
-- **Deep Orange** (`#e14d00`): `$color.palette.carrot-700`. Pressed/hover state for brand elements, dark mode brand solid.
-- **Near Black** (`#1a1c20`): `$color.palette.gray-1000`, `fg-neutral`. Primary heading and text color. Warm near-black that avoids harshness.
-- **Pure White** (`#ffffff`): `$color.palette.gray-00`, `bg-layer-default`. Page background, card surfaces.
-
-### Brand Tints
-- **Orange Tint** (`#fff2ec`): `$color.palette.carrot-100`. Brand weak background, subtle orange-tinted surfaces.
-- **Orange Light** (`#ffb999`): `$color.palette.carrot-400`. Medium brand tint, progress indicators.
-- **Orange Deep** (`#b93901`): `$color.palette.carrot-800`. Deep orange for emphasis in dark contexts.
-
-### Semantic
-- **Critical Red** (`#fa342c`): `fg-critical`. Error foreground, destructive action labels.
-- **Informative Blue** (`#217cf9`): `fg-informative`. Links, informational highlights.
-- **Positive Green** (`#079171`): `fg-positive`. Success states, confirmation indicators.
-- **Warning Yellow** (`#9b7821`): `fg-warning`. Caution labels, attention-needed states.
-- **Focus Blue** (`#5e98fe`): `stroke-focus-ring`. Keyboard focus ring on interactive elements.
-
-### Neutral Scale
-- **Gray 100** (`#f7f8f9`): `bg-layer-fill`. Subtle background fill.
-- **Gray 200** (`#f3f4f5`): `bg-layer-basement`, `bg-disabled`. Secondary surfaces.
-- **Gray 400** (`#dcdee3`): `stroke-neutral-weak`. Standard borders, dividers.
-- **Gray 600** (`#b0b3ba`): `fg-placeholder`. Placeholder text, muted icons.
-- **Gray 700** (`#868b94`): `fg-neutral-subtle`. Captions, tertiary text.
-- **Gray 800** (`#555d6d`): `fg-neutral-muted`. Secondary body text.
-
-### Surface & Borders
-- **Border Subtle** (`rgba(0,0,0,0.08)`): `stroke-neutral-subtle`. Soft card borders, barely-there separation.
-- **Border Muted** (`rgba(0,0,0,0.12)`): `stroke-neutral-muted`. Moderate borders for definition.
-- **Overlay** (`rgba(0,0,0,0.7)`): `bg-overlay`. Modal/sheet backdrop.
-- **Overlay Muted** (`rgba(0,0,0,0.5)`): `bg-overlay-muted`. Bottom sheet scrims.
-
-## 3. Typography Rules
-
-### Font Family
-- **Primary**: `"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Roboto, "Noto Sans KR", sans-serif`
-- **Monospace**: `"SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace`
-- **Design Principle**: No custom brand typeface. Karrot intentionally uses the user's system font so community content feels native and personal, not branded.
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Display XL | System | 26px (t10) | 700 | 35px | 0em | Hero headlines, splash screens |
-| Display Large | System | 24px (t9) | 700 | 32px | 0em | Section headers |
-| Heading Large | System | 20px (t7) | 700 | 27px | 0em | Card headings, sub-sections |
-| Heading | System | 18px (t6) | 700 | 24px | 0em | List section headers |
-| Title | System | 16px (t5) | 500 | 22px | 0em | Navigation, standard titles |
-| Body | System | 14px (t4) | 400 | 19px | 0em | Standard reading text, listings |
-| Body Small | System | 13px (t3) | 400 | 18px | 0em | Secondary text, metadata |
-| Caption | System | 12px (t2) | 400 | 16px | 0em | Timestamps, small labels |
-| Caption Small | System | 11px (t1) | 400 | 15px | 0em | Fine print, badges |
-
-### Principles
-- **Three weights only**: Regular (400), Medium (500), Bold (700). No light or extra-bold -- the system is intentionally constrained.
-- **Platform-aware tracking**: iOS uses 0em throughout; Android uses tighter tracking (-0.02em to -0.04em) for system font metrics.
-- **Compact type scale**: 11px to 26px in 10 steps with no display sizes above 26px -- mobile-first, content-density over typographic drama.
-- **Accessibility scaling**: All sizes use `clamp()` with `--seed-font-size-multiplier`, supporting 80% to 150% of base size.
-
-## 4. Component Stylings
-
-### Buttons
-
-**Brand Solid (Primary CTA)**
-- Background: `#ff6600` (carrot-600)
-- Text: `#ffffff`
-- Radius: 12px (large), 8px (medium/small), 9999px (xsmall pill)
-- Min-height: 52px (large), 40px (medium), 36px (small), 32px (xsmall)
-- Font: 16px weight 700 (large), 14px weight 700 (medium/small)
-- Pressed: `#e14d00` (carrot-700)
-- Disabled: `#f3f4f5` background, `#d1d3d8` text
-- Use: Primary actions ("판매하기", "채팅하기")
-
-**Neutral Weak**
-- Background: `#f3f4f5` (gray-200)
-- Text: `#1a1c20` (gray-1000)
-- Pressed: `#eeeff1` (gray-300)
-- Use: Tertiary actions, filters
-
-**Neutral Outline**
-- Background: transparent
-- Text: `#1a1c20` (gray-1000)
-- Border: 1px solid `#dcdee3` (gray-400)
-- Pressed: `#f7f8f9` background
-- Use: Cancel, dismiss, low-emphasis
-
-**Critical Solid**
-- Background: `#fa342c` (red-700)
-- Text: `#ffffff`
-- Use: Destructive actions ("삭제", "신고")
-
-### Cards & Containers
-- Background: `#ffffff` (bg-layer-default)
-- Border: 1px solid `rgba(0,0,0,0.08)` (stroke-neutral-subtle) or no border with shadow
-- Radius: 8px (standard), 12px (featured), 16px (large cards)
-- Shadow: `0px 2px 10px rgba(0,0,0,0.1)` (s2) for standard cards
-
-### Chips & Tags
-- Background: `#f3f4f5` (gray-200), Selected: `#1a1c20` (gray-1000) with white text
-- Radius: 9999px (pill)
-- Height: 32px, Padding: 0 12px, Font: 13px weight 500
-
-### Inputs & Forms
-- Background: `#f7f8f9` (gray-100)
-- Border: 1px solid `#dcdee3` (gray-400)
-- Radius: 8px
-- Focus: 2px solid `#5e98fe` (blue-600) focus ring
-- Text: `#1a1c20`, Placeholder: `#b0b3ba` (gray-600)
-- Error border: `#fa342c` (red-700)
-
-### Navigation
-- Bottom tab bar: white background, subtle top border
-- Active tab: Karrot Orange icon + label, Inactive: `#868b94` (gray-700)
-- App bar: white, centered title (16px weight 700), optional back arrow
-
-## 5. Layout Principles
-
-### Spacing System
-- Base unit: 4px
-- Scale: 2px (x0.5), 4px (x1), 6px (x1.5), 8px (x2), 12px (x3), 16px (x4), 20px (x5), 24px (x6), 32px (x8), 40px (x10), 56px (x14), 64px (x16)
-- Global gutter: 16px (x4) on each side
-- Component default vertical: 12px (x3)
-
-### Grid & Container
-- Mobile: full-width with 16px horizontal gutter
-- Content max-width: 640px for web
-- Listing cards: full-width with 16px horizontal padding
-- Card grid: 2-column on tablet, single column on mobile
-
-### Whitespace Philosophy
-- **Content-dense, chrome-light**: Users scan many listings quickly. Spacing breathes but keeps 3-4 items per viewport.
-- **Consistent gutter**: The 16px global gutter is sacred -- every screen edge, every card inset returns to this rhythm.
-- **Grouped by proximity**: Related items use 4-8px gaps; distinct sections use 16-24px gaps.
-
-### Border Radius Scale
-- Micro (2px): Progress bars, inline indicators
-- Standard (8px): Buttons, inputs, standard cards
-- Comfortable (12px): Large buttons, featured cards
-- Large (16px): Image frames, prominent cards
-- Sheet (20px): Bottom sheet top corners
-- Dialog (24px): Modal dialogs
-- Pill (9999px): Chips, avatars, xsmall buttons
-
-## 6. Depth & Elevation
-
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow | Page background, inline elements |
-| Subtle (s1) | `0px 1px 4px rgba(0,0,0,0.08)` | Slight lift, list item hover |
-| Standard (s2) | `0px 2px 10px rgba(0,0,0,0.10)` | Cards, dropdowns, popovers |
-| Prominent (s3) | `0px 4px 16px rgba(0,0,0,0.12)` | Floating action button, bottom sheets, modals |
-
-**Shadow Philosophy**: Only three levels -- enough for clear layering without visual clutter. Shadows use pure black with varying opacity (no brand-tinted shadows), keeping the system neutral so the orange accent remains the sole source of warmth. In dark mode, opacities increase dramatically (s1: 0.50, s2: 0.68, s3: 0.80) to remain perceptible on dark surfaces.
-
-## 7. Do's and Don'ts
-
-### Do
-- Use Karrot Orange (`#ff6600`) as the singular brand accent -- it should feel special, not overwhelming
-- Stick to the 4px spacing grid -- every measurement should be a multiple of 4px
-- Use semantic tokens (`fg-neutral`, `bg-layer-default`) over raw palette values in component code
-- Keep border-radius between 8px-12px for standard elements, pills (9999px) only for chips/avatars
-- Use the system font stack -- Pretendard on web, system fonts on native
-- Apply dark mode via semantic token remapping, not opacity tricks
-- Maintain the 16px global gutter on all screen edges
-
-### Don't
-- Don't overuse orange -- it's for primary CTAs and brand moments only, not backgrounds or borders
-- Don't use shadows heavier than s3 -- the system intentionally avoids dramatic elevation
-- Don't introduce additional brand colors -- Karrot is a one-accent-color system
-- Don't exceed 26px for text sizes -- this is a mobile-first system with a compact type scale
-- Don't use pure black (`#000000`) for text -- use gray-1000 (`#1a1c20`) for warmth
-- Don't mix palette tokens and semantic tokens in the same component
-- Don't skip the `clamp()` wrapper on font sizes -- accessibility scaling is non-negotiable
-
-## 8. Responsive Behavior
-
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile | <480px | Full-width cards, single column, 16px gutter |
-| Tablet | 480-768px | 2-column listing grid, expanded cards |
-| Desktop (Web) | >768px | Max-width 640px content, centered layout |
-
-### Touch Targets
-- Buttons: 52px (large), 40px (medium), 36px (small), 32px (xsmall)
-- Tab bar items: 48px height with centered icon + label
-- List items: minimum 56px row height
-- Chips: 32px height minimum
-
-### Collapsing Strategy
-- Listing grid: 2-column → single column below 480px
-- Bottom tab bar persists across all sizes
-- Bottom CTA: sticky full-width button + safe area padding
-- Image carousels: horizontal scroll with page indicators
-
-### Image Behavior
-- Listing thumbnails: 1:1 aspect ratio, 8px radius
-- Profile avatars: circular (9999px), 36-48px diameter
-- Full-width hero images: edge-to-edge, no radius
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Primary CTA: Karrot Orange (`#ff6600`)
-- CTA Pressed: Deep Orange (`#e14d00`)
-- Background: Pure White (`#ffffff`)
-- Heading text: Near Black (`#1a1c20`)
-- Body text: Dark Gray (`#555d6d`)
-- Caption text: Medium Gray (`#868b94`)
-- Placeholder: Light Gray (`#b0b3ba`)
-- Border: Soft Gray (`#dcdee3`)
-- Disabled bg: Light Fill (`#f3f4f5`)
-- Error: Red (`#fa342c`)
-- Success: Green (`#079171`)
-- Info: Blue (`#217cf9`)
-- Focus ring: Blue (`#5e98fe`)
-
-### Example Component Prompts
-- "Create a listing card: white background, 1px solid rgba(0,0,0,0.08) border, 8px radius. Horizontal layout with 1:1 thumbnail (8px radius) left. Title 16px weight 400, #1a1c20. Price 16px weight 700, #1a1c20. Location + time 13px weight 400, #868b94."
-- "Build a primary CTA button: #ff6600 background, white text, 16px weight 700, min-height 52px, 12px radius, full-width. Pressed: #e14d00. Disabled: #f3f4f5 bg, #d1d3d8 text."
-- "Design a filter chip bar: horizontal scroll, 8px gap. Each chip: #f3f4f5 bg, #1a1c20 text, 13px weight 500, 32px height, 9999px radius, 12px h-padding. Selected: #1a1c20 bg, #ffffff text."
-- "Create a bottom sheet: white bg, 20px top-left/right radius, shadow 0px 4px 16px rgba(0,0,0,0.12). Handle: 36px wide, 4px height, #dcdee3, centered. Content: 16px h-padding."
-- "Design a navigation bar: white bg, sticky top, 1px bottom border rgba(0,0,0,0.08). Centered title 16px weight 700, #1a1c20. Left: back arrow icon #1a1c20. Right: optional action icon. Height 56px."
-
-### Iteration Guide
-1. Primary color is `#ff6600` only -- no secondary brand hue exists
-2. All spacing snaps to 4px grid: 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64
-3. Border-radius defaults: 8px buttons/inputs, 12px cards, 9999px chips/avatars
-4. Gray-1000 (`#1a1c20`) for headings, gray-800 (`#555d6d`) for body, gray-700 (`#868b94`) for captions
-5. Shadows are minimal: s1 for hover, s2 for cards, s3 for floating elements only
-6. Mobile-first: design at 375px width, 16px gutter, then scale up
-7. System font stack -- never embed a custom font for Karrot

package/references/kraken/DESIGN.md

@@ -1,146 +0,0 @@
-# Design System Inspiration of Kraken
-
-## 1. Visual Theme & Atmosphere
-
-Kraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgrounds with Kraken Purple (`#7132f5`, `#5741d8`, `#5b1ecf`) creating a distinctive, professional crypto identity. The proprietary Kraken-Brand font handles display headings with bold (700) weight and negative tracking, while Kraken-Product (with IBM Plex Sans fallback) serves as the UI workhorse.
-
-**Key Characteristics:**
-- Kraken Purple (`#7132f5`) as primary brand with darker variants (`#5741d8`, `#5b1ecf`)
-- Kraken-Brand (display) + Kraken-Product (UI) dual font system
-- Near-black (`#101114`) text with cool blue-gray neutral scale
-- 12px radius buttons (rounded but not pill)
-- Subtle shadows (`rgba(0,0,0,0.03) 0px 4px 24px`) — whisper-level
-- Green accent (`#149e61`) for positive/success states
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Kraken Purple** (`#7132f5`): Primary CTA, brand accent, links
-- **Purple Dark** (`#5741d8`): Button borders, outlined variants
-- **Purple Deep** (`#5b1ecf`): Deepest purple
-- **Purple Subtle** (`rgba(133,91,251,0.16)`): Purple at 16% — subtle button backgrounds
-- **Near Black** (`#101114`): Primary text
-
-### Neutral
-- **Cool Gray** (`#686b82`): Primary neutral, borders at 24% opacity
-- **Silver Blue** (`#9497a9`): Secondary text, muted elements
-- **White** (`#ffffff`): Primary surface
-- **Border Gray** (`#dedee5`): Divider borders
-
-### Semantic
-- **Green** (`#149e61`): Success/positive at 16% opacity for badges
-- **Green Dark** (`#026b3f`): Badge text
-
-## 3. Typography Rules
-
-### Font Families
-- **Display**: `Kraken-Brand`, fallbacks: `IBM Plex Sans, Helvetica, Arial`
-- **UI / Body**: `Kraken-Product`, fallbacks: `Helvetica Neue, Helvetica, Arial`
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing |
-|------|------|------|--------|-------------|----------------|
-| Display Hero | Kraken-Brand | 48px | 700 | 1.17 | -1px |
-| Section Heading | Kraken-Brand | 36px | 700 | 1.22 | -0.5px |
-| Sub-heading | Kraken-Brand | 28px | 700 | 1.29 | -0.5px |
-| Feature Title | Kraken-Product | 22px | 600 | 1.20 | normal |
-| Body | Kraken-Product | 16px | 400 | 1.38 | normal |
-| Body Medium | Kraken-Product | 16px | 500 | 1.38 | normal |
-| Button | Kraken-Product | 16px | 500–600 | 1.38 | normal |
-| Caption | Kraken-Product | 14px | 400–700 | 1.43–1.71 | normal |
-| Small | Kraken-Product | 12px | 400–500 | 1.33 | normal |
-| Micro | Kraken-Product | 7px | 500 | 1.00 | uppercase |
-
-## 4. Component Stylings
-
-### Buttons
-
-**Primary Purple**
-- Background: `#7132f5`
-- Text: `#ffffff`
-- Padding: 13px 16px
-- Radius: 12px
-
-**Purple Outlined**
-- Background: `#ffffff`
-- Text: `#5741d8`
-- Border: `1px solid #5741d8`
-- Radius: 12px
-
-**Purple Subtle**
-- Background: `rgba(133,91,251,0.16)`
-- Text: `#7132f5`
-- Padding: 8px
-- Radius: 12px
-
-**White Button**
-- Background: `#ffffff`
-- Text: `#101114`
-- Radius: 10px
-- Shadow: `rgba(0,0,0,0.03) 0px 4px 24px`
-
-**Secondary Gray**
-- Background: `rgba(148,151,169,0.08)`
-- Text: `#101114`
-- Radius: 12px
-
-### Badges
-- Success: `rgba(20,158,97,0.16)` bg, `#026b3f` text, 6px radius
-- Neutral: `rgba(104,107,130,0.12)` bg, `#484b5e` text, 8px radius
-
-### Cards
-
-**Default Card**
-- Background: `#ffffff`
-- Border: `1px solid rgba(148,151,169,0.16)`
-- Radius: `12px`
-- Padding: `24px`
-- Shadow: `rgba(0,0,0,0.03) 0px 4px 24px` (subtle lift)
-
-**Stat / Metric Card**
-- Background: `#ffffff`, radius `16px`, padding `20px 24px`
-- Title: 12px weight 500 `#686b82` (muted)
-- Value: 28px weight 700 `#101114`
-- Delta: 12px weight 500 — `#149e61` for positive, `#d54848` for negative
-
-**Featured / Promotional Card**
-- Background: `linear-gradient(135deg, #7132f5 0%, #5741d8 100%)` (purple gradient)
-- Text: `#ffffff`, radius `16px`, padding `32px`
-- Subtle inner glow via `box-shadow: inset 0 0 60px rgba(255,255,255,0.08)`
-- Use sparingly for premium/upgrade prompts
-
-## 5. Layout Principles
-
-### Spacing: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 25px
-### Border Radius: 3px, 6px, 8px, 10px, 12px, 16px, 9999px, 50%
-
-## 6. Depth & Elevation
-- Subtle: `rgba(0,0,0,0.03) 0px 4px 24px`
-- Micro: `rgba(16,24,40,0.04) 0px 1px 4px`
-
-## 7. Do's and Don'ts
-
-### Do
-- Use Kraken Purple (#7132f5) for CTAs and links
-- Apply 12px radius on all buttons
-- Use Kraken-Brand for headings, Kraken-Product for body
-
-### Don't
-- Don't use pill buttons — 12px is the max radius for buttons
-- Don't use other purples outside the defined scale
-
-## 8. Responsive Behavior
-Breakpoints: 375px, 425px, 640px, 768px, 1024px, 1280px, 1536px
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Brand: Kraken Purple (`#7132f5`)
-- Dark variant: `#5741d8`
-- Text: Near Black (`#101114`)
-- Secondary text: `#9497a9`
-- Background: White (`#ffffff`)
-
-### Example Component Prompts
-- "Create hero: white background. Kraken-Brand 48px weight 700, letter-spacing -1px. Purple CTA (#7132f5, 12px radius, 13px 16px padding)."