Design System Inspiration of Sinsang Market (Dealicious)

1. Visual Theme & Atmosphere

Dealicious (딜리셔스) runs 신상마켓 (Sinsang Market), the wholesale platform of Seoul's Dongdaemun fashion trade. In its own words, Dealicious "moved the B2B trade of the Dongdaemun fashion industry, which had only ever happened offline, online" — removing physical limits so that more products change hands more easily. Sinsang Market launched in July 2013 and connects Dongdaemun wholesalers with retailers in Korea and abroad; the company says more than 80% of Dongdaemun wholesalers have joined and 93% of retailers come back, and it counts 11,000 active wholesale shops, 130,000 active retail shops and 24,000 transactions a day. Around the marketplace sit 신상스튜디오, a one-stop product-photography service, and 신상애드, an advertising product for wholesalers. The company page cites 82.5 billion won of cumulative investment, 76 billion won of monthly transactions and 3 trillion won in total, and a member of its ad-platform team quoted there says users call Sinsang Market "the KakaoTalk of Dongdaemun". The mission line on every page is "고객의 사업을 쉽고 즐겁게" — making customers' business easy and enjoyable.

The corporate site at dealicious.kr is white and typographic. Headings are heavy (weight 700 at 60px on the hero, 30px for sections) in slate #3e4149 or near-black #222222; body text defaults to #000000, and a ladder of cool greys (#686e7b, #8f97a7, #a6adbd, #bec5d2) carries secondary copy, unselected tabs and fine print. The site's one filled action is a near-black #222222 pill, 인재영입 바로가기, set in a banner card beside a white 블로그 바로가기 pill. Selection is marked in two ways: #222222 bold text for the current IR tab and footer language, and a deep navy #1a2241 fill for the selected career filter. Pills are fully rounded (50px) and filters 40px; borders are 1px #dfe3ed, and the IR list is divided by #ebeef6 rules.

Key Characteristics:

• White, typographic corporate pages with heavy 700 headings in #3e4149 and #222222
• One filled action colour: #222222 pills with white labels; a white pill with #3e4149 label beside it
• Selected states in #222222 bold text, or a #1a2241 navy fill for the career filter
• Cool grey text ladder: #686e7b, #8f97a7, #a6adbd, #bec5d2
• Round geometry: 50px pills, 40px filters and language selector
• Banner cards that rest on a soft shadow and lift 5px on hover; every other captured element is flat

Primary tasks

• Browse wholesale inventory and order from a phone instead of a dawn market run.
• List new arrivals daily so retailers see the catalog fast.
• Settle payment for a wholesale order inside the app.
• Adjust a search when no wholesale listings match.

2. Color Palette & Roles

Every token below was read on 2026-09-30 from dealicious.kr, /ir-center and /career by the deterministic collector, and hover values by the fixed keyboard probe. The tokens describe the Dealicious corporate website. The Sinsang Market product (sinsangmarket.kr and the app) is a separate domain that was not captured — it answered a plain HTTP request with a Cloudflare challenge — and none of its values is claimed.

Primary

