cdragon 0.1.0

package/skills/to-html/designs/cohere.DESIGN.md

@@ -0,0 +1,361 @@
+---
+id: cohere
+name: Cohere
+country: US
+category: ai
+homepage: "https://cohere.com"
+primary_color: "#39594d"
+logo:
+  type: github
+  slug: cohere-ai
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: Cohere Newsroom
+  url: "https://cohere.com/newsroom"
+  type: brand
+  description: Cohere's press kit with logos, symbols, and media resources.
+  og_image: "https://cdn.sanity.io/images/rjtqmwfu/web3-prod/0750efbc3db33b1a67bc77575525b076f0137f26-1200x630.jpg?w=1200&h=630"
+---
+
+# Design System Inspiration of Cohere
+
+## 1. Visual Theme & Atmosphere
+
+Cohere's interface is a polished enterprise command deck — confident, clean, and designed to make AI feel like serious infrastructure rather than a consumer toy. The experience lives on a bright white canvas where content is organized into generously rounded cards (22px radius) that create an organic, cloud-like containment language. This is a site that speaks to CTOs and enterprise architects: professional without being cold, sophisticated without being intimidating.
+
+The design language bridges two worlds with a dual-typeface system: CohereText, a custom display serif with tight tracking, gives headlines the gravitas of a technology manifesto, while Unica77 Cohere Web handles all body and UI text with geometric Swiss precision. This serif/sans pairing creates a "confident authority meets engineering clarity" personality that perfectly reflects an enterprise AI platform.
+
+Color is used with extreme restraint — the interface is almost entirely black-and-white with cool gray borders (`#d9d9dd`, `#e5e7eb`). Purple-violet appears only in photographic hero bands, gradient sections, and the interactive blue (`#1863dc`) that signals hover and focus states. This chromatic restraint means that when color DOES appear — in product screenshots, enterprise photography, and the deep purple section — it carries maximum visual weight.
+
+**Key Characteristics:**
+- Bright white canvas with cool gray containment borders
+- 22px signature border-radius — the distinctive "Cohere card" roundness
+- Dual custom typeface: CohereText (display serif) + Unica77 (body sans)
+- Enterprise-grade chromatic restraint: black, white, cool grays, minimal purple-blue accent
+- Deep purple/violet hero sections providing dramatic contrast
+- Ghost/transparent buttons that shift to blue on hover
+- Enterprise photography showing diverse real-world applications
+- CohereMono for code and technical labels with uppercase transforms
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Cohere Black** (`#000000`): Primary headline text and maximum-emphasis elements.
+- **Near Black** (`#212121`): Standard body link color — slightly softer than pure black.
+- **Deep Dark** (`#17171c`): A blue-tinted near-black for navigation and dark-section text.
+
+### Secondary & Accent
+- **Interaction Blue** (`#1863dc`): The primary interactive accent — appears on button hover, focus states, and active links. The sole chromatic action color.
+- **Ring Blue** (`#4c6ee6` at 50%): Tailwind ring color for keyboard focus indicators.
+- **Focus Purple** (`#9b60aa`): Input focus border color — a muted violet.
+
+### Surface & Background
+- **Pure White** (`#ffffff`): The primary page background and card surface.
+- **Snow** (`#fafafa`): Subtle elevated surfaces and light-section backgrounds.
+- **Lightest Gray** (`#f2f2f2`): Card borders and the softest containment lines.
+
+### Neutrals & Text
+- **Muted Slate** (`#93939f`): De-emphasized footer links and tertiary text — a cool-toned gray with a slight blue-violet tint.
+- **Border Cool** (`#d9d9dd`): Standard section and list-item borders — a cool, slightly purple-tinted gray.
+- **Border Light** (`#e5e7eb`): Lighter border variant — Tailwind's standard gray-200.
+
+### Gradient System
+- **Purple-Violet Hero Band**: Deep purple gradient sections that create dramatic contrast against the white canvas. These appear as full-width bands housing product screenshots and key messaging.
+- **Dark Footer Gradient**: The page transitions through deep purple/charcoal to the black footer, creating a "dusk" effect.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display**: `CohereText`, with fallbacks: `Space Grotesk, Inter, ui-sans-serif, system-ui`
+- **Body / UI**: `Unica77 Cohere Web`, with fallbacks: `Inter, Arial, ui-sans-serif, system-ui`
+- **Code**: `CohereMono`, with fallbacks: `Arial, ui-sans-serif, system-ui`
+- **Icons**: `CohereIconDefault` (custom icon font)
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (tight) | -1.44px | Maximum impact, serif authority |
+| Display Secondary | CohereText | 60px (3.75rem) | 400 | 1.00 (tight) | -1.2px | Large section headings |
+| Section Heading | Unica77 | 48px (3rem) | 400 | 1.20 (tight) | -0.48px | Feature section titles |
+| Sub-heading | Unica77 | 32px (2rem) | 400 | 1.20 (tight) | -0.32px | Card headings, feature names |
+| Feature Title | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Smaller section titles |
+| Body Large | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Intro paragraphs |
+| Body / Button | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Standard body, button text |
+| Button Medium | Unica77 | 14px (0.88rem) | 500 | 1.71 (relaxed) | normal | Smaller buttons, emphasized labels |
+| Caption | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Metadata, descriptions |
+| Uppercase Label | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Uppercase section labels |
+| Small | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Smallest text, footer links |
+| Code Micro | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | Tiny uppercase code labels |
+
+### Principles
+- **Serif for declaration, sans for utility**: CohereText carries the brand voice at display scale — its serif terminals give headlines the authority of published research. Unica77 handles everything functional with Swiss-geometric neutrality.
+- **Negative tracking at scale**: CohereText uses -1.2px to -1.44px letter-spacing at 60–72px, creating dense, impactful text blocks.
+- **Single body weight**: Nearly all Unica77 usage is weight 400. Weight 500 appears only for small button emphasis. The system relies on size and spacing, not weight contrast.
+- **Uppercase code labels**: CohereMono uses uppercase with positive letter-spacing (0.16–0.28px) for technical tags and section markers.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Ghost / Transparent**
+- Background: transparent (`rgba(255, 255, 255, 0)`)
+- Text: Cohere Black (`#000000`)
+- No border visible
+- Hover: text shifts to Interaction Blue (`#1863dc`), opacity 0.8
+- Focus: solid 2px outline in Interaction Blue
+- The primary button style — invisible until interacted with
+
+**Dark Solid**
+- Background: dark/black
+- Text: Pure White
+- For CTA on light surfaces
+- Pill-shaped or standard radius
+
+**Outlined**
+- Border-based containment
+- Used in secondary actions
+
+### Cards & Containers
+- Background: Pure White (`#ffffff`)
+- Border: thin solid Lightest Gray (`1px solid #f2f2f2`) for subtle cards; Cool Border (`#d9d9dd`) for emphasized
+- Radius: **22px** — the signature Cohere radius for primary cards, images, and dialog containers. Also 4px, 8px, 16px, 20px for smaller elements
+- Shadow: minimal — Cohere relies on background color and borders rather than shadows
+- Special: `0px 0px 22px 22px` radius (bottom-only rounding) for section containers
+- Dialog: 8px radius for modal/dialog boxes
+
+### Inputs & Forms
+- Text: white on dark input, black on light
+- Focus border: Focus Purple (`#9b60aa`) with `1px solid`
+- Focus shadow: red ring (`rgb(179, 0, 0) 0px 0px 0px 2px`) — likely for error state indication
+- Focus outline: Interaction Blue solid 2px
+
+### Navigation
+- Clean horizontal nav on white or dark background
+- Logo: Cohere wordmark (custom SVG)
+- Links: Dark text at 16px Unica77
+- CTA: Dark solid button
+- Mobile: hamburger collapse
+
+### Image Treatment
+- Enterprise photography with diverse subjects and environments
+- Purple-tinted hero photography for dramatic sections
+- Product UI screenshots on dark surfaces
+- Images with 22px radius matching card system
+- Full-bleed purple gradient sections
+
+### Distinctive Components
+
+**22px Card System**
+- The 22px border-radius is Cohere's visual signature
+- All primary cards, images, and containers use this radius
+- Creates a cloud-like, organic softness that's distinctive from the typical 8–12px
+
+**Enterprise Trust Bar**
+- Company logos displayed in a horizontal strip
+- Demonstrates enterprise adoption
+- Clean, monochrome logo treatment
+
+**Purple Hero Bands**
+- Full-width deep purple sections housing product showcases
+- Create dramatic visual breaks in the white page flow
+- Product screenshots float within the purple environment
+
+**Uppercase Code Tags**
+- CohereMono in uppercase with letter-spacing
+- Used as section markers and categorization labels
+- Creates a technical, structured information hierarchy
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
+- Button padding varies by variant
+- Card internal padding: approximately 24–32px
+- Section vertical spacing: generous (56–60px between sections)
+
+### Grid & Container
+- Max container width: up to 2560px (very wide) with responsive scaling
+- Hero: centered with dramatic typography
+- Feature sections: multi-column card grids
+- Enterprise sections: full-width purple bands
+- 26 breakpoints detected — extremely granular responsive system
+
+### Whitespace Philosophy
+- **Enterprise clarity**: Each section presents one clear proposition with breathing room between.
+- **Photography as hero**: Large photographic sections provide visual interest without requiring decorative design elements.
+- **Card grouping**: Related content is grouped into 22px-rounded cards, creating natural information clusters.
+
+### Border Radius Scale
+- Sharp (4px): Navigation elements, small tags, pagination
+- Comfortable (8px): Dialog boxes, secondary containers, small cards
+- Generous (16px): Featured containers, medium cards
+- Large (20px): Large feature cards
+- Signature (22px): Primary cards, hero images, main containers — THE Cohere radius
+- Pill (9999px): Buttons, tags, status indicators
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, no border | Page background, text blocks |
+| Bordered (Level 1) | `1px solid #f2f2f2` or `#d9d9dd` | Standard cards, list separators |
+| Purple Band (Level 2) | Full-width dark purple background | Hero sections, feature showcases |
+
+**Shadow Philosophy**: Cohere is nearly shadow-free. Depth is communicated through **background color contrast** (white cards on purple bands, white surface on snow), **border containment** (cool gray borders), and the dramatic **light-to-dark section alternation**. When elements need elevation, they achieve it through being white-on-dark rather than through shadow casting.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use 22px border-radius on all primary cards and containers — it's the visual signature
+- Use CohereText for display headings (72px, 60px) with negative letter-spacing
+- Use Unica77 for all body and UI text at weight 400
+- Keep the palette black-and-white with cool gray borders
+- Use Interaction Blue (#1863dc) only for hover/focus interactive states
+- Use deep purple sections for dramatic visual breaks and product showcases
+- Apply uppercase + letter-spacing on CohereMono for section labels
+- Maintain enterprise-appropriate photography with diverse subjects
+
+### Don't
+- Don't use border-radius other than 22px on primary cards — the signature radius matters
+- Don't introduce warm colors — the palette is strictly cool-toned
+- Don't use heavy shadows — depth comes from color contrast and borders
+- Don't use bold (700+) weight on body text — 400–500 is the range
+- Don't skip the serif/sans hierarchy — CohereText for headlines, Unica77 for body
+- Don't use purple as a surface color for cards — purple is reserved for full-width sections
+- Don't reduce section spacing below 40px — enterprise layouts need breathing room
+- Don't use decoration on buttons by default — ghost/transparent is the base state
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Small Mobile | <425px | Compact layout, minimal spacing |
+| Mobile | 425–640px | Single column, stacked cards |
+| Large Mobile | 640–768px | Minor spacing adjustments |
+| Tablet | 768–1024px | 2-column grids begin |
+| Desktop | 1024–1440px | Full multi-column layout |
+| Large Desktop | 1440–2560px | Maximum container width |
+
+*26 breakpoints detected — one of the most granularly responsive sites in the dataset.*
+
+### Touch Targets
+- Buttons adequately sized for touch interaction
+- Navigation links with comfortable spacing
+- Card surfaces as touch targets
+
+### Collapsing Strategy
+- **Navigation**: Full nav collapses to hamburger
+- **Feature grids**: Multi-column → 2-column → single column
+- **Hero text**: 72px → 48px → 32px progressive scaling
+- **Purple sections**: Maintain full-width, content stacks
+- **Card grids**: 3 → 2 → 1 column
+
+### Image Behavior
+- Photography scales proportionally within 22px-radius containers
+- Product screenshots maintain aspect ratio
+- Purple sections scale background proportionally
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Text: "Cohere Black (#000000)"
+- Page Background: "Pure White (#ffffff)"
+- Secondary Text: "Near Black (#212121)"
+- Hover Accent: "Interaction Blue (#1863dc)"
+- Muted Text: "Muted Slate (#93939f)"
+- Card Borders: "Lightest Gray (#f2f2f2)"
+- Section Borders: "Border Cool (#d9d9dd)"
+
+### Example Component Prompts
+- "Create a hero section on Pure White (#ffffff) with CohereText at 72px weight 400, line-height 1.0, letter-spacing -1.44px. Cohere Black text. Subtitle in Unica77 at 18px weight 400, line-height 1.4."
+- "Design a feature card with 22px border-radius, 1px solid Lightest Gray (#f2f2f2) border on white. Title in Unica77 at 32px, letter-spacing -0.32px. Body in Unica77 at 16px, Muted Slate (#93939f)."
+- "Build a ghost button: transparent background, Cohere Black text in Unica77 at 16px. On hover, text shifts to Interaction Blue (#1863dc) with 0.8 opacity. Focus: 2px solid Interaction Blue outline."
+- "Create a deep purple full-width section with white text. CohereText at 60px for the heading. Product screenshot floats within using 22px border-radius."
+- "Design a section label using CohereMono at 14px, uppercase, letter-spacing 0.28px. Muted Slate (#93939f) text."
+
+### Iteration Guide
+1. Focus on ONE component at a time
+2. Always use 22px radius for primary cards — "the Cohere card roundness"
+3. Specify the typeface — CohereText for headlines, Unica77 for body, CohereMono for labels
+4. Interactive elements use Interaction Blue (#1863dc) on hover only
+5. Keep surfaces white with cool gray borders — no warm tones
+6. Purple is for full-width sections, never card backgrounds
+
+## 10. Voice & Tone
+
+Cohere's voice is **enterprise-AI-careful** — formal but readable, security-aware, never breathless. Public messaging emphasizes "private, secure, customized" enterprise positioning over consumer-AI hype. Korean tagline ("개인, 보안, 맞춤형") tracks the same triple.
+
+| Context | Tone |
+|---|---|
+| CTA | Verb-noun. "Request demo", "Talk to sales", "Start free" |
+| Marketing | Enterprise-language. "Private, secure, customized" recurring triplet |
+| Onboarding | Documentation-first; quickstart with API keys |
+| Error | Formal. "Request denied: insufficient quota. Contact sales." |
+| Compliance | Heavy SOC 2 / ISO references; trust pages prominent |
+
+**Voice samples**
+- *"엔터프라이즈 AI: 개인, 보안, 맞춤형"* <!-- verified: cohere.com/ko 2026-05 -->
+- *"데모 요청"* / *"Request a demo"* <!-- verified: cohere.com -->
+
+**Forbidden phrases.** "AGI", "superintelligence". Generic "AI revolution" framing. Casual emoji.
+
+## 11. Brand Narrative
+
+Cohere was founded in **2019** in **Toronto, Canada** by **Aidan Gomez** (CEO), **Nick Frosst**, and **Ivan Zhang** ([Aidan Gomez — Wikipedia](https://en.wikipedia.org/wiki/Aidan_Gomez), [Cohere About](https://cohere.com/about)). **Aidan Gomez was 20 years old when he co-authored "Attention Is All You Need"** in 2017 as a Google Brain intern — the foundational Transformer architecture paper that every modern LLM descends from. Nick Frosst worked at **Google Brain Toronto** with **Geoffrey Hinton** (the "Godfather of AI", who later joined Cohere as advisor) ([Globe and Mail](https://www.theglobeandmail.com/business/article-toronto-ai-star-cohere-lands-tiger-led-125-million-venture-funding/)). The **first cheque came from Radical Ventures** (Toronto AI VC) ([U Toronto Centre for Entrepreneurship](https://www.entrepreneurship.artsci.utoronto.ca/news/how-cohere-ai-startup-co-founded-alumni-landed-170m-funding-year)). Cohere has raised **~US$1.6B at >$7B valuation** as of Sept 2025 ([Tracxn](https://tracxn.com/d/companies/cohere/__o4xfwmr3XwgsGEyH41XvwBm6Xd-SjsMlSld3d4ci6G0)) — Tiger Global led an earlier $125M round. Founding observation: enterprises needed customizable LLMs that respected data privacy. RAG-first, private deployment, on-prem available. **North** is Cohere's enterprise AI agent product.
+
+## 12. Principles
+
+1. **Privacy is the product, not a footnote.** *UI implication:* privacy guarantees first-class on landing pages.
+2. **RAG-first architecture.** *UI implication:* surfaces emphasize "your data + our models".
+3. **Enterprise doesn't mean stuffy.** *UI implication:* trust pages explain SOC 2 in plain English.
+4. **Interaction Blue on hover only.** *UI implication:* don't use brand blue for static CTAs.
+5. **Purple bands for sections, never cards.** *UI implication:* never apply purple to cards/buttons.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Cohere user segments (enterprise platform engineers, AI/ML platform leads, regulated-industry compliance), not individual people.*
+
+**Catherine Liu, 42, Toronto.** Director of AI/ML at a Canadian bank. Cohere is the only LLM vendor approved by their CISO.
+
+**Hiroshi Tanaka, 36, Tokyo.** Senior platform engineer at multinational logistics. Integrates Cohere Embed for 30+ language search.
+
+**David Mensah, 50, Johannesburg.** Head of risk at insurance carrier. On-prem deployment required.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no API keys)** | "Generate your first API key" CTA + quickstart code |
+| **Empty (no datasets)** | "Connect a data source" with provider grid |
+| **Loading (model inference)** | Per-token streaming visible; never just spinner |
+| **Loading (RAG retrieval)** | Two-phase: "Retrieving (12 docs)" → "Generating" |
+| **Error (rate limit)** | "Tier-1 limit reached (60 req/min). Upgrade or wait." |
+| **Error (auth)** | "API key expired. Generate a new key in Settings → API Keys." |
+| **Success (deployment)** | Endpoint URL + credentials, security reminder |
+| **Success (fine-tuned)** | Email + dashboard notification with eval metrics |
+| **Skeleton (deployments)** | White rows with cool-gray border skeletons |
+| **Disabled (no quota)** | 0.5 opacity + tooltip "Upgrade to enable" |
+| **Loading (long fine-tune)** | Persistent progress with ETA |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Toggle |
+| `motion-fast` | 150ms | Hover (Interaction Blue color shift) |
+| `motion-standard` | 250ms | Modal, panel |
+| `motion-streaming` | continuous | Token-by-token model output |
+
+Standard cubic-bezier. **No bouncy springs** — enterprise register. `prefers-reduced-motion: reduce` removes hover transitions and panel slide-ins.
+
+---
+
+**Verified:** 2026-05-08 (B1 loop)
+**Tier 1 sources:** cohere.com/ko (live DOM via playwright — Dark `#17171c` Primary 9999px / 12×16-24 / 44-49px / 16px·400)
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 1 (Philosophy):** cohere.com homepage; founder bios; Trust + Security pages.
+**Style ref:** `stripe`. **Conflicts unresolved:** none.

package/skills/to-html/designs/coinone.DESIGN.md

@@ -0,0 +1,218 @@
+---
+id: coinone
+name: "Coinone"
+country: KR
+category: fintech
+homepage: "https://coinone.co.kr"
+primary_color: "#006BD6"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=coinone.co.kr&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+ds:
+  name: "Coinone Brand Guideline"
+  url: "https://coinonecorp.com/company/brand"
+  type: brand
+  description: "Official BI/brand guideline (v4.0) — Coinone Blue color system, signature logo lockups, clear-space rules."
+---
+
+# Coinone
+
+Coinone is one of Korea's longest-running cryptocurrency exchanges (est. 2014). Its product face pairs a trustworthy, institutional blue with a clean, high-density trading surface — a fintech tone that has to read as both safe and fast.
+
+## 1. Visual Theme & Atmosphere
+
+Coinone presents as a calm, blue-anchored fintech exchange that wants to feel safe before it feels exciting. The chrome is mostly white with near-black text, letting a single confident blue carry every primary action and the brand itself. Surfaces are flat and lightly bordered rather than shadow-heavy; density rises sharply once you enter trading views, but the marketing and onboarding surfaces stay airy and reassuring. The result is a "boring-on-purpose" trust aesthetic typical of regulated Korean crypto, lifted by a brighter point-blue used sparingly for emphasis and AI/automation features.
+
+## 2. Color Palette & Roles
+
+Coinone's official BI defines "Coinone Blue" as the identity color, applied through a small set of roles. The live product applies a slightly deeper, more saturated blue to primary CTAs than the BI swatch.
+
+- **Coinone Blue (Main):** `#006BD6` — brand identity color (BI v4.0)
+- **Point Blue:** `#0090FF` — emphasis / highlight accent (BI)
+- **Sub Blue 1:** `#194386` — deep supporting blue (BI)
+- **Sub Blue 2:** `#062554` — darkest navy, headings on light (BI)
+- **Primary CTA (live):** `#0B59D5` — actual filled-button blue used on coinone.co.kr
+- **Accent outline blue (live):** `#1772F8` — signup / inline emphasis outline
+- **Text primary:** `#040505` — near-black body & headings
+- **Text secondary:** `#17181B` — strong neutral
+- **Text muted:** `#6B7684` — captions, helper text
+- **Neutral border:** `#DDE4EB` — input & outline-button borders
+- **Gray scale (BI):** `#EEEFF0` / `#CFD0D3` / `#8D9299` / `#616670`
+- **Surface tint:** `#EBF0F5` — light fill (store buttons, soft chips)
+- **Trading direction:** Korean market convention — price-up = red, price-down = blue (not measured as fixed tokens; applied per ticker state).
+
+## 3. Typography Rules
+
+- System Korean/Latin sans (Pretendard-class) — no proprietary display face on web.
+- Hero / section titles: bold, large, near-black `#040505`.
+- Primary control label: 15px / 700.
+- Body & list rows: 13–15px / 400–500.
+- Micro-labels & helper: 12px / 400, muted `#6B7684`.
+- Numerals run dense and right-aligned in trading tables; weight 500–700 for figures that change.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (filled)**
+- Background: `#0B59D5`
+- Text: `#FFFFFF`
+- Radius: 8px
+- Padding: 14px 18px
+- Height: 46px
+- Font: 15px / 700
+
+**Secondary (outline on white)**
+- Background: `#FFFFFF`
+- Text: `#040505`
+- Border: 1px solid `#DDE4EB`
+- Radius: 8px
+- Padding: 14px 18px
+- Height: 46px
+- Font: 15px / 500
+
+**Accent outline (signup / inline emphasis)**
+- Background: transparent
+- Text: `#1772F8`
+- Border: 1px solid `#1772F8`
+- Radius: 3px
+- Padding: 0 8px
+- Height: 24px
+- Font: 12px / 700
+
+**Text link**
+- Background: transparent
+- Text: `#0B59D5`
+- Font: 16px / 400
+
+**Store button (light)**
+- Background: `#EBF0F5`
+- Text: `#040505`
+- Radius: 10px
+- Padding: 13px
+- Height: 48px
+- Font: 13px / 700
+
+**Store button (dark)**
+- Background: `#040505`
+- Text: `#FFFFFF`
+- Radius: 10px
+- Padding: 13px
+- Height: 48px
+- Font: 13px / 700
+
+### Chip / Toggle
+
+**Filter chip (default)**
+- Background: `#FFFFFF`
+- Text: `#040505`
+- Border: 1px solid `#DDE4EB`
+- Radius: 6px
+- Padding: 6px 12px
+- Height: 32px
+- Font: 13px / 500
+- Active: border 1px solid `#040505`, font-weight 700
+
+### Icon button
+
+**Circular**
+- Background: `rgba(0,0,0,0.4)`
+- Radius: 50%
+- Padding: 5px
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://coinonecorp.com/company/brand (official BI guideline, brand-owned), https://coinone.co.kr (live exchange site, brand-owned), https://image-public.coinone.co.kr/download/corphome/coinone_guide_4.0.pdf (official brand guideline PDF v4.0, brand-owned)
+**Tier 2 sources:** getdesign.md/coinone — NOT LISTED. refero ?q=coinone — no Coinone-specific result. Tier 1 carries the evidence per KR regional-source rule.
+**Conflicts unresolved:** BI "Coinone Blue" main is `#006BD6`; the live product applies `#0B59D5` to filled CTAs and `#1772F8` to outline emphasis — recorded as applied shades of the same identity blue, not a conflict.
+
+## 5. Layout Principles
+
+- Marketing/onboarding: centered, generous vertical rhythm, single-column hero with one primary blue CTA.
+- App/exchange: dense multi-pane (market list · chart · order form), right-aligned numeric columns, thin neutral dividers `#DDE4EB`.
+- 8px spacing base; controls cluster at 8/12/18px gaps.
+- White surfaces dominate; sectioning by border and spacing rather than heavy cards.
+
+## 6. Depth & Elevation
+
+- Low elevation overall: flat white surfaces, 1px `#DDE4EB` borders do most of the separation.
+- Radius scale: 3px (inline tags) · 6px (chips) · 8px (buttons/cards) · 10px (store/large) · 50% (icon).
+- Shadows reserved for floating menus / modals, kept soft and short.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use one confident blue for the single primary action per view.
+- Keep trading numerals dense, right-aligned, and weighted when they change.
+- Respect Korean market color convention (red = up, blue = down) in price contexts.
+- Lean on borders and spacing for structure; keep surfaces flat and white.
+
+### Don't
+- Stack multiple filled-blue CTAs competing in one viewport.
+- Introduce shadow-heavy cards in trading views — it slows scanning.
+- Recolor the identity blue toward teal/purple; stay within the Coinone Blue family.
+- Use red/green for price direction (that's a Western convention; KR is red-up/blue-down).
+
+## 8. Responsive Behavior
+
+- Marketing pages collapse to single column; CTA goes full-width with the same 8px radius.
+- Exchange UI is desktop-dense; mobile app reflows panes into stacked tabs (markets → chart → order).
+- Touch targets ≥ 44px on app surfaces; 48–49px primary buttons translate cleanly to mobile.
+
+## 9. Agent Prompt Guide
+
+When generating Coinone-style UI: white background, near-black `#040505` text, exactly one filled blue (`#0B59D5`) primary action with 8px radius and 15px/700 label, outline secondaries with `#DDE4EB` borders. Keep it flat and bordered, dense in data views, calm in marketing. For price/market data use KR convention (red up, blue down). Use `#1772F8`/`#0090FF` only as sparing emphasis, never as a second competing CTA.
+
+## 10. Voice & Tone
+
+Coinone's voice is **steady, plain, and reassuring** — a regulated exchange explaining money clearly, not hyping coins.
+
+| Do | Don't |
+|---|---|
+| "30초면 가입 완료" — concrete, low-friction | "지금 안 사면 후회!" — FOMO/hype |
+| Explain risk and fees plainly | Bury terms or over-promise returns |
+| Calm, confident, second-person | Slangy crypto-degen tone |
+
+Voice samples (illustrative, derived from live copy):
+- "딱 30초면 완료할 수 있어요!" (signup nudge — friendly, concrete)
+- "스마트 트레이딩 바로가기" (feature CTA — direct, plain)
+- "방문 상담 예약하기" (support — calm, service-oriented)
+
+## 11. Brand Narrative
+
+Founded in 2014, Coinone is one of Korea's first-generation crypto exchanges and has framed itself around "connecting the world and technology" (세상과 기술을 연결하다). Its logo guideline describes the mark as carrying "the infinite possibilities of connection." Over a decade it has leaned into trust and compliance as differentiators in a heavily regulated market, while pushing automation features (AI grid / smart trading) to stay competitive with larger rivals. The design language reflects that posture: institutional blue, plain language, safety-first surfaces.
+
+## 12. Principles
+
+1. **Trust before excitement.** — *UI implication:* calm white surfaces, one blue, no hype color.
+2. **Clarity of money.** — *UI implication:* plain copy, explicit fees/states, legible dense numerals.
+3. **One decisive action.** — *UI implication:* a single filled-blue CTA per view.
+4. **Speed in data, calm in marketing.** — *UI implication:* dense trading panes, airy onboarding.
+5. **Stay within the identity blue.** — *UI implication:* blue family only for brand/primary; grays carry the rest.
+
+## 13. Personas
+
+*Illustrative archetypes for design context, not official user research.*
+
+- **Cautious first-timer** — wants a safe, regulated place to buy a little crypto; needs plain steps and visible trust signals.
+- **Active retail trader** — lives in the order book; values dense data, fast toggles, reliable numerals.
+- **Automation seeker** — drawn to AI grid / smart trading; wants set-and-forget tooling explained simply.
+
+## 14. States
+
+- **Empty:** "보유 자산이 없어요" — quiet muted `#6B7684` text + a single blue "입금하기" CTA.
+- **Loading:** skeleton rows in trading tables; spinner inside buttons on submit.
+- **Error (validation):** inline red helper under field; field border turns warning red.
+- **Error (network):** non-blocking toast, retriable; data panes keep last values dimmed.
+- **Success:** brief confirmation toast / checkmark; return to the relevant balance or order view.
+- **Skeleton:** gray `#EEEFF0` placeholder blocks matching final row layout.
+- **Disabled:** muted `#CFD0D3` fill, no border emphasis, non-interactive cursor.
+
+## 15. Motion & Easing
+
+- Duration scale: 120ms (micro hover/press) · 200ms (toggles, toasts) · 300ms (page/section transitions).
+- Easing: standard ease-out for entrances, ease-in-out for toggles.
+- Price/number changes flash briefly (red up / blue down) then settle — motion communicates direction, never decorates.
+- Keep motion minimal in trading views to avoid distracting from live data.