Design System Inspiration of Selectstar

Overview

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

Primary tasks

• Benchmark model quality with Datumo Eval before shipping
• Commission training data collection and labeling for a model
• Check the conference publications before trusting the data methodology
• Compare the product lines named in the top navigation

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.

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.

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.

Colors

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.

Typography

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

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.

Layout

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

Responsive Behavior

Breakpoints

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

Elevation & Depth

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.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.soft: rgba(0, 0, 0, 0.15) 0px 1px 5px 0px
• shadow.card: rgba(0, 0, 0, 0.15) 0px 3px 8px 0px
• shadow.float: rgba(0, 0, 0, 0.05) 0px 2px 6px 0px, rgba(0, 0, 0, 0.1) 0px 8px 19.2px 0px

Motion & Easing

Durations:

Easings:

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:

• — 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 평가 솔루션 기업 - 셀렉트스타”.
• (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. –>

Components

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 레드팀”)

States

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

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.

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.

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

Governance

Known Gaps

• Contrast, tint-surface. Text #0c5fdb on #5797f6 measures 1.95:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.