Design System Inspiration of Tabling

1. Visual Theme & Atmosphere

Tabling (테이블링) is Korea's leading restaurant remote-waiting and discovery app — its tagline "맛집 도착 전 앱으로 미리 줄서기" (line up in advance via the app before you arrive) — and its web surface reads like a bright, appetite-forward consumer product rather than a utility. The canvas is pure white (#ffffff) with content organized into airy, shadowless blocks separated by soft grey surfaces (#f0f0f0, #f8f9fa) and thin hairlines (#dfe3e6, #d7dbdf). Body text sits in a warm near-black slate (#2e3137) rather than pure black, while hero and section headings step up to pure black (#000000) for maximum appetite-grabbing contrast. Everything is set in Pretendard, the de-facto Korean product font, tuned for dense hangul legibility.

The brand's identity color is a hot, saturated Tabling orange (#ff5100) — the color of the logo and of a single emphasis headline ("더 많은 맛집 정보, 테이블링 앱에서 확인하세요!") set at 22px weight 700. Rather than painting the interface orange, Tabling holds it back so the eye reads it as "the brand" and "look here." The genuinely distinctive functional accent is a bright electric mint (#1cfbce), used in exactly one place: the real-time waiting-team count ("17팀", "45팀") on ranking rows. That mint is the product's soul — it signals live, moving queue data at a glance, and nothing else on the page competes for that hue.

