CatchTable is Korea's premier restaurant-reservation platform — a service that lets diners book hotel buffets, sushi omakase, and hanwoo tasting menus with the same calm as flipping through a magazine. The atmosphere on the home surface is editorial restraint: a white canvas (#FFFFFF), deep black ink (#000000 for body, #222222 for titles), zero ambient shadow, and a hard-square chrome that lets food photography do the speaking. Where a delivery app would flood the screen with red CTAs and stamp-shaped discount stickers, CatchTable shows you photographs and titles — the brand orange #FF3D00 appears exactly where you place your finger, and almost nowhere else.
This isn't accidental minimalism — it's a vanilla-extract token system with 145 :root design tokens discovered live (the namespace is _11bicz7*, a hashed identifier, so the system has no semantic names exposed publicly — only values). The token sheet defines a five-tier shadow ladder, a 33-color palette across brand / ink / surface / support-cool / semantic / overlay, a 10-step type scale that all share a 150% line-height contract, and a radius family that defaults to 0px on 92% of elements and softens only for rasterised thumbnails (4px), interactive controls (8px), and the primary CTA pill (12px). The discipline is the design.
Typographically the system is Pretendard-only — no display font, no brand-display moment, no signage-typography flex. Pretendard 400 carries roughly 91% of all rendered text, with 700 reserved for section titles (음식종류별 BEST, 캐치 매거진) and price emphasis. The home flow opens with a search field on #F5F5F5 fill, a location chip row, a 25-slide Swiper hero, a "어디로 가시나요?" neighbourhood-discovery row, a horizontally scrolling "음식종류별 BEST" pillar, and an editorial "캐치 매거진" magazine module before reaching a five-tab bottom nav (홈 / 저장 / 내 주변 / 마이다이닝 / MY). The overall impression is taste-maker, not utility — the brand wants to feel closer to a Michelin guide than to OpenTable.
Key Characteristics:
#FF3D00 (CatchTable Orange) deployed sparingly — single-CTA discipline, not flooded brand color0px radius on 92% of elements) — sharpness amplifies food photographystatus-bar-top reservation — desktop is a porthole#FF3D00): Brand primary. Used exclusively on the primary CTA pill (12px radius, #FFF text, 14px/500). In a 3000-element scan of the home surface, this color appears just 4 times in text/icon contexts and once as a background fill — scarcity is the discipline.#FFFFFF): Page canvas, card surfaces. Clean, photograph-amplifying.#222222): Section sub-titles, restaurant names, neighbourhood chip labels.#000000): Body text default, link text, nav labels. Maximum contrast.#FA8D6B): Soft variant for pressed states and warm accents.#FC9086): Active-press / hover-state surface.#FDF0EC): Banner/notice surface fill.#FCF3F2): Subtle alert surface fill.#000000): Default body text — used everywhere by default.#222222): Section sub-titles, list-item titles.#424242): Tab-bar labels at rest.#666666): Footer policy links, secondary descriptions.#5F5F5F): Chip-button text (e.g. 현재 위치로).#9E9E9E): Search-input placeholder.#B5B5B5): Disabled controls.#8F8F8F): Footer regulatory text, icon default.#AAAAAA): Decorative icons.#FFFFFF): Page background.#F9F9F9): Footer block fill.#F5F5F5): Search-input fill, chip rest state.#F2F5F7): Optional cool-tinted surface.#F0F4FA): Info-tint surface paired with #186ADE.#00000014): Default hairline divider (8% black).#E4E4E4): Standard card and input border.#DCE3E8): Cool-themed surface border.#1C2B36), Mid (#3E5463), Soft (#7A909E), Light (#9FB1BD).#186ADE) / Info Soft (#75B1FF) / Info Tint (#F0F4FA)#43C478) / Success Strong (#077D55) / Success Tint (#EBF7ED)#D91F11): Distinct from brand orange — semantic red is darker, redder. Don't confuse.#F5C518)#8F49DE): Reserved for premium-tier badges (e.g. members-only restaurants).rgba(20,24,29,0.74)): Swiper slide-counter pill.rgba(0,0,0,0.7), rgba(0,0,0,0.6)): Modal/sheet backdrops.Pretendard, -apple-system, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif| Role | Size | Weight | Line Height | Notes |
|---|---|---|---|---|
| Section Title | 20px | 700 | 150% | 음식종류별 BEST, 캐치 매거진, search hero label 어디로 가시나요? |
| Big Section | 18px | 700 | 150% | Larger card titles |
| Card Title | 16px | 600 | 150% | Restaurant card titles in list / detail surfaces |
| Body Default | 14px | 400 | 150% | Dominant — 900 of 1149 sampled elements; nav labels, list items, body |
| Tab Label | 14px | 400 | 150% | Bottom-tab labels |
| Chip Label | 14px | 500 | 150% | Geo chips, filter chips |
| Search Input | 13px | 500 | 150% | Placeholder color #9E9E9E |
| Neighbourhood Chip | 13px | 500 | 150% | 청담, 압구정·로데오 style |
| Caption | 12px | 400 | 150% | Timestamps, secondary meta |
| Footer Body | 11px | 400 | 150% | Regulatory disclosure text |
| Policy Link | 11px | 500 | 150% | Footer 서비스 이용약관 row |
| Micro Meta | 10px | 500 | 150% | Slide counter 2 / 25, bottom-tab compact mode |
line-height: 150%. Don't break this — vertical rhythm depends on it.letter-spacing: normal is universal.The geometry is hard-square by default:
| Use | Radius | Frequency |
|---|---|---|
| Default chrome (canvas, sections, list rows, dividers, search input) | 0px | 1063 of 1149 sampled elements (92%) |
| Photo thumbnail (rasterised, inside Swiper) | 4px (also 4.05px legacy) | 40 |
| Interactive control (button, card pill, filter pill) | 8px | 29 |
| Avatar / circular icon | 50% | 13 |
| Primary CTA pill | 12px | 3 |
| Pill-full (rare, special-case) | 999px | 1 |
The visual signature is the absence of softening on the chrome. Sharp corners frame food photography the way a magazine frames a photograph. When porting: do not apply a global border-radius: 8px reset — you will lose the brand entirely.
Five-tier shadow ladder defined in :root, but used sparingly on the home surface (only 2 distinct shadows fired across 3000+ elements observed). Depth is mostly carried by borders + surface tints.
| Tier | Token | Recipe |
|---|---|---|
| xs | --shadow-xs | 0 1px 2px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.08) |
| sm | --shadow-sm | 0 2px 8px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.08) |
| drop | --shadow-drop | 0 2px 12px rgba(0,0,0,.12) |
| md | --shadow-md | 0 6px 12px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08), 0 0 4px rgba(0,0,0,.08) |
| lg / modal | --shadow-lg | 0 16px 20px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.08), 0 0 8px rgba(0,0,0,.08) |
Reserve elevation for: floating action buttons over photography, bottom sheets, sticky search bars on scroll, modal surfaces. Don't fire on cards-at-rest — borders or hairline alpha (#00000014) handle separation.
Observed spacing scale (px): 4 / 8 / 12 / 16 / 20 / 24 / 32 / 45 / 60.
status-bar-top and status-bar-padding-top classes — the design target is the in-app surface, not desktop.pb-45 and mb-16 legacy utility classes — 45px bottom-of-section, 16px between modules.음식종류별 BEST is a swipe-row of best-of pills, not a vertical grid.4px radius — the only soft-corner surface in the system.#8F8F8F (icon-default), darkening to #000 on active states.#FF3D00 fill, #FFF text, 14px/500 Pretendard, 12px radius, ~44px tall — only one variant observed. Single-color, single-shape, single-CTA discipline.#F5F5F5 fill, sharp 0px corners, 13px/500 placeholder #9E9E9E, inline search icon left.청담, 압구정·로데오, etc.).#5F5F5F, leading geo icon — text-style action button.2 / 25 / 전체) on rgba(20,24,29,0.74) overlay.#F9F9F9 surface, 14px/400 corporate info, 11px/500 policy links separated by | pipe glyphs, 11px/400 regulatory disclaimer.#000 on #FFF body is 21:1 (max); #222/#FFF titles are 16.1:1; #FF3D00/#FFF CTA pill is 3.7:1 — fails AA for normal text but passes AA for large text (18pt+/14pt bold equivalent). Since the CTA pill ships 14px/500 (below the bold threshold), this sits at the borderline AA fail for body. The system as shipped accepts the trade-off; ports must either bold the CTA label or darken the orange to #E63600 (≈4.6:1) for strict AA.<main> is present but no <aside> / explicit role annotations on the bottom tab bar. A11y debt; flag for ports.Voice shape (analyst characterisation — not verbatim CatchTable copy): curatorial-warm, gerund-light, second-person-implied. The on-surface copy treats the user as a diner choosing a story, not a customer completing a transaction.
Don'ts:
Voice samples (fresh OmD-original characterisations, not lifted from CatchTable copy — three options to triangulate the shape):
IP guardrail: The title-tag phrase "즐거운 미식 생활의 시작" is quoted once in §11 as a factual brand-narrative reference and is not adopted as headline copy in any sample above. The gerund-lite, curatorial register is documented as a shape, not reproduced.
CatchTable is operated by 주식회사 와드 (WAD Inc.), founded by 용태순 (Yong Tae-soon, current 대표/CEO). Headquartered in Bundang, Gyeonggi-do (corporate disclosure observed on the home footer, 2026-05-15). The service positions itself as a premium-leaning restaurant-reservation platform with editorial inflection — the 캐치 매거진 module on the home surface signals that the brand treats discovery as guidebook-style curation, not a transactional booking listing. Title-tag positioning observed on the home surface: "캐치테이블 | 즐거운 미식 생활의 시작" (factual evidence of curatorial-warm positioning, not adopted as design copy).
FILL IN (verification deferred — Crunchbase / DART access needed): founding year, total funding raised, employee headcount, investor list, monthly active users, reservation volume. These are reported in Korean trade press but were not verified at OmD attribution fidelity in this pass.
Personas are illustrative sketches derived from observable IA decisions (e.g. 마이다이닝 hub, 호텔 뷔페 / 스시 오마카세 / 한우 오마카세 best-of pillars). They are not based on internal CatchTable research and should be treated as analyst-inferred FILL-IN placeholders.
Things CatchTable's design avoids — and which a port must avoid to keep the inspiration:
0px radius — sharpness is the brand.Motion tokens were not captured in this CDP pass — only entry-fade on Swiper transitions was visibly inferred. The home Swiper uses a default Swiper.js horizontal slide (cubic-ease, ~300ms). Detailed motion tokens (durations, easings, FAB rise, sheet present, tab-switch) require a follow-up UPDATE pass with interaction-triggered capture. Flagged.
DS surfaces probed and result:
design.catchtable.co.kr → DNS no-resolve (000)tech.catchtable.co.kr → DNS no-resolve (000)www.catchtable.co.kr/brand → 302 redirect (no brand portal)github.com/catchtable → 200 but only 3 public repos (prerender-java, claude-hud, brand-review-tool); no design-system / Storybook / tokens repogetdesign.md/catchtable → "No designs found for 'catchtable'"styles.refero.design/?q=catchtable → no result cards:root vars on app.catchtable.co.kr/).Live capture method: Chrome DevTools Protocol over localhost:9222, websocket-client with suppress_origin=True, Runtime.evaluate against document.documentElement for full :root custom-property enumeration plus a 3000-element getComputedStyle frequency analysis. Browser: Chrome/148.0.7778.97. Captured 2026-05-15T07:10Z.
Surfaces inspected: https://app.catchtable.co.kr/ (35 element samples, 145 :root vars, 3000-element frequency table) + https://app.catchtable.co.kr/ct/shop/list?categoryName=서울 (4 element samples — degraded desktop shell, used to confirm primary CTA spec).
Proof artefacts:
assets/_reference/.live-inspect-proof.json — 10 raw_samples (≥5 floor), full frequency proof, 33-color token map, 5-tier shadow ladder.assets/_reference/.live-inspect-raw.json — provenance manifest.assets/_reference/tokens.json — normalised colour / typography / radius / elevation / spacing.assets/_reference/fonts.json — Pretendard stack + weight-role map.assets/_reference/structure.json — IA + heading outline + tone-observed._research.md — 5-tier source map + IP guardrails + flags.IP guardrails: Brand assets (logo, name, primary #FF3D00) referenced for inspiration only. Title-tag positioning phrase quoted once as §11 narrative evidence; not reproduced as design copy. §10 voice samples are fresh OmD analyst paraphrases. Token values reproduced as factual CSS-custom-property values under analytical fair-use.
Confidence: High for tokens, type, radius, elevation, colour, IA spine, footer disclosure. Medium for personas (analyst-inferred from IA, not from internal research). Low / Flagged for motion (not captured), restaurant-detail page, list page, sell/reservation flow, MY tab — all require an UPDATE pass via mobile-emulated CDP.
Verification date: 2026-05-15.
CatchTable is Korea's premier restaurant-reservation platform — a service that lets diners book hotel buffets, sushi omakase, and hanwoo tasting menus with the same calm as flipping through a magazine. The atmosphere on the home surface is editorial restraint: a white canvas (#FFFFFF), deep black ink (#000000 for body, #222222 for titles), zero amb
Brand
Accent
Neutrals
Semantic
Type Scale
Rendered in system-ui to clearly show scale & weight.
Fonts
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 4px | |
| Section gap | 32px | |
| Card padding | 16px | |
| Element gap | 12px |
Border Radius
| Element | Value | Preview |
|---|---|---|
| buttons | 0px | |
| inputs | 0px | |
| cards | 0px | |
| dialogs | 0px | |
| badges | 0px |
Elevation