Design System Inspiration of idus (Backpackr)

1. Visual Theme & Atmosphere

idus (아이디어스), operated by Backpackr, is Korea's largest handmade-goods marketplace — a place where independent 작가 (makers) sell handcrafted rings, ceramics, candles, baked goods and classes. Its web surface reads like a warm, high-density Korean commerce app rather than a minimalist boutique: a pure white canvas (#ffffff) packed with product thumbnails, ranking flags and social-proof, all organised by a quiet grey text ladder and punctuated by one confident brand color — a carrot orange (#ef7014). That orange is disciplined: it appears almost exclusively on the things that mean "act" — the 구매하기 (purchase) CTA, brand-outline buttons, ranking number flags, and the "recently purchased" pills — so the eye is trained to read orange as commitment.

The typographic personality is deliberately system-native. idus does not ship a bespoke brand webfont; body and UI text render in the platform system stack (system-ui → Apple SD Gothic Neo / Malgun Gothic on Korean devices), tuned for dense hangul legibility. Hierarchy is carried by weight and size rather than typeface: the primary purchase CTA runs at 18px / weight 700, category tabs at 16px / 400, body and button labels settle at a workmanlike 14px, and utility chrome (top nav, icon labels) drops to 12px and 11px. The result feels engineered for scanning hundreds of handmade listings quickly, not for editorial pause.