Depth is deliberately flat. Live inspection found box-shadow: none across the hero, nav, chips, cards, and list rows; separation comes entirely from background tints and hairlines, never elevation. Interactive chrome favors soft rounding — 24px region pills on a cool blue-tint (#f0f4ff), 12px media cards (some on a warm #fff7eb or #ffece8 wash), and 8px bordered containers. The result is a fast, mobile-native, food-friendly aesthetic: clean whitespace, warm ink, one orange for brand, one mint for "it's happening now."

Key Characteristics:

• Pretendard everywhere — weight 700 for headings, weight 400 for body/UI (Korean-optimized)
• Tabling orange (#ff5100) reserved for the logo and a single emphasis headline — brand, not chrome
• Signature mint (#1cfbce) used exclusively for the live waiting-team count — the real-time signal
• Warm near-black slate (#2e3137) for body; pure black (#000000) for hero/section headings
• Flat, shadow-free system — separation via #f0f0f0 / #f8f9fa surfaces and #dfe3e6 / #d7dbdf hairlines
• Blue-tint region pills (#f0f4ff, 24px radius) as the primary filled interactive element
• Warm tint surfaces (#fff7eb, #ffece8) for promotional / appetite moments
• Cool-grey text ladder (#505c81 → #6d7583 → #969fac) plus a strong-ink #131517 for ratings

2. Color Palette & Roles

Brand

• Tabling Orange (#ff5100): The brand color — logo and the single emphasis headline. Hot, saturated, appetite-forward. Held back from general UI so it always reads as "brand / look here."
• Warm Tint (#fff7eb): Soft orange-cream surface for warm promo and feature media cards.
• Warm Wash (#ffece8): A pinker orange wash used behind the app-download promotion band.

Functional Accent

• Waiting Mint (#1cfbce): Bright electric mint reserved exclusively for the live waiting-team count ("17팀"). The product's real-time signal — used nowhere else.

Text & Ink

• Ink Slate (#2e3137): Primary body and UI text — a warm near-black, never pure black for reading.
• Strong Ink (#131517): Near-black used for high-emphasis values like the rating figure ("4.6").
• Heading Black (#000000): Pure black for hero and section headings, for maximum contrast.
• Slate Blue (#505c81): Secondary label / structural text.
• Muted Slate (#6d7583): Tertiary text — category·location metadata ("한식·청진동").
• Faint Grey (#969fac): Lowest-emphasis text — review counts, dividers, placeholders.

Surface & Border

• Canvas White (#ffffff): Page background and card surfaces.
• Surface Grey (#f0f0f0): Neutral media / thumbnail card background.
• Surface Soft (#f8f9fa): Lightest cool-grey section separation.
• Chip Tint (#f0f4ff): Cool blue-tint background for region filter pills.
• Hairline (#dfe3e6): Thin dividers and borders in the shadow-free system.
• Border (#d7dbdf): Slightly stronger 1px card outline.

3. Typography Rules

Font Family

• Display & Body: Pretendard (with Pretendard Fallback) — used across the entire surface. Bold (700) for headings and store names; Regular (400) for body and metadata; a 600 mid-weight for the search field.

Hierarchy

Principles

• One family, weight-driven hierarchy: Pretendard carries everything; the 700/400 split is the primary hierarchy signal, not size jumps or a second typeface.
• Bold black for appetite, warm slate for reading: Headings go pure black (#000000) to grab; body drops to warm #2e3137 to read comfortably.
• Numbers earn their own weight: Ratings render at 700 in strong ink (#131517); the live team count renders at 700 in mint — data is treated as first-class typography.
• Hangul-first sizing: Body sits at 14px, generous for hangul legibility inside an information-dense discovery layout.

4. Component Stylings

Buttons

Region Filter Pill

• Background: #f0f4ff
• Text: #2e3137
• Radius: 24px
• Padding: 8px 16px
• Border: 1px solid rgba(0,0,0,0.04)
• Font: 14px Pretendard weight 400
• Use: Region filter pills on the hero ("전국", "서울 남부", "부산") — the primary filled interactive element on web

Inputs

Store Search

• Background: #ffffff
• Text: #2e3137
• Radius: 8px
• Font: 16px Pretendard weight 600
• Use: Store search field, placeholder "매장을 검색해 보세요"

Cards & Containers

Bordered Card

• Background: #ffffff
• Border: 1px solid #d7dbdf
• Radius: 8px
• Use: Bordered content / thumbnail container (no shadow)

Warm Media Card

• Background: #fff7eb
• Radius: 12px
• Use: Warm-tint promo / feature media card

Neutral Media Card

• Background: #f0f0f0
• Radius: 12px
• Use: Neutral thumbnail / media card

Badges

Waiting Count

• Text: #1cfbce
• Font: 12px Pretendard weight 700
• Use: Live waiting-team count ("17팀") — the signature real-time mint signal

List Items

TOP100 Store Row

• Text: #2e3137
• Height: 146px
• Use: Ranking list row — store name 18px/700 #2e3137, category·location meta #6d7583 at 13px, rating value #131517 at 13px/700, review count #969fac, live waiting count in mint #1cfbce

---

Verified: 2026-07-02 Tier 1 sources: https://www.tabling.co.kr/ , https://www.tabling.co.kr/top100 , https://techblog.tabling.co.kr/ Tier 2 sources: getdesign.md/tabling (HTTP 200 generic template — no Tabling entry) ; styles.refero.design/?q=tabling (no Tabling match — KR under-coverage) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 4px, scaling 4 / 8 / 12 / 16 / 24 / 40
• Hero container padding measured at 40px 16px 12px; region pills at 8px 16px
• Generous vertical rhythm between full-width bands

Grid & Container

• Centered single-column mobile-first layout
• Hero: black heading anchor over a search field and a horizontally wrapping row of category buttons
• Region filter pills arranged in a wrapping pill row beneath a section heading
• TOP100 ranking as a vertical list of ~146px rows (thumbnail + name + meta + live count)
• Feature bands alternate white (#ffffff) with tinted surfaces (#f0f0f0, #f8f9fa, warm #fff7eb / #ffece8)

Whitespace Philosophy

• Airy over dense: despite being a data-rich discovery product, the marketing surface breathes with generous section spacing.
• Flat segmentation: sections separate by background tint and hairlines (#dfe3e6, #d7dbdf), never shadow.
• Pill rhythm: repeated 24px region pills create a consistent horizontal cadence.

Border Radius Scale

• Extra-small (4px): fine inner elements
• Small (8px): bordered cards, search field, inputs
• Medium (12px): media / feature cards — the card workhorse
• Chip (24px): region filter pills
• Pill (100px) / Full (9999px): fully-rounded chips and avatars

6. Depth & Elevation

Shadow Philosophy: Tabling is a near-shadowless system. Live inspection found box-shadow: none across the hero, nav, region pills, cards, and ranking rows. Depth and grouping are communicated through flat tinted surfaces and thin hairlines, keeping the discovery UI feeling fast and mobile-native. When emphasis is needed the system reaches for color — the mint (#1cfbce) waiting count, the orange (#ff5100) brand mark, or a warm surface (#fff7eb) — never elevation.

7. Do's and Don'ts

Do

• Use Pretendard throughout — weight 700 for headings/store names, weight 400 for body and metadata
• Reserve orange (#ff5100) for the brand mark and a single emphasis headline — keep it rare
• Use mint (#1cfbce) only for the live waiting-team count — it is the real-time signal
• Set hero and section headings in pure black (#000000) for appetite-grabbing contrast
• Use warm near-black slate (#2e3137) for body text, not pure black
• Separate sections with flat tints (#f0f0f0, #f8f9fa) and hairlines (#dfe3e6, #d7dbdf), never shadow
• Use 24px blue-tint pills (#f0f4ff) for region/filter chips and 12px radius for media cards
• Render ratings at 700 weight in strong ink (#131517) so numbers read as data

Don't

• Paint large UI areas orange — #ff5100 is brand accent, not a background
• Reuse the mint (#1cfbce) for anything but the live waiting count — it dilutes the signal
• Add drop shadows for elevation — Tabling is a flat, shadow-free system
• Use pure black (#000000) for body copy — reserve warm slate #2e3137
• Introduce a second typeface — Pretendard owns display and body alike
• Use sharp square corners on chips or cards — geometry is softly rounded (8–24px)
• Mix in extra saturated hues — orange and mint are the only two accents

8. Responsive Behavior

Breakpoints

Touch Targets

• Region pills at generous 8px 16px padding for comfortable tapping
• Category buttons sit in a large ~72px hit block on the hero
• Search field spans the hero width for an unmistakable target

Collapsing Strategy

• Hero: heading + search + category row compress; category buttons wrap
• Region pill row: wraps / scrolls horizontally on narrow viewports
• TOP100 list: fixed vertical rows maintained across sizes
• Tinted / warm bands maintain full-width treatment

Image Behavior

• Restaurant thumbnails sit in 12px-radius cards, no shadow at any size
• Warm-tint promo cards (#fff7eb) keep their radius and flat treatment across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Brand / logo: Tabling Orange (#ff5100)
• Live waiting signal: Waiting Mint (#1cfbce)
• Body text: Ink Slate (#2e3137)
• Rating / strong value: Strong Ink (#131517)
• Heading: Pure Black (#000000)
• Metadata: Muted Slate (#6d7583)
• Faint / review counts: Faint Grey (#969fac)
• Background: Canvas White (#ffffff)
• Surfaces: Grey (#f0f0f0), Soft (#f8f9fa), Warm (#fff7eb), Wash (#ffece8)
• Chip tint: Chip (#f0f4ff); Hairline (#dfe3e6); Border (#d7dbdf)

Example Component Prompts

• "Create a discovery hero on white background. Heading 24px Pretendard weight 700, pure black #000000: '오늘 뭐 먹지? 맛집 검색은 테이블링'. Below it a search field (white, 8px radius, 16px Pretendard weight 600) and a wrapping row of region pills: #f0f4ff background, #2e3137 text, 24px radius, 8px 16px padding, 14px Pretendard, 1px solid rgba(0,0,0,0.04) border. No shadow."
• "Build a restaurant ranking row (146px): store name 18px Pretendard weight 700 #2e3137; below it a live waiting badge '17팀' in 12px weight 700 mint #1cfbce; rating '4.6' 13px weight 700 #131517 with review count '(2,172)' in #969fac; category·location '한식·청진동' 13px weight 400 #6d7583."
• "Design a warm promo band: #ffece8 wash background, emphasis headline 22px Pretendard weight 700 in orange #ff5100. Media cards inside use #fff7eb or #f0f0f0 background with 12px radius, no shadow."

Iteration Guide

1. Pretendard for everything; 700 for headings/names, 400 for body/meta, 600 for search
2. Orange (#ff5100) is brand-only; mint (#1cfbce) is the live-waiting signal only
3. No shadows — separate with #f0f0f0/#f8f9fa tints and #dfe3e6/#d7dbdf hairlines
4. Rounded geometry — 24px pills, 12px cards, 8px bordered containers
5. Body text is warm #2e3137; headings are pure #000000; ratings are strong #131517
6. Keep the palette to two accents; let white and warm tints carry the appetite

---

10. Voice & Tone

Tabling's voice is friendly, appetite-first, and practical — a knowledgeable local friend who helps you decide where to eat and skips the line for you. The hero "오늘 뭐 먹지? 맛집 검색은 테이블링" ("What should we eat today? Restaurant search is Tabling") opens with the everyday question every diner asks, then answers it. Copy is casual-polite Korean, benefit-led, and concrete: it names the action (미리 줄서기 / line up in advance), the payoff (no waiting on-site), and the scope (전국 맛집 / restaurants nationwide).

Voice samples (verbatim from live surfaces):

• "오늘 뭐 먹지? 맛집 검색은 테이블링" — hero heading, 24px/700 pure black. (verified live 2026-07-02)
• "지역별 인기 웨이팅 맛집" — section heading, 20px/700. (verified live 2026-07-02)
• "더 많은 맛집 정보, 테이블링 앱에서 확인하세요!" — emphasis headline, 22px/700 orange #ff5100. (verified live 2026-07-02)
• Page title: "테이블링 | 맛집 도착 전 앱으로 미리 줄서기". (verified live 2026-07-02)

Forbidden register: fear-based urgency, hard-sell discounting language, undefined jargon, exclamation-stacked hype. One friendly exclamation on a promo headline is the ceiling.

11. Brand Narrative

Tabling (테이블링) is a Korean restaurant remote-waiting and discovery service operated by Wad Inc. (와드). Its founding premise addresses a distinctly everyday Korean pain point: standing in a physical line outside a popular 맛집 (well-reviewed restaurant). Tabling lets diners join a restaurant's waiting queue remotely from the app — "맛집 도착 전 앱으로 미리 줄서기" (line up in advance before you arrive) — so time spent queuing on the pavement becomes time free to do anything else until a table is ready.

The product grew from a single remote-waiting feature into a broader restaurant-discovery platform: nationwide search by cuisine and region, popularity rankings ("전국 테이블링 순위 TOP 100"), ratings, and real-time waiting-team counts. The homepage frames the brand as the answer to the daily "오늘 뭐 먹지?" question — first help me choose, then get me seated without the wait.

What Tabling refuses, visible in its design: the heavy, coupon-cluttered chrome of legacy deal apps and the anxiety of on-site queuing. What it embraces: a bright, appetite-forward white surface; a single warm orange for the brand; and — most distinctively — a live mint (#1cfbce) waiting count that turns an invisible, stressful wait into a visible, moving number you can trust.

12. Principles

1. Answer "what should we eat?" first. Discovery precedes the queue. UI implication: lead with search, cuisine categories, and regional rankings before any waiting mechanics.
2. Make the wait visible. The stress of queuing comes from not knowing how long. UI implication: the live team count renders in the one unmistakable mint (#1cfbce), never buried in body text.
3. One brand color, held back. UI implication: reserve orange (#ff5100) for the logo and rare emphasis so it always reads as brand, never as decoration.
4. Flat and fast. Mobile-native clarity beats decorative depth. UI implication: no shadows; separate with tint and hairlines; keep the page quick to scan while hungry.
5. Appetite through warmth, not clutter. UI implication: warm tints (#fff7eb, #ffece8) and pure-black headings create appetite; avoid stacked badges, banners, and discount noise.

13. Personas

Personas below are fictional archetypes informed by publicly observable Tabling user segments (Korean diners avoiding on-site queues, groups deciding where to eat), not individual people.

김민준, 28, 서울. Meets friends on weekends and hates arriving to a 40-minute line. Uses Tabling to join the queue on the subway ride over, watching the live team count drop. Chose the app because the wait finally felt knowable, not random.

이서연, 33, 경기. Plans family dinners and searches by region and cuisine before deciding. Values the TOP100 ranking and star ratings to avoid a bad pick. Trusts the calm, non-spammy interface over coupon-heavy rivals.

박도윤, 41, 부산. A frequent traveler who lands in a new city and needs a reliable local 맛집 fast. Relies on regional rankings and the real-time waiting signal to pick somewhere good that he can actually get into tonight.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet, matching the flat, fast aesthetic. Region pills respond to press with a subtle scale/opacity shift; list rows fade-in from below at motion-standard / ease-enter. The one place motion carries meaning is the live waiting-team count — it updates with a brief mint highlight so a changing number reads as fresh, live data rather than a silent swap. No bounce or spring — a queue product signals steadiness. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the waiting count updates without the highlight; the product remains fully functional.