oh-my-design-cli 1.8.6 → 1.9.0

package/web/references/selectstar/DESIGN.md

@@ -0,0 +1,439 @@
+---
+id: selectstar
+name: Selectstar
+display_name_kr: 셀렉트스타
+country: KR
+category: ai
+homepage: "https://selectstar.ai/"
+primary_color: "#0c5fdb"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=selectstar.ai&sz=128"
+verified: "2026-07-02"
+added: "2026-07-02"
+omd: "0.1"
+tokens:
+  source: live-extract
+  extracted: "2026-07-02"
+  note: "primary = live CTA / link blue (#0c5fdb); hover/link-alt brighter blue (#1274e7). Bootstrap-family neutral ladder (#212529 → #495057 → #6c757d → #adb5bd) on a #f8f9fa canvas. Light-blue tint surfaces use #5797f6 at 15% alpha; dark section bg #00001a."
+  colors:
+    primary: "#0c5fdb"
+    primary-hover: "#1274e7"
+    accent-blue: "#5797f6"
+    sky: "#6ec1e4"
+    canvas: "#ffffff"
+    surface: "#f8f9fa"
+    surface-alt: "#e9ecef"
+    ink: "#212529"
+    slate: "#495057"
+    body: "#6c757d"
+    muted: "#adb5bd"
+    black: "#000000"
+    navy: "#00001a"
+    on-primary: "#ffffff"
+  typography:
+    family: { sans: "Inter", kr: "Noto Sans KR" }
+    display-hero: { size: 72, weight: 300, lineHeight: 1.25, tracking: -1.44, use: "English hero headline, Inter Light — 'Solution for Trustworthy AI'" }
+    display:      { size: 60, weight: 600, lineHeight: 1.28, tracking: -1.2, use: "Product / blog hero display" }
+    section:      { size: 48, weight: 600, lineHeight: 1.28, tracking: -0.96, use: "Section titles" }
+    subsection:   { size: 36, weight: 600, lineHeight: 1.28, tracking: -0.72, use: "Feature / sub-section heads" }
+    body:         { size: 16, weight: 400, lineHeight: 1.8, use: "Standard reading text, muted grey" }
+    nav:          { size: 16, weight: 600, use: "Top-level nav items" }
+    button:       { size: 14, weight: 600, use: "Header CTA / dropdown nav label" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 18, xl: 24, xxl: 38, section: 64 }
+  rounded: { sm: 4, md: 10, lg: 24, full: 9999 }
+  shadow:
+    soft: "rgba(0, 0, 0, 0.15) 0px 1px 5px 0px"
+    card: "rgba(0, 0, 0, 0.15) 0px 3px 8px 0px"
+    float: "rgba(0, 0, 0, 0.05) 0px 2px 6px 0px, rgba(0, 0, 0, 0.1) 0px 8px 19.2px 0px"
+  components:
+    button-primary: { type: button, bg: "#0c5fdb", fg: "#ffffff", radius: "4px", height: "45px", padding: "9px 18px", font: "14px / 600 Inter", states: "hover #1274e7", use: "Header/primary CTA — 문의하기 / CONTACT" }
+    button-pill: { type: button, bg: "#ffffff", fg: "#333333", radius: "50px", padding: "16px 38px", height: "64px", font: "20px / 400 Inter", shadow: "rgba(0,0,0,0.1) 0px 8px 19.2px", use: "Floating white pill CTA — 문의하기" }
+    button-rounded: { type: button, bg: "#0c5fdb", fg: "#ffffff", radius: "26px", padding: "10px 24px", height: "50px", font: "16px / 400 Inter", use: "Newsletter Subscribe rounded CTA" }
+    input-search: { type: input, bg: "#ffffff", fg: "#000000", radius: "4px", padding: "9px 18px", height: "47px", font: "16px Inter", use: "Blog search field, paired with blue Search button" }
+    card: { type: card, bg: "#ffffff", radius: "10px", shadow: "rgba(0,0,0,0.15) 0px 3px 8px", use: "Feature / content card on grey canvas" }
+    nav-link: { type: tab, fg: "#212529", font: "14px / 600 Inter", active: "text #0c5fdb", use: "Product dropdown / nav menu item" }
+    tint-surface: { type: card, bg: "#5797f6", fg: "#0c5fdb", radius: "10px", use: "Light-blue tinted highlight surface, rendered at 15% alpha (base #5797f6)" }
+    icon-chip: { type: badge, bg: "#e9ecef", fg: "#0c5fdb", radius: "9999px", height: "50px", use: "Circular icon chip / carousel control" }
+  components_harvested: true
+---
+
+# Design System Inspiration of Selectstar
+
+## 1. Visual Theme & Atmosphere
+
+Selectstar (셀렉트스타) is a Korean AI-evaluation and data company whose homepage reads like a serious research-grade product rather than a flashy startup pitch. The atmosphere is calm, institutional, and blue — a light cool-grey canvas (`#f8f9fa`) carries white content cards while a single confident royal blue (`#0c5fdb`) does all the work of "action," appearing on every CTA, link, and interactive accent. Text sits in a soft Bootstrap-family neutral ladder — near-black `#212529` for the strongest labels, slate `#495057` for headings, and a muted grey `#6c757d` for the vast majority of body copy — which keeps the page quiet, legible, and trustworthy without ever reaching for pure black except on occasional maximum-contrast headings (`#000000`).
+
+The typographic personality is deliberately restrained and Western-technical: everything is set in **Inter** (with Noto Sans KR carrying hangul), and the signature move is the hero headline running at an unusually **light weight 300** — "Solution for Trustworthy AI" at 72px with tight `-1.44px` tracking. This whisper-weight display is the opposite of the bold-hero convention; it signals research confidence rather than marketing volume. Below the hero, section headings snap back to weight 600 (48px, `-0.96px`) so the hierarchy reads as "quiet authority up top, firm structure below." Body text is a generous 16px at a relaxed 1.8 line-height, giving the dense bilingual content room to breathe.
+
+Depth is soft and sparing. Most surfaces are flat white cards on the grey canvas, separated by subtle grey (`#e9ecef`) fills and light shadows (`rgba(0, 0, 0, 0.15) 0px 3px 8px 0px`); the floating white pill CTA earns a two-layer ambient shadow. Accents beyond the primary blue are minimal — a lighter blue tint (`#5797f6` at 15% alpha) for highlight surfaces, a soft sky cyan (`#6ec1e4`) for illustration touches, and a deep near-black navy (`#00001a`) for immersive dark sections. Geometry is conservative: 4px radius on the workhorse buttons and inputs, 10px on cards, and full pills (24px–50px, `9999px`) reserved for softer CTAs and circular controls.
+
+**Key Characteristics:**
+- Single royal blue (`#0c5fdb`) as the only action color — CTAs, links, active nav
+- Inter everywhere (Noto Sans KR for hangul); light **weight 300** hero at 72px is the signature
+- Bootstrap-family neutral ladder: `#212529` → `#495057` → `#6c757d` → `#adb5bd`
+- Cool light-grey canvas (`#f8f9fa`) with flat white cards and light `rgba(0,0,0,0.15)` shadows
+- Conservative geometry: 4px workhorse radius, 10px cards, pill (24px–50px) softer CTAs
+- Light-blue tint (`#5797f6` @15%) + sky cyan (`#6ec1e4`) as the only secondary accents
+- Deep navy (`#00001a`) dark sections for brand immersion
+- Relaxed 1.8 body line-height for dense bilingual (KO/EN) reading
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Selectstar Blue** (`#0c5fdb`): Primary brand color and the single action color — CTA backgrounds, link text, active nav, interactive accents.
+- **Blue Hover** (`#1274e7`): Slightly brighter blue for hover states and secondary link emphasis.
+- **On Primary** (`#ffffff`): White text/icon on blue CTAs and dark surfaces.
+
+### Accent
+- **Accent Blue** (`#5797f6`): Light-blue tint used at ~15% alpha for highlight surfaces and soft callout backgrounds.
+- **Sky Cyan** (`#6ec1e4`): Soft cyan for illustration touches and decorative accents.
+
+### Neutral & Surface
+- **Pure White** (`#ffffff`): Card surfaces, nav bar, and text on blue/dark.
+- **Canvas Grey** (`#f8f9fa`): Page background — a cool light grey that segments content into airy zones.
+- **Surface Alt** (`#e9ecef`): Slightly darker grey for circular icon chips, dividers, and alternating fills.
+- **Navy Dark** (`#00001a`): Near-black navy background for immersive dark brand sections.
+
+### Text Hierarchy
+- **Ink** (`#212529`): Strongest labels, nav items, dark headings.
+- **Slate** (`#495057`): Primary heading color for hero and section titles.
+- **Body Grey** (`#6c757d`): The dominant body-text grey — descriptions, paragraphs, captions.
+- **Muted Grey** (`#adb5bd`): Faint tertiary text, placeholders, lowest-emphasis labels.
+- **Pure Black** (`#000000`): Occasional maximum-contrast headings and search-field text.
+- **Slate 333** (`#333333`): Text on the floating white pill CTA.
+
+## 3. Typography Rules
+
+### Font Family
+- **Sans (primary)**: `Inter` — used for all English display, headings, body, nav, and UI labels.
+- **Korean**: `Noto Sans KR` — carries hangul headings and body where Inter lacks glyphs.
+- Weights in use: 300 (hero display), 400 (body, softer CTAs), 600 (headings, nav, primary buttons).
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Inter | 72px (4.50rem) | 300 | 1.25 (90px) | -1.44px | "Solution for Trustworthy AI" — light-weight signature |
+| Display | Inter | 60px (3.75rem) | 600 | 1.28 (76.8px) | -1.2px | Product / blog hero |
+| Section Heading | Inter | 48px (3.00rem) | 600 | 1.28 (61.44px) | -0.96px | Section titles |
+| Sub-section | Inter | 36px (2.25rem) | 600 | 1.28 (46.08px) | -0.72px | Feature / sub-section heads |
+| Body | Inter | 16px (1.00rem) | 400 | 1.80 (28.8px) | normal | Standard reading text, muted grey |
+| Nav | Inter | 16px (1.00rem) | 600 | normal | normal | Top-level nav items |
+| Button | Inter | 14px (0.88rem) | 600 | normal | normal | Header CTA / dropdown nav labels |
+
+### Principles
+- **Light hero, firm structure**: the 72px weight-300 hero is the defining choice; every headline below it uses weight 600. Lightness at the top signals research confidence, not marketing hype.
+- **Tight tracking scales with size**: -1.44px at 72px, -1.2px at 60px, -0.96px at 48px, -0.72px at 36px; body stays at normal tracking.
+- **One family, two scripts**: Inter for Latin, Noto Sans KR for hangul — they never swap roles.
+- **Generous body leading**: 16px body at 1.8 line-height keeps dense bilingual content readable.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary CTA**
+- Background: `#0c5fdb`
+- Text: `#ffffff`
+- Radius: 4px
+- Padding: 9px 18px
+- Height: 45px
+- Font: 14px Inter weight 600
+- Hover: `#1274e7`
+- Use: Header and primary call-to-action — "문의하기" / "CONTACT"
+
+**Floating White Pill**
+- Background: `#ffffff`
+- Text: `#333333`
+- Radius: 50px
+- Padding: 16px 38px
+- Height: 64px
+- Font: 20px Inter weight 400
+- Shadow: `rgba(0, 0, 0, 0.05) 0px 2px 6px 0px, rgba(0, 0, 0, 0.1) 0px 8px 19.2px 0px`
+- Use: Prominent floating CTA — "문의하기"
+
+**Rounded Subscribe**
+- Background: `#0c5fdb`
+- Text: `#ffffff`
+- Radius: 26px
+- Padding: 10px 24px
+- Height: 50px
+- Font: 16px Inter weight 400
+- Use: Newsletter "Subscribe" / "뉴스레터 구독하기" rounded CTA
+
+### Inputs
+
+**Search Field**
+- Background: `#ffffff`
+- Text: `#000000`
+- Radius: 4px
+- Padding: 9px 18px
+- Height: 47px
+- Font: 16px Inter
+- Use: Blog search input, paired with a blue `#0c5fdb` Search button
+
+### Cards & Containers
+
+**Feature Card**
+- Background: `#ffffff`
+- Radius: 10px
+- Shadow: `rgba(0, 0, 0, 0.15) 0px 3px 8px 0px`
+- Use: Content / feature card sitting on the grey `#f8f9fa` canvas
+
+**Tinted Highlight Surface**
+- Background: `#5797f6`
+- Text: `#0c5fdb`
+- Radius: 10px
+- Use: Light-blue callout surface, rendered at ~15% alpha (base `#5797f6`)
+
+### Badges
+
+**Icon Chip (Circular)**
+- Background: `#e9ecef`
+- Text: `#0c5fdb`
+- Radius: 9999px (full circle)
+- Height: 50px
+- Use: Circular icon chip / carousel prev-next control
+
+### Navigation
+- Background: `#ffffff`
+- Text: `#212529`
+- Font: 14px Inter weight 600 (dropdown items), 16px weight 600 (top-level)
+- Active: blue `#0c5fdb` text
+- Use: Top horizontal nav with Products / Resources / IR dropdowns ("데이터 구축", "데이터셋 스토어", "검증 솔루션 Datumo Eval", "AI 레드팀")
+
+---
+
+**Verified:** 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces)
+**Tier 1 sources:** https://selectstar.ai/ , https://blog.datumo.com/
+**Tier 2 sources:** getdesign.md/selectstar — no entry ("0 DESIGN.md files"); styles.refero.design/?q=selectstar — no specific entry (generic browse grid)
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: ~4px, Bootstrap-family scale
+- Scale: 4px, 8px, 12px, 16px, 18px, 24px, 38px, 64px
+- Notable: button horizontal padding lands at 18px (compact) or 38px (pill CTA); section rhythm at 64px
+
+### Grid & Container
+- Centered content column with a large hero anchored by the weight-300 headline
+- Feature sections use white cards on the grey `#f8f9fa` canvas, often in 2–3 column grids
+- Full-width dark navy (`#00001a`) sections for product/brand immersion
+- Blog uses a search bar plus a card grid of posts
+
+### Whitespace Philosophy
+- **Breathing room**: despite being a dense, data-heavy AI product, the marketing surface is airy with generous vertical rhythm.
+- **Flat segmentation**: content separates by background tint (`#f8f9fa` vs `#ffffff`) and light shadows rather than heavy borders.
+- **Restraint with color**: white and grey dominate; blue is spent only on the action layer.
+
+### Border Radius Scale
+- Small (4px): buttons, inputs, badges — the workhorse
+- Medium (10px): cards and content containers
+- Large (24px–26px): rounded/soft CTAs
+- Pill / Full (50px, `9999px`): floating CTA, circular icon chips
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, inline text, most surfaces |
+| Tint (Level 1) | `#f8f9fa` / `#e9ecef` background shift | Card and section separation without elevation |
+| Soft (Level 2) | `rgba(0, 0, 0, 0.15) 0px 1px 5px 0px` | Subtle lift on small elements |
+| Card (Level 3) | `rgba(0, 0, 0, 0.15) 0px 3px 8px 0px` | Feature cards, content panels |
+| Float (Level 4) | `rgba(0, 0, 0, 0.05) 0px 2px 6px 0px, rgba(0, 0, 0, 0.1) 0px 8px 19.2px 0px` | Floating pill CTA, prominent controls |
+
+**Shadow Philosophy**: Selectstar keeps depth soft and neutral. Shadows are low-opacity black (`rgba(0, 0, 0, 0.15)`) rather than brand-tinted — the brand identity lives in the blue action layer and the clean grey canvas, not in elevation. Most surfaces stay flat; a shadow appears only to lift interactive chrome (cards, the floating CTA) a small, believable distance off the page. Dark navy (`#00001a`) sections create depth through background contrast instead of shadow.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the single royal blue (`#0c5fdb`) for every action — CTAs, links, active nav
+- Set the primary hero light (Inter weight 300) at large sizes for research-grade confidence
+- Use weight 600 for all headings below the hero and for primary buttons
+- Keep body text in muted grey (`#6c757d`) at 16px / 1.8 line-height
+- Separate content with the grey canvas (`#f8f9fa`) and light `rgba(0,0,0,0.15)` shadows
+- Use 4px radius on workhorse buttons/inputs, 10px on cards
+- Reserve pills (24px–50px) for softer CTAs and circular icon chips
+- Use Inter for Latin and Noto Sans KR for hangul
+
+### Don't
+- Introduce a second saturated accent — blue is the only action color
+- Set the hero in a heavy weight — the weight-300 lightness is the signature
+- Use pure black (`#000000`) for body text — the neutral ladder tops out at `#212529`
+- Add heavy or colored drop shadows — depth stays soft and neutral
+- Spread blue across decorative elements — keep it on the action layer
+- Use large pill radius on content cards — cards are 10px, not rounded
+- Apply positive letter-spacing on display headings — Selectstar tracks tight
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, hero compresses, nav collapses to menu |
+| Tablet | 640-1024px | 2-column card grids, moderate padding |
+| Desktop | 1024-1440px | Full layout, centered hero, multi-column feature grids |
+
+### Touch Targets
+- Primary CTA at 45px height with 18px horizontal padding
+- Floating pill CTA at 64px height, unmistakable target
+- Nav dropdown items at 45px row height
+- Circular icon chips at 50px diameter
+
+### Collapsing Strategy
+- Hero: 72px headline scales down on mobile, weight 300 maintained
+- Nav: horizontal dropdowns collapse to a hamburger menu
+- Feature card grids: multi-column → stacked single column
+- Dark navy sections maintain full-width treatment, reduce internal padding
+
+### Image Behavior
+- Product screenshots and illustration accents sit on white cards with soft shadow
+- Cards maintain 10px radius across breakpoints
+- Sky-cyan (`#6ec1e4`) illustration touches scale with the section
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary / CTA / link: Selectstar Blue (`#0c5fdb`)
+- Hover: Blue Hover (`#1274e7`)
+- Accent tint: Accent Blue (`#5797f6`) at 15% alpha
+- Decorative cyan: Sky (`#6ec1e4`)
+- Background canvas: Canvas Grey (`#f8f9fa`)
+- Cards / nav: Pure White (`#ffffff`)
+- Surface alt / chips: `#e9ecef`
+- Headings: Slate (`#495057`) / Ink (`#212529`)
+- Body text: Body Grey (`#6c757d`)
+- Muted: `#adb5bd`
+- Dark section: Navy (`#00001a`)
+
+### Example Component Prompts
+- "Create a hero on a light grey `#f8f9fa` canvas. English headline at 72px Inter weight 300, line-height 1.25, letter-spacing -1.44px, color `#495057`. Below it a primary blue CTA: `#0c5fdb` background, white text, 4px radius, 9px 18px padding, 14px Inter weight 600 — hover `#1274e7`."
+- "Design a feature card: white `#ffffff` background, 10px radius, shadow `rgba(0,0,0,0.15) 0px 3px 8px`. Title 36px Inter weight 600, letter-spacing -0.72px, `#212529`. Body 16px Inter weight 400, `#6c757d`, line-height 1.8."
+- "Build a blog search bar: white `#ffffff` input, 4px radius, 9px 18px padding, 16px Inter, black `#000000` text, paired with a `#0c5fdb` Search button (white text, 4px radius)."
+- "Create top nav on white: Inter 16px weight 600 top-level items in `#212529`, dropdown items 14px weight 600, active item in blue `#0c5fdb`. Primary blue CTA 'CONTACT' right-aligned."
+- "Design a dark section: `#00001a` background, white text. Display heading 60px Inter weight 600, letter-spacing -1.2px. Body 16px, `rgba(255,255,255,0.7)`."
+
+### Iteration Guide
+1. Blue (`#0c5fdb`) is the single action color — never spread it decoratively
+2. Hero is Inter weight 300; everything else weight 600 (headings) or 400 (body)
+3. Body text is muted grey `#6c757d` at 16px / 1.8, never pure black
+4. 4px radius for buttons/inputs, 10px for cards, pills for soft CTAs and circular chips
+5. Depth is soft neutral shadow (`rgba(0,0,0,0.15)`), never brand-tinted
+6. Canvas is grey `#f8f9fa`; cards are white `#ffffff`
+7. Noto Sans KR for hangul, Inter for Latin
+
+---
+
+## 10. Voice & Tone
+
+Selectstar's voice is **credible, precise, and reassuring** — the register of a research-grade AI company that sells trust, not hype. The hero line "Solution for Trustworthy AI" sets the tone: a plain, confident claim rather than a superlative. Korean copy is equally measured, naming what the product does ("AI 개발을 가속하세요" — "Accelerate your AI development") and backing it with proof ("세계 최고 권위 AI 학회 등재" — "Published at the world's top AI conferences"). The audience is technical — ML engineers, data teams, enterprise AI leads — so the voice respects the reader as a peer and leads with evidence.
+
+| Context | Tone |
+|---|---|
+| Hero headlines | Declarative, evidence-first. "Solution for Trustworthy AI." Never superlative. |
+| Product names | Plain and functional. "데이터 구축", "데이터셋 스토어", "검증 솔루션 Datumo Eval", "AI 레드팀". |
+| CTAs | Direct, low-pressure. "문의하기", "도입 문의하기", "Try Demo", "Subscribe". |
+| Proof / credibility copy | Concrete, cited. Names conferences, awards, and dataset scope. |
+| Feature descriptions | Benefit-first, jargon decoded for a technical-but-broad audience. |
+
+**Voice samples (verbatim from live surfaces):**
+- "Solution for Trustworthy AI" — hero H1, selectstar.ai (mission-framed). *(verified live 2026-07-02)*
+- "AI 개발을 가속하세요" — section H2, selectstar.ai (benefit claim). *(verified live 2026-07-02)*
+- "세계 최고 권위 AI 학회 등재" — section H2, selectstar.ai (proof / credibility). *(verified live 2026-07-02)*
+- "Data-Centric AI Insights: Trends, Innovations, and Practical Advice" — blog page title, datumo.com/blog. *(verified live 2026-07-02)*
+
+**Forbidden register**: hype superlatives ("revolutionary", "game-changing"), fear-based AI-risk marketing, undefined jargon left unexplained, exclamation-heavy urgency.
+
+## 11. Brand Narrative
+
+Selectstar (셀렉트스타) is a Korean AI company built around a single premise: **AI is only as trustworthy as the data and evaluation behind it.** Founded in 2018 (CEO 김세엽 / Kim Se-yeop), the company began by solving the hard, unglamorous problem of high-quality training-data construction — crowdsourced collection and labeling — and grew into a full "data-centric AI" platform spanning dataset construction, a dataset store, data-voucher programs, and verification consulting. *(Founding year and leadership are widely documented public facts; see the sources comment below.)*
+
+As large language models moved from research into production, Selectstar extended the same rigor from data into **evaluation** — the product line marketed globally under the **Datumo** brand (Datumo Eval for LLM evaluation, plus an AI Red Team offering). The homepage's proof-first framing — "세계 최고 권위 AI 학회 등재" ("published at the world's top AI conferences") — reflects a company that treats academic credibility as a product feature, not a vanity metric.
+
+What Selectstar refuses, visible in its design: the hype aesthetic of consumer AI marketing (no neon gradients, no breathless superlatives) and the intimidating opacity of enterprise software. What it embraces: a clean grey-and-white research canvas, a single trustworthy blue, a light-weight hero that signals confidence over volume, and copy that leads with evidence. The design is the argument — "trustworthy AI" rendered as calm, precise, credible interface.
+
+## 12. Principles
+
+1. **Trust is the product.** Everything ladders up to "Trustworthy AI." *UI implication:* lead with proof (conferences, benchmarks, scope); keep the interface calm and credible, never salesy.
+2. **Evidence over hype.** The brand cites rather than claims. *UI implication:* pair every benefit statement with concrete proof; forbid superlatives in copy.
+3. **One action, one color.** Blue (`#0c5fdb`) means "do this." *UI implication:* reserve the saturated blue exclusively for CTAs, links, and active states.
+4. **Quiet confidence.** The weight-300 hero says "we don't need to shout." *UI implication:* lightness at the top, firm weight-600 structure below; restraint reads as authority.
+5. **Clarity for a technical audience.** ML engineers and data teams are peers. *UI implication:* decode jargon, keep density readable (16px / 1.8 body), and respect the reader's expertise.
+
+## 13. Personas
+
+*Personas below are fictional archetypes informed by publicly observable Selectstar user segments (ML engineers, enterprise AI leads, data-team managers), not individual people.*
+
+**정민석, 33, 서울.** An ML engineer at a large-model team who needs high-quality Korean evaluation sets. Chose Selectstar because the credibility signals (top-conference publications) told him the data methodology was rigorous, not crowdsourced noise.
+
+**Grace Lee, 41, Seoul/San Jose.** Head of AI at a mid-market enterprise adopting LLMs. Uses Datumo Eval to benchmark model quality before shipping. Values the calm, evidence-first surface — it reads like a research partner, not a vendor.
+
+**한지우, 29, 판교.** A data-operations manager coordinating labeling and dataset construction. Appreciates that the product names are plain ("데이터 구축", "데이터셋 스토어") and that the interface stays legible under dense, bilingual content.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no datasets / results)** | White card on `#f8f9fa` canvas. Single Ink (`#212529`) line explaining nothing is here yet, with one blue `#0c5fdb` CTA to start. No clutter. |
+| **Empty (search, no matches)** | Body-grey (`#6c757d`) single line: no results, with the filter/query visible above to adjust. Never a bare "no data". |
+| **Loading (list / results fetch)** | Skeleton cards at final dimensions, 10px radius, on the grey canvas. Soft flat pulse consistent with the low-shadow system. |
+| **Loading (evaluation running)** | Inline progress with blue `#0c5fdb` accent; previous content stays visible. |
+| **Error (request failed)** | Inline message in Ink (`#212529`) with a plain-language explanation and a retry. States what to do next, not just "오류". |
+| **Error (form validation)** | Field-level message below the input; describes what's valid, not just "필수". |
+| **Success (submitted / saved)** | Brief inline confirmation in a calm tone with the blue accent; next-step detail linked below. No celebratory emoji. |
+| **Skeleton** | `#e9ecef` blocks at final dimensions, 10px radius, flat pulse. |
+| **Disabled** | Muted-grey (`#adb5bd`) text on reduced-opacity surface; blue actions fade rather than turn grey to preserve brand read. |
+
+## 15. Motion & Easing
+
+**Durations**:
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-fast` | 120ms | Hover, focus, button press |
+| `motion-standard` | 200ms | Card / section reveal, dropdown, sheet |
+| `motion-slow` | 320ms | Page-level transitions, hero reveal |
+
+**Easings**:
+
+| Token | Curve | Use |
+|---|---|---|
+| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — cards, dropdowns, panels |
+| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
+| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions |
+
+**Motion rules**: Motion is functional and restrained — consistent with the calm, research-grade aesthetic. Nav dropdowns and cards fade/rise a few pixels at `motion-standard / ease-enter`; the floating pill CTA lifts subtly on hover. No bounce or spring — a trustworthy-AI product signals steadiness, not playfulness. Under `prefers-reduced-motion: reduce`, all transitions collapse to instant and the product remains fully functional.
+
+<!--
+OmD v0.1 Sources — Philosophy Layer (sections 10–15)
+
+Tier 1 live inspect (2026-07-02) via playwright getComputedStyle on two brand surfaces:
+- https://selectstar.ai/ — homepage (all token claims). Observed: hero H1 "Solution for
+  Trustworthy AI" Inter 72px / weight 300 / -1.44px / color rgb(73,80,87); section H2
+  "AI 개발을 가속하세요" 48px / 600 / -0.96px; H2 "세계 최고 권위 AI 학회 등재";
+  primary CTA "문의하기" bg rgb(12,95,219) #0c5fdb / 4px / white; body rgb(108,117,125)
+  #6c757d on canvas rgb(248,249,250) #f8f9fa; document.title "AI 평가 솔루션 기업 - 셀렉트스타".
+- https://blog.datumo.com/ (redirects to datumo.com/blog/) — confirms the same system:
+  CONTACT / Try Demo / Search buttons bg #0c5fdb; search input #ffffff 4px; H1 "Datumo Blog"
+  Inter 60px / 600 / rgb(73,80,87); page title "Data-Centric AI Insights...".
+
+Token-level claims (§1-9) are sourced from this live inspection.
+
+Voice samples (§10) are verbatim from the live surfaces (hero H1, section H2, blog title).
+
+Brand narrative (§11): Selectstar (셀렉트스타) is a Korean AI data / evaluation company;
+founded 2018, CEO 김세엽 (Kim Se-yeop); product line marketed globally as "Datumo"
+(Datumo Eval for LLM evaluation, AI Red Team). Product names ("데이터 구축", "데이터셋 스토어",
+"검증 솔루션 Datumo Eval", "AI 레드팀") are observed live in the nav. Founding year and
+leadership are widely documented public facts, not directly quoted from a verified
+Selectstar statement in this turn.
+
+Personas (§13) are fictional archetypes informed by publicly observable Selectstar user
+segments (ML engineers, enterprise AI leads, data-team managers). Names are illustrative;
+they do not refer to real people.
+
+Interpretive claims (e.g., "the design is the argument", "one action, one color",
+"quiet confidence") are editorial readings connecting Selectstar's observed design to its
+positioning, not directly sourced Selectstar statements.
+-->