• Ink Black (#222222): The fill of 인재영입 바로가기, the site's one filled call to action (219 × 55 pill with #ffffff label, capture home #17); the label of the selected IR tab 일반공고 (surface-2 #6, weight 700); and the selected footer language 한국어 (home #35). It is the primary because it is the colour the site uses for its primary action and, on two of the three captured pages, for selection. The navy #1a2241 also renders in a primary role, but only once — the selected filter on the career page — so it is the accent.
• On Primary (#ffffff): Labels on the #222222 pill and the #1a2241 selected filter.

Accent

• Deali Navy (#1a2241): Fill and 1px border of the selected career filter (전체), with a #ffffff label at weight 700.

Neutral & Surface

• White (#ffffff): The white pill and the unselected career filters. The body element computes a transparent background, so the page white is the browser canvas.
• Hairline (#dfe3ed): The 1px border of the career filters and the IR language selector.
• Divider (#ebeef6): The 1px rule under each IR disclosure row.
• Hover fills are #f5f6fb (career filters, language selector); they come from the probe only and live in the components.

Text

• Ink (#000000): The document default text colour and the disclosure rows.
• Slate (#3e4149): Section headings, story and banner headings, footer lines and the white pill's label; also the hover colour of unselected IR tabs.
• Grey (#686e7b): Reading text on the IR page.
• Muted (#8f97a7): Unselected IR tabs, story descriptions and the IR eyebrow label.
• Faint (#bec5d2): Unselected footer languages.
• Faint Alt (#a6adbd): Unselected career filter labels.

Brand assets, not tokens

• Logo navy (#001339): the June record read the square logo's fill as #001339. It was not re-measured this session, and no captured interface element renders it.

3. Typography Rules

Font Family

• Live surface use: the body and every captured element compute Roboto, "Noto Sans KR", "Noto Sans SC", "Noto Sans JP", sans-serif (227 observed uses of Roboto). The site ships Roboto WOFF2/WOFF files under dealicious.kr/_next/static/media/ (e.g. roboto-cyrillic-ext-400-normal.c8c031de.woff2), but the collector classified the rendered face as system / high: on the capture machine it did not register as a loaded web font. No loaded-web-font claim is made.
• Official distributed font assets: Roboto's OFL.txt in the Google Fonts repository reads "Copyright 2011 The Roboto Project Authors … licensed under the SIL Open Font License, Version 1.1" (opened 2026-09-30). The identification rests on the declared family name.
• Official product use: no Dealicious page opened this session names its typefaces, so no statement of official product use is made.
• Declared only (no visible use): Noto Sans KR, Noto Sans SC and Noto Sans JP (self-hosted files under the same path) and swiper-icons, each with 0 observed uses; none was loaded at capture.
• Unresolved: Roboto has no Hangul, and the Korean face declared after it did not load, so the face that renders Korean text depends on the visitor's system. It is not named here.

Hierarchy

Principles

• Heavy headings, plain body: every heading from 26px up is weight 700; body and captions are 400.
• A 1.5 rhythm: almost every captured role sets its line height at 1.5 × the size.
• Grey for secondary: descriptions and unselected controls step down the cool grey ladder rather than using opacity.

4. Component Stylings

Buttons

Recruit Pill (primary)

• Background: #222222; label #ffffff
• Radius: 50px; padding 14px 31px; height 55px
• Font: 18px weight 700, 27px line
• States: no change on the button itself; its banner card lifts on hover and pressed; focus draws only the browser ring
• Use: 인재영입 바로가기 in the recruiting banner card

Blog Pill

• Background: #ffffff; label #3e4149
• Same geometry and font as the recruit pill
• Use: 블로그 바로가기 in the tech-blog banner card

Language Selector

• Border: 1px solid #dfe3ed; label #3e4149
• Radius: 40px; padding 10px 18px; height 43px
• Font: 14px weight 500
• Hover / pressed: fill #f5f6fb (0.15s)
• Use: 국문 on the IR page

Cards

Banner Card

• Shadow at rest: rgba(34, 34, 34, 0.08) 4px 10px 20px 0px
• Hover / pressed: rgba(34, 34, 34, 0.18) 4px 12px 20px 6px and a 5px lift
• Use: the recruiting and tech-blog banners that hold the two pills

Tabs & Filters

Career Filter

• Unselected: #ffffff fill, #a6adbd label, 1px #dfe3ed border, 17px weight 400
• Selected: #1a2241 fill and border, #ffffff label, weight 700
• Radius: 40px; padding 14px 20px; height 50px
• Hover / pressed (unselected): fill #f5f6fb (0.2s)

IR Tab

• Unselected: #8f97a7, 16px weight 400
• Selected: #222222, weight 700
• Hover / pressed (unselected): #3e4149 (0.15s)

Footer Language Switch

• Unselected: #bec5d2, 15px weight 700; selected #222222

Lists

Disclosure Row

• Text: #000000, 16px weight 400
• Border: 1px #ebeef6 at the bottom
• Height: 73px
• Use: IR disclosure list

---

Verified: 2026-09-30 (deterministic collector capture of three public, logged-out pages of dealicious.kr plus fixed keyboard-probe state reads and first-party context) Tier 1 sources: https://dealicious.kr/ ; https://dealicious.kr/ir-center ; https://dealicious.kr/career ; https://dealicious.kr/introduction ; https://dealicious.kr/services ; https://dealicious.kr/people-culture Tier 2 sources: getdesign.md/dealicious (HTTP 200, the name does not appear in the response) and styles.refero.design/?q=dealicious (HTTP 200, the name appears only as the echoed query), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

5. Layout Principles

Spacing System

• Pills: 14px vertical, 31px horizontal
• Career filters: 14px vertical, 20px horizontal
• Language selector: 10px vertical, 18px horizontal

Grid & Container

• Content sits in a 1200px column (section headings and footer text are 1200px wide at the 1440px viewport)
• The IR disclosure list uses a three-column grid per row (80px, flexible, 160px), 1198px wide
• Home opens with the white 60px hero headline (its background is imagery the collector did not record) and closes with two banner cards above the footer

Whitespace Philosophy

• Generous vertical rhythm between sections; grouping by headings and hairlines rather than filled panels

Border Radius Scale

• 0px: most elements
• 40px: career filters and the language selector
• 50px: pills

6. Depth & Elevation

Shadow Philosophy: all 227 elements the collector recorded compute box-shadow: none. The one exception it did not record is the banner card: the probe read a soft resting shadow on it and a deeper shadow with a 5px lift on hover.

7. Do's and Don'ts

Do

• Use #222222 for the one filled action and for selected text
• Use the #1a2241 navy fill only for a selected filter
• Set headings at weight 700 on a 1.5 line height; body at 16px / 400
• Step secondary text down the cool greys #686e7b, #8f97a7, #a6adbd, #bec5d2
• Use 50px pills and 40px filters with 1px #dfe3ed borders
• Give only banner cards depth: a soft shadow and a 5px hover lift

Don't

• Don't use the logo navy #001339 as an interface colour; no captured element renders it
• Don't add shadows to buttons, filters or rows
• Don't use square corners on pills or filters
• Don't invent focus styles; the captured controls show only the browser's default ring
• Don't name a Korean font the site does not load

8. Responsive Behavior

Breakpoints

Only the 1440 × 900 desktop viewport was captured. Class names such as lg:text-[16px], lg:px-[31px] and md:mb-[280px] show that the pages restyle at md, lg and xl breakpoints (the pills drop to 16px labels and 18px side padding below lg); no breakpoint width was measured.

Touch Targets

• Pills: 55px
• Career filters: 50px
• Language selector: 43px
• Disclosure rows: 73px

Collapsing Strategy

• Not captured.

Image Behavior

• The banner cards clip their imagery (overflow-hidden); no other image behaviour was measured.

9. Agent Prompt Guide

Quick Color Reference

• Primary action and selected text: #222222, label #ffffff
• Selected filter: #1a2241
• Headings and footer: #3e4149; body #000000; IR text #686e7b
• Secondary greys: #8f97a7, #a6adbd, #bec5d2
• Borders: #dfe3ed; rules #ebeef6; hover fill #f5f6fb

Example Component Prompts

• "Create a primary pill: #222222 background, #ffffff 18px label at weight 700, 50px radius, 14px 31px padding, 55px tall. Pair it with a white pill with a #3e4149 label."
• "Create a banner card: white, rounded, shadow rgba(34, 34, 34, 0.08) 4px 10px 20px 0px; on hover shadow rgba(34, 34, 34, 0.18) 4px 12px 20px 6px and lift 5px."
• "Build filter chips: #ffffff, 1px #dfe3ed border, #a6adbd 17px label, 40px radius, 14px 20px padding, 50px tall; hover #f5f6fb; selected #1a2241 fill with white bold label."
• "Build text tabs: 16px #8f97a7, hover #3e4149; selected #222222 weight 700."

Iteration Guide

1. #222222 for the primary action and selection; #1a2241 only for the selected filter
2. Headings 700, line height 1.5
3. Cool grey ladder for secondary text
4. 50px pills, 40px filters, 1px #dfe3ed borders
5. Flat except the banner cards

---

10. Voice & Tone

Dealicious's voice is warm, plain and customer-first. The mission line frames everything as help for the customer's business, and the culture pages speak in first-person plural about how the team works.

Voice samples (verbatim, opened 2026-09-30):

• "딜리셔스 Dealicious | 고객의 사업을 쉽고 즐겁게" — dealicious.kr page title.
• "딜리셔스는 오프라인으로만 이루어지던 동대문 패션업계의 B2B 거래를 온라인으로 옮겼습니다." — /introduction.
• "2013년 7월 론칭한 신상마켓은 동대문 패션 도매 사업자와 국내외 소매 사업자를 연결하는 플랫폼입니다." — /services.
• "K패션 도소매 거래 NO.1" — /services, the company's own positioning line.

Forbidden register: aggressive sales urgency, stacked B2B jargon, corporate language that hides the small-business customer, exclamation-heavy hype.

11. Brand Narrative

Dealicious presents its founding problem directly: Dongdaemun's fashion wholesale trade happened only offline, and the company moved it online so that more products could move more easily and the fashion industry could grow. Sinsang Market, launched in July 2013, is the result — a platform linking Dongdaemun wholesalers with retailers in Korea and abroad, which the company describes as "K패션 도소매 거래 NO.1". Around it Dealicious built 신상스튜디오, which picks up, photographs and lists a wholesaler's products within a week, and 신상애드, which lets wholesalers promote their uploaded products to retailers across the country; the company says one in five Dongdaemun wholesalers already uses it.

The company page states five principles: 사장님 마음 (always think like the business owner), 80% 실행 (move fast at 80% and learn from failure), 스스로 성장, 피드백 핑퐁 (honest feedback built on respect) and 원팀 딜리언즈. The people-and-culture page foregrounds staff interviews, an R&D centre and development culture, and the engineering team runs a public tech blog (dealicious-inc.github.io), linked from every page as 딜리셔스의 개발 이야기. The footer lists co-CEOs 김준호 and 정창한 and an address in 종로구, Seoul.

The corporate site reads the same way: plain white pages, heavy headings, one near-black action and a warm, customer-first voice.

12. Principles

1. Easy and enjoyable for the customer. The mission is "고객의 사업을 쉽고 즐겁게". UI implication: one clear action per area, plain language, no pressure.
2. Think like the owner. "항상 사장님 마음으로 생각합니다." UI implication: show figures the business owner cares about — shops, transactions, return rates — plainly.
3. Move at 80%. "80% 수준으로 빠르게 실행합니다." UI implication: simple, reusable components (pills, filters, rows) over bespoke treatments. (An editorial reading.)
4. One team. UI implication: the same header, banners and footer on every page.
5. Quiet structure. UI implication: hairlines and greys for structure; depth only on the banner cards. (An editorial reading of the captured pages.)

13. Personas

Personas below are fictional archetypes informed by publicly observable Sinsang Market / Dealicious user segments (Dongdaemun fashion retailers and wholesalers, and the company's own engineers), not individual people.

정하늘, 28, 서울. Runs a small online fashion boutique and sources stock through Sinsang Market instead of dawn market runs. Values ordering from her phone and a calm, simple flow.

김도현, 41, 서울 동대문. A wholesaler listing new arrivals daily. Cares that his catalogue reaches retailers fast and has tried 신상애드 to reach more of them.

이서연, 33, 딜리셔스 엔지니어. A mobile engineer who reads and writes on the company tech blog and values the culture the company foregrounds.

14. States

Only these states were observed on the three captured pages; nothing else is specified here.

Error, loading and success states were not captured and are not described.

15. Motion & Easing

The probe read the transitions the controls compute. Career filters transition all 0.2s cubic-bezier(0, 0, 0.2, 1); IR tabs and the language selector transition colour, background, border, text-decoration colour, fill and stroke over 0.15s cubic-bezier(0.4, 0, 0.2, 1); the pills compute transition: all 0s, while the banner card's lift settles within the probe's 900ms wait (the longest transition in its compared scope is 500ms). Nothing else about motion (hero, carousels) was measured; treat it as unspecified and honour prefers-reduced-motion in any build.