What distinguishes idus from a glossy DTC store is its restraint with depth. Live inspection found box-shadow: none and 0px borders across most of the chrome — separation comes from flat hairlines (#d9d9d9), a light border on secondary buttons (#acacac), and tinted wash surfaces (#fff7f2 orange, #fff2f4 pink) rather than elevation. Geometry is mostly tight and square: 2px-radius action buttons, 4px dark caption chips, 12px product-image cards, and a single dramatic exception — the fully-rounded 100px social-proof pill. A small warm accent set rounds out the palette: coral (#ff4b50) marks sale and discount prices, gold (#ffaf00) draws rating stars, and event yellow (#ffea2c) flags promotions. Dark near-black (#111111) anchors the curation caption chips.

Key Characteristics:

• Single brand action color — carrot orange (#ef7014) — reserved for CTAs, brand-outline buttons, rank flags and social-proof pills
• System font stack (system-ui / Apple SD Gothic Neo / Malgun Gothic) — hierarchy carried by weight (700 CTA vs 400 body) and size, not a bespoke typeface
• Flat, near-shadowless commerce UI: box-shadow: none, separation via #d9d9d9 hairlines and #acacac button outlines
• Tight square geometry — 2px buttons, 4px chips, 12px product cards — with one 100px full-pill exception for social-proof
• Warm accent trio: coral sale price (#ff4b50), gold rating stars (#ffaf00), event yellow (#ffea2c)
• Near-black (#111111) dark caption chips over curation imagery
• Cool-neutral text ladder: #333333 primary → #666666 secondary → #999999 tertiary/faint
• Tinted wash surfaces (#fff7f2, #fff2f4) instead of shadows for gentle section emphasis
• White (#ffffff) canvas and white text (#ffffff) on the orange primary

2. Color Palette & Roles

Primary

• idus Carrot (#ef7014): The single brand action color. Live-measured as the 구매하기 purchase CTA background, the brand-outline button text/border, the ranking number flag, and the "recently purchased" social-proof pill. If it is orange, it means "act."
• Carrot Tint (#fff7f2): A barely-there orange wash surface for gentle emphasis blocks and orange-themed sections.
• On-Primary White (#ffffff): Text and icons on the carrot CTA and on dark chips.

Accents

• Sale Coral (#ff4b50): Discount / sale price emphasis and favorite (heart) marks — the second most frequent foreground color on the page after the neutral text ladder.
• Sale Tint (#fff2f4): Light pink wash surface for discount and event blocks.
• Rating Gold (#ffaf00): Rating stars and review scores.
• Highlight Yellow (#ffea2c): Event / promotion highlight flags.

Neutral & Ink

• Ink (#111111): Near-black background for the dark caption chips overlaid on curation banners; also strong emphasis text.
• Text (#333333): Primary text and heading color — the dominant foreground across the whole surface. A soft near-black, never pure #000000.
• Text Muted (#666666): Secondary text — top-nav utility links, descriptions, metadata.
• Text Faint (#999999): Tertiary / lowest-emphasis text, timestamps, disabled labels.

Surface & Borders

• Canvas (#ffffff): Page background and all card surfaces.
• Border (#d9d9d9): Hairline dividers and light borders — the primary separation device in the shadow-free system.
• Border Strong (#acacac): The 1px outline on secondary white buttons (장바구니, 선물하기), a touch heavier than the divider hairline.

3. Typography Rules

Font Family

• UI / Body: system stack — system-ui, -apple-system, with Apple SD Gothic Neo / Malgun Gothic as the Korean fallbacks. idus does not load a bespoke brand webfont on web; the OS hangul font does the work.
• Weights in use: 400 (regular) for body, nav and utility; 700 (bold) for action buttons, ranking flags and social-proof pills. There is no light-weight display tier — hierarchy is size × weight, not a special headline face.

Hierarchy

Principles

• Weight over typeface: with a system font, idus signals importance by jumping to weight 700 (CTAs, flags) against a 400 body — never by swapping fonts.
• Dense, scannable sizing: body and buttons sit at 14px, utility chrome at 11–12px, so a grid of hundreds of handmade listings stays legible without scrolling fatigue.
• Bold is for action and proof: 700 is reserved for things the shopper acts on (purchase, follow) or trusts (ranking, "recently purchased"), reinforcing the orange = act signal.
• No pure black: text is #333333, not #000000 — a softer near-black that keeps the busy commerce surface from feeling harsh.

4. Component Stylings

Buttons

Primary Purchase CTA (구매하기)

• Background: #ef7014
• Text: #ffffff
• Radius: 2px
• Padding: 0px 16px
• Height: 48px
• Font: 18px / 700
• Use: The primary purchase action on product detail pages

Secondary (장바구니 / 선물하기)

• Background: #ffffff
• Text: #333333
• Border: 1px solid #acacac
• Radius: 2px
• Padding: 0px 16px
• Height: 48px
• Font: 18px / 700
• Use: Add-to-cart and gift actions sitting beside the primary CTA

Brand Outline (작품문의 / 팔로우)

• Background: #ffffff
• Text: #ef7014
• Border: 1px solid #ef7014
• Radius: 2px
• Padding: 0px 16px
• Height: 40px
• Font: 14px / 700
• Use: Tertiary brand-tinted actions (inquiry, follow-maker)

Top Utility (로그인 / 회원가입 / 고객센터)

• Background: transparent
• Text: #666666
• Padding: 0px 8px
• Height: 30px
• Font: 12px / 400
• Use: Header utility links

Inputs

Global Search

• Background: #ffffff
• Text: #333333
• Radius: 2px
• Font: 14px / 400
• Use: Header search field, placeholder "찾으시는 작가, 작품이 있나요?" — borderless, sits on a hairline row rather than a boxed field

Cards & Containers

Product Card

• Background: #ffffff
• Radius: 12px
• Use: Product thumbnail card in curation grids — image corners rounded, flat (no shadow)

Dark Caption Chip

• Background: #111111
• Text: #ffffff
• Radius: 4px
• Padding: 6px 8px
• Use: Overlay caption label on curation banner imagery

Badges

Social-Proof Pill

• Background: #ef7014
• Text: #ffffff
• Radius: 100px
• Padding: 0px 14px
• Height: 33px
• Font: 14px / 700
• Use: "최근 N건 더 많이 구매되었어요" purchase-momentum pill on product cards

Ranking Flag

• Background: #ef7014
• Text: #ffffff
• Radius: 0px 0px 6px 6px
• Font: 16px / 700
• Use: Rank number (1, 2, 3) flag on best-seller ranking cards

Navigation

Category Tab

• Text: #666666
• Font: 16px / 400
• Active: #333333 text
• Use: Home category navigation (선물추천, 할인, 베스트, 취향발견, 실시간, 최신작품, 커뮤니티)

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://www.idus.com (homepage, live computed style), https://www.idus.com/v2/product/ (product detail page, live computed style — purchase CTA, secondary/outline buttons), https://github.com/backpackr (Backpackr official GitHub org) Tier 2 sources: getdesign.md/idus — no entry ("0 DESIGN.md files, No designs found"); styles.refero.design/?q=idus — no idus-specific style listed (search returns unrelated generic results) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base rhythm: 4px steps — measured paddings land at 0×8px (utility), 6×8px (chips), 0×14px (pills), 0×16px (primary buttons)
• Scale: 4px, 8px, 14px, 16px, 20px, 24px
• Notable: action buttons use generous 48px height with 16px horizontal padding for confident tap targets; social-proof pills use 14px horizontal padding

Grid & Container

• Dense multi-column product-thumbnail grids are the dominant layout unit
• A horizontal category tab row (선물추천 / 할인 / 베스트 …) anchors the top of the home feed
• Product detail pages stack a media column with a sticky action rail (장바구니 / 선물하기 / 구매하기)
• Curation banners layer dark caption chips (#111111) over full-bleed imagery

Whitespace Philosophy

• Density with breathing hairlines: idus is intentionally information-rich; separation comes from #d9d9d9 hairlines and white gutters rather than large empty margins.
• Flat segmentation: sections separate by hairline and tint wash (#fff7f2, #fff2f4), not by shadow stacks.
• Action clarity in a busy field: within a crowded grid, the orange CTA and pills are the only saturated elements, so the next action always stands out.

Border Radius Scale

• Sharp (2px): action buttons, search field — the workhorse
• Small (4px): dark caption chips
• Medium (12px): product-image cards
• Full (100px): social-proof pills

6. Depth & Elevation

Shadow Philosophy: idus is a near-shadowless system. Live inspection returned box-shadow: none and 0px solid borders across the header, category tabs, product cards and action buttons. Depth is communicated by flat hairlines (#d9d9d9), a slightly heavier outline (#acacac) on secondary buttons, and low-saturation tint washes (#fff7f2 orange, #fff2f4 pink). When something needs to pop, the system reaches for the carrot orange (#ef7014) or the near-black ink (#111111) chip — never a drop shadow. This keeps a very dense commerce grid feeling fast and flat rather than heavy.

7. Do's and Don'ts

Do

• Reserve carrot orange (#ef7014) for actions and proof — CTA, brand-outline buttons, rank flags, social-proof pills
• Use weight 700 on action labels and 400 on body/nav — let weight carry hierarchy under a system font
• Separate sections with #d9d9d9 hairlines and #acacac outlines, not shadows
• Keep action geometry tight (2px radius) and reserve the 100px full-pill only for social-proof momentum
• Use #333333 for primary text, never pure black
• Use coral (#ff4b50) for sale/discount prices and gold (#ffaf00) for rating stars
• Overlay dark near-black (#111111) caption chips on curation imagery
• Keep body and buttons at a dense 14px for fast scanning of large product grids

Don't

• Spread orange across decorative elements — it dilutes the single-action signal
• Use drop shadows for elevation — idus is a flat, hairline-separated system
• Use pure black (#000000) for body text — the ladder is #333333 → #666666 → #999999
• Introduce a bespoke display webfont — the system stack is intentional for hangul density
• Round action buttons heavily — they stay at a tight 2px (the 100px pill is only for social-proof)
• Reuse the sale coral (#ff4b50) or rating gold (#ffaf00) as a primary action color — carrot is the only CTA color
• Add large empty margins that break the dense, scannable grid rhythm
• Set a light font weight on CTAs — action labels are always 700

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary action buttons at 48px height with 16px horizontal padding — comfortably tappable
• Social-proof pills at 33px height, full 100px radius for an unmistakable target
• Icon utility buttons (관심 / 내 정보 / 장바구니) at ~67px stacked icon+label hit areas

Collapsing Strategy

• Product grids reflow from 4-6 columns down to 2-up / single column
• Category tab row switches to horizontal scroll on narrow viewports
• Product detail action rail (장바구니 / 선물하기 / 구매하기) becomes a sticky bottom bar on mobile
• Curation banners maintain full-bleed treatment with the dark caption chip repositioned

Image Behavior

• Product thumbnails keep 12px rounded corners across breakpoints
• Curation imagery stays full-bleed; dark #111111 caption chips overlay at all sizes
• No shadows on imagery at any size, consistent with the flat system

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: idus Carrot (#ef7014)
• CTA text: White (#ffffff)
• Sale / discount price: Coral (#ff4b50)
• Rating stars: Gold (#ffaf00)
• Event highlight: Yellow (#ffea2c)
• Primary text: #333333
• Secondary text: #666666
• Faint text: #999999
• Dark chip: Ink (#111111)
• Hairline: #d9d9d9
• Button outline (secondary): #acacac
• Tint surfaces: #fff7f2 (orange), #fff2f4 (pink)
• Canvas: White (#ffffff)

Example Component Prompts

• "Create a product detail action rail: three 48px-tall buttons at 2px radius. Secondary 'add to cart' and 'gift' are white with 1px solid #acacac border and #333333 text; primary '구매하기' is #ef7014 background with #ffffff text, all 18px weight 700."
• "Design a product card: white #ffffff background, 12px rounded image, no shadow. Overlay a full-pill social-proof badge — #ef7014 background, #ffffff text, 100px radius, 14px weight 700 — reading 'recently purchased'. Rank flag: #ef7014 with 0 0 6px 6px radius top-left."
• "Build a category nav row: system-font tabs at 16px weight 400, inactive #666666 and active #333333, on a white header. No underline, no shadow."
• "Create a brand-outline button: white background, #ef7014 text, 1px solid #ef7014 border, 2px radius, 40px height, 14px weight 700 — for '작품문의' / '팔로우'."

Iteration Guide

1. Orange (#ef7014) is the only action color — CTA, outline buttons, flags, pills; don't spread it decoratively
2. Weight 700 for actions/proof, 400 for everything else — hierarchy is weight, not typeface
3. No shadows — separate with #d9d9d9 hairlines, #acacac outlines, and tint washes
4. Action buttons stay at 2px radius; only social-proof pills go full 100px
5. Text is #333333 → #666666 → #999999, never pure black
6. Coral (#ff4b50) = price/sale, gold (#ffaf00) = rating — never CTAs
7. Keep body/buttons dense at 14px for large scannable grids
8. Dark #111111 chips for caption overlays on curation imagery

---

10. Voice & Tone

idus's voice is warm, encouraging, and maker-centric — it speaks about handmade 작품 (works) and the 작가 (makers) behind them, not "products" and "sellers." The register is friendly Korean commerce: it invites discovery ("취향발견" / discover-your-taste), reassures with social proof ("최근 573건 더 많이 구매되었어요" / "573 more purchased recently"), and asks rather than commands ("찾으시는 작가, 작품이 있나요?" / "Is there a maker or work you're looking for?"). Actions are plain and functional (구매하기, 장바구니, 선물하기, 작품문의), never hype-driven.

Voice samples (verbatim from live surfaces):

• "찾으시는 작가, 작품이 있나요?" — search placeholder (invites discovery, maker-first). (verified live 2026-07-02)
• "최근 573건 더 많이 구매되었어요" — social-proof pill (warm momentum, no pressure). (verified live 2026-07-02)
• "취향발견" — category tab (discovery-framed, taste-centric). (verified live 2026-07-02)

Forbidden register: aggressive scarcity/urgency ("지금 아니면 끝!"), treating makers as anonymous "sellers", undefined marketing jargon, exclamation-heavy hype. The tone stays warm and human because the goods are handmade and personal.

11. Brand Narrative

idus (아이디어스) was founded in 2014 by Backpackr (백패커), led by CEO 김동환 (Kim Dong-hwan), to solve a specific gap in Korean commerce: talented independent makers of handmade goods — ceramics, jewelry, candles, baked goods, leather craft — had no dedicated, trusted marketplace to reach buyers who valued craft over mass production. The name reads as "idea + us / ideas," and the founding premise reframed a handmade purchase as a relationship with a 작가 (maker) rather than a transaction with a store.

The platform matured into Korea's largest handmade marketplace, expanding from physical goods into handmade classes (클래스) and gifting, and Backpackr later broadened its creator-economy footprint (including the crowdfunding platform 텀블벅 / Tumblbug). The homepage's own vocabulary — 작가 (maker), 작품 (work), 작가홈 (maker's home), 팔로우 (follow) — encodes the thesis: idus is a place to follow and support people who make things by hand.

What idus refuses, visible in its design: the glossy, shadow-stacked chrome of a mass DTC store and the hard-sell scarcity tactics of discount commerce. What it embraces: a warm single accent (carrot orange), a flat and dense but scannable grid, social proof framed as encouragement rather than pressure, and a maker-first vocabulary throughout the interface. (Founding attribution and platform history are widely documented public facts about Backpackr / idus; specific interpretive readings of the design are editorial.)

12. Principles

1. Makers, not sellers. The interface names people (작가, 작가홈, 팔로우), not shops. UI implication: surface the maker identity on cards and detail pages; make "follow the maker" a first-class action.
2. One color means act. Carrot orange (#ef7014) is the only saturated action color. UI implication: reserve orange for CTA, outline buttons, rank flags and social-proof; keep everything else neutral so the next step is unambiguous.
3. Encourage, don't pressure. Social proof is framed as warm momentum ("recently purchased"), never fear-based scarcity. UI implication: use positive, count-based reassurance pills; avoid countdown timers and "last chance" urgency.
4. Dense but scannable. The catalog is huge, so density is a feature. UI implication: separate with hairlines and tint washes, keep body at 14px, and let the single orange accent guide the eye through a crowded grid.
5. Flat and warm. Handmade goods deserve a light, human surface, not heavy banking chrome. UI implication: no drop shadows; lean on #d9d9d9 hairlines, warm tint surfaces, and rounded product imagery.

13. Personas

Personas below are fictional archetypes informed by publicly observable idus user segments (gift-shoppers seeking something personal, supporters of independent makers, hobbyists browsing handmade classes), not individual people.

정유진, 28, 서울. Shopping for a friend's birthday and wants something that doesn't look mass-produced. Uses "선물추천" and the social-proof pills to feel confident a small maker is trustworthy. Chose idus because it feels like discovering a person, not scrolling a warehouse.

김도현, 34, 경기. A repeat buyer who follows several ceramic and leather 작가. Values the "작가홈" and 팔로우 flow — he buys again when a maker he follows releases new 작품. Trusts the flat, no-pressure interface over hard-sell discount apps.

이서연, 41, 부산. Browses handmade classes and gifts for family occasions. Appreciates that the copy is warm and the grid is dense enough to compare many options quickly without feeling rushed by urgency banners.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet — consistent with the flat, dense commerce aesthetic. Product cards fade-in from below as grids load at motion-standard / ease-enter; the carrot CTA and follow toggle respond to press with a subtle opacity/scale shift; curation banners cross-fade on a slow carousel. No bounce or spring — a marketplace signals steadiness and trust, not gimmickry. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the banner carousel freezes; the catalog remains fully functional.