Design System Inspiration of Frip

1. Visual Theme & Atmosphere

Frip (프립) is Korea's self-described "대한민국 1등 취미여가 탐색 플랫폼" (No.1 hobby-and-leisure discovery platform) — a marketplace where people book experiences, classes, and social outings. Its web surface reads like a bright, content-dense commerce feed rather than a minimalist brand site: a pure white (#ffffff) canvas packed with square-cornered thumbnail cards, corner tags, and price callouts, organized into scannable horizontal shelves ("주간 인기 BEST", "신규 프립", "기획전"). The mood is energetic and consumer-friendly, closer to a lifestyle shopping app than a calm fintech dashboard — the page wants you to browse dozens of experiences at a glance.

The color system is built on a single saturated action color: an electric violet (#7a29fa) that carries the primary booking button ("참여하기") on every product page and marks trust signals like the "슈퍼호스트" (Superhost) tag. This purple is the one thing the eye is trained to treat as "the next step." Running alongside it is a hot promo-red family — #f4373d for the "프립단독" (Frip-exclusive) corner tag, #ff3f33 for the big discount percentages, and #e21d47 for point/reward labels — reserved strictly for urgency and savings, never for navigation. Text is set in near-pure black (#000000) for headings and a warm charcoal (#333333) for product titles and secondary copy, over a cool grey ladder (#777777 → #999999 → #aaaaaa) for metadata.

Typographically the system is unmistakably Korean-modern: everything runs in SUIT (with UI Frip / Noto Sans KR fallbacks), a clean geometric hangul sans. Section and detail headings sit at a restrained 18px / weight 700; product titles at 20px / 400 with tight -0.6px tracking; body and UI text at a dense 14px / 400. Depth is almost entirely absent — live inspection found box-shadow: none across the nav, hero carousel, and section headers. Separation comes from thin #e6e6e6 hairlines, tinted #fafafa / #f4f4f4 surfaces, and a soft pink #fff4f7 promo band, not elevation. Geometry is gently rounded: a 5px radius is the workhorse (cards, badges — 78 occurrences), the primary CTA sits at 10px, and selector pills reach a 20px near-round.

Key Characteristics:

• Single saturated violet (#7a29fa) reserved for the primary booking action and Superhost trust tag
• Hot promo-red family — #f4373d exclusive tag, #ff3f33 discount %, #e21d47 points — used only for savings/urgency
• SUIT typeface throughout — 18px/700 headings, 20px/400 product titles, 14px/400 body
• Near-black #000000 headings + warm #333333 charcoal titles instead of flat black-on-white monotony
• Near-flat depth: box-shadow: none; #e6e6e6 hairlines + #fafafa/#f4f4f4 tints do the separating
• 5px radius as the workhorse; 10px CTA; 20px selector pills; occasional full circles for avatars/dots
• Content-dense commerce feed: thumbnail cards, corner tags, price callouts on a white canvas
• Dark charcoal (#333333) app-download bar as the recurring cross-sell chrome

2. Color Palette & Roles

Primary & Accent

• Frip Violet (#7a29fa): Primary action color. Fills the "참여하기" booking CTA on every product page and the "슈퍼호스트" Superhost badge — the system's single "do this / trust this" color.
• Exclusive Red (#f4373d): The "프립단독" (Frip-exclusive) corner-tag background — a hot red that flags first-party / can't-get-elsewhere inventory.
• Sale Red (#ff3f33): Discount-percentage text (e.g. "48%", "89%") at 24px/700 on the hero and 14px/700 on cards. Savings emphasis only.
• Point Red (#e21d47): Reward/point labels such as "신규프립 에너지x2" at 10px/500 — a slightly deeper magenta-red for loyalty callouts.

Ink & Text Hierarchy

• Ink Black (#000000): Primary heading and dominant body text — the most frequent foreground color on the page.
• Charcoal (#333333): Product-detail titles, secondary copy, and the app-download bar background. A warm near-black that softens dense text.
• Near-Black (#111111): Occasional maximum-contrast dark surface / overlay panel.
• Body Grey (#777777): Secondary descriptions and supporting copy.
• Muted Grey (#999999): Tertiary text, metadata, timestamps.
• Faint Grey (#aaaaaa): Lowest-emphasis labels, placeholders, disabled captions.

Surfaces & Borders

• Pure White (#ffffff): Page background, card surfaces, text on violet/red/dark.
• Surface Grey (#fafafa): Tinted section/card background for gentle segmentation.
• Surface Alt (#f4f4f4): A second neutral grey for alternating blocks and inset panels.
• Pink Tint (#fff4f7): Soft pink promo band behind sale/curation shelves.
• Disabled Grey (#eeeeee): Background of sold-out / disabled buttons ("신청마감").
• Hairline (#e6e6e6): Thin card outlines and dividers — the primary separation device in this near-flat system.
• Border Grey (#dddddd): 1px outline on selector/quantity pills and input chrome.

3. Typography Rules

Font Family

• Primary: SUIT (with UI Frip, Noto Sans KR, Helvetica, Arial, sans-serif fallbacks) — used for headings, body, UI, and button labels alike.
• SUIT is a geometric hangul-first sans; Frip runs it across the whole surface rather than splitting display vs. body across two families.

Hierarchy

Principles

• One typeface, weight-driven hierarchy: SUIT carries everything; contrast comes from weight (700 headings vs 400 body) and size, not from a second family.
• Restrained heading scale: headings top out at 18–20px on the feed — the design leans on card density and imagery, not oversized type, to structure the page.
• Tight tracking only on titles: product titles compress to -0.6px; body and UI text stay at normal tracking for hangul legibility at 14px.
• Bold for money and structure: weight 700 is reserved for headings and numeric emphasis (discount %), signaling "read this first."

4. Component Stylings

Buttons

Booking CTA (Primary)

• Background: #7a29fa
• Text: #ffffff
• Radius: 10px
• Padding: 16px
• Height: 56px
• Font: 16px SUIT weight 400
• Use: Primary product-page action ("참여하기") — the system's single primary action

Booking CTA (Disabled / Sold Out)

• Background: #eeeeee
• Text: #ffffff
• Radius: 10px
• Padding: 16px
• Height: 56px
• Font: 16px SUIT weight 400
• Use: Sold-out / closed state ("신청마감") — greyed, full-width, same geometry as active

App-Download Bar

• Background: #333333
• Text: #ffffff
• Radius: 0px
• Height: 45px
• Font: 12px SUIT weight 700
• Use: Recurring dark app-download cross-sell chrome ("앱 다운로드")

Inputs & Forms

Quantity / Option Pill

• Background: #ffffff
• Text: #333333
• Border: 1px solid #dddddd
• Radius: 20px
• Padding: 7px 15px
• Height: 36px
• Font: 14px SUIT weight 400
• Use: Selectable quantity / option pill on the booking panel

Cards & Containers

Experience Card

• Background: #ffffff
• Border: 1px solid #e6e6e6
• Radius: 5px
• Font: 14px SUIT
• Use: Product/experience card — thumbnail + title + price, hairline outline, no shadow

Badges

Exclusive Tag

• Background: #f4373d
• Text: #ffffff
• Radius: 5px
• Padding: 4px 6px
• Font: 10px SUIT weight 500
• Use: "프립단독" (Frip-exclusive) corner tag

Superhost Tag

• Background: #7a29fa
• Text: #ffffff
• Radius: 5px
• Padding: 4px 6px
• Font: 10px SUIT weight 500
• Use: "슈퍼호스트" (Superhost) host-trust corner tag

Navigation

• Background: #ffffff
• Text: #000000
• Font: 14px SUIT weight 400
• Height: ~56px header
• Active: violet #7a29fa text on the active nav / category item
• Use: Top horizontal nav ("카테고리", "피드", "메시지", "찜", "마이")

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://www.frip.co.kr/ (homepage, live computed style); https://medium.com/frientrip (Frip official Medium publication, brand-owned) Tier 2 sources: getdesign.md/frip (no entry — "0 DESIGN.md files"); styles.refero.design/?q=frip (no entry — fuzzy "F…" matches only) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: ~4px
• Scale: 4px, 6px, 10px, 16px, 20px, 32px
• Notable: badge padding lands at 4px 6px; selector pills at 7px 15px; the primary CTA uses a symmetric 16px pad — dense, tap-friendly commerce spacing

Grid & Container

• Content-dense feed: horizontal shelves of thumbnail cards ("주간 인기 BEST", "신규 프립", "기획전") stacked vertically
• Product cards use a 5px radius and a fixed thumbnail-over-title-over-price layout
• Product-detail pages pin a full-width 56px booking CTA at the bottom of the panel
• Sections separate by tinted band (#fafafa / #f4f4f4 / pink #fff4f7) rather than rules

Whitespace Philosophy

• Density over emptiness: this is a browse-many-options marketplace; cards pack tightly into shelves and the eye scans laterally.
• Flat segmentation: sections separate by background tint and #e6e6e6 hairlines, not shadow or heavy borders.
• Tag rhythm: repeated 5px corner tags ("프립단독", "슈퍼호스트") create a consistent visual cadence across the card grid.

Border Radius Scale

• Micro (3px): fine inner elements
• Small (5px): cards, badges, corner tags — the workhorse (×78 in scan)
• Medium (10px): primary booking CTA
• Large (12px): larger containers / feature cards
• Pill (20px): quantity/option selector pills
• Full (9999px / 50%): avatars, dots, circular controls

6. Depth & Elevation

Shadow Philosophy: Frip is a near-shadowless system. Live inspection found box-shadow: none across the nav, hero carousel, and section headers. Depth and grouping are communicated through thin #e6e6e6 hairlines, tinted surfaces (#fafafa, #f4f4f4, pink #fff4f7), and the imagery inside cards — not elevation. When Frip needs to lift something above content it reaches for a translucent black scrim (rgba(0,0,0,0.4)) on the carousel index chip, and for emphasis it reaches for color (violet #7a29fa or promo red #f4373d), never a drop shadow. This keeps the commerce feed feeling fast, flat, and mobile-native.

7. Do's and Don'ts

Do

• Reserve violet (#7a29fa) for the primary booking action and the Superhost trust tag — keep it the single "action" color
• Use the promo-red family only for savings/urgency: #f4373d exclusive tag, #ff3f33 discount %, #e21d47 points
• Set everything in SUIT — weight 700 for headings/numbers, 400 for body and CTA labels
• Use near-black #000000 for headings and warm charcoal #333333 for product titles
• Separate sections with #e6e6e6 hairlines and #fafafa/#f4f4f4 tints, not shadows
• Keep cards and badges at a 5px radius; the primary CTA at 10px
• Pack cards densely into horizontal shelves — this is a browse-many marketplace
• Keep the full-width 56px booking CTA anchored on product pages

Don't

• Spread violet across decorative elements — it dilutes the single booking-action signal
• Use the promo reds for navigation, links, or non-sale UI — they mean savings/urgency
• Introduce drop shadows for elevation — Frip is a flat, hairline-and-tint system
• Set a light weight on numeric/discount emphasis — money is always weight 700
• Use large pill radii on cards — cards stay at the 5px workhorse corner
• Mix in a second display typeface — SUIT owns the whole surface
• Grey the active nav item — the active state is violet #7a29fa text
• Use pure #000000 for every text tier — step down through #333333 → #777777 → #999999

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary booking CTA at 56px height, full-width — an unmistakable tap target
• Selector pills at 36px height with 7px 15px padding — comfortably tappable
• Nav items within a ~56px header, spaced for touch
• Corner tags are non-interactive labels at 10px, kept out of the tap flow

Collapsing Strategy

• Card shelves: horizontal scroll on narrow viewports, multi-column grid on desktop
• Product detail: booking panel collapses to a bottom-fixed CTA bar on mobile
• Tinted / white alternating sections maintain full-width treatment
• Headings hold their 18–20px size; density adjusts via column count, not type scale

Image Behavior

• Card thumbnails carry no shadow at any size, consistent with the flat system
• Corner tags overlay the top of thumbnails at a fixed 5px radius
• Cards maintain the 5px radius across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary action / booking CTA: Frip Violet (#7a29fa)
• Exclusive tag: #f4373d · Discount %: #ff3f33 · Points: #e21d47
• Heading text: Ink Black (#000000)
• Product title / dark bar: Charcoal (#333333)
• Secondary text: #777777 · Muted: #999999 · Faint: #aaaaaa
• Background: Pure White (#ffffff) · Tint: #fafafa / #f4f4f4 · Pink promo: #fff4f7
• Disabled button: #eeeeee · Hairline: #e6e6e6 · Input border: #dddddd

Example Component Prompts

• "Create a product card: white #ffffff background, 1px solid #e6e6e6 border, 5px radius, no shadow. A #f4373d corner tag '프립단독' (white 10px SUIT 500, 5px radius, 4px 6px padding) over the thumbnail. Title 14px SUIT #333333; discount '48%' in #ff3f33 14px weight 700."
• "Build a booking panel: full-width primary CTA '참여하기' — #7a29fa background, white text, 10px radius, 16px padding, 56px height, 16px SUIT. Quantity pills: white background, 1px solid #dddddd, 20px radius, 7px 15px padding, #333333 text."
• "Design a section shelf: heading 18px SUIT weight 700 #000000 ('주간 인기 BEST'), horizontal row of 5px-radius white cards, separated from the next section by a #fafafa tint band — no shadows."
• "Create top nav: white ~56px header, 14px SUIT weight 400 items in #000000, active item in violet #7a29fa. Dark #333333 app-download bar with white 12px weight 700 label '앱 다운로드'."

Iteration Guide

1. Violet (#7a29fa) is the single action color — booking CTA + Superhost tag only
2. Promo reds (#f4373d / #ff3f33 / #e21d47) mean savings/urgency — never navigation
3. SUIT everywhere; weight 700 for headings and money, 400 for body/CTA
4. No shadows — separate with #e6e6e6 hairlines and #fafafa/#f4f4f4 tints
5. 5px radius on cards/badges, 10px on the CTA, 20px on selector pills
6. Text steps down #000000 → #333333 → #777777 → #999999 → #aaaaaa
7. Booking CTA stays full-width at 56px height on product pages

---

10. Voice & Tone

Frip's voice is energetic, invitational, and experience-first — it sells the feeling of doing something new with other people, not a transaction. The positioning line "대한민국 1등 취미여가 탐색 플랫폼" (Korea's No.1 hobby-and-leisure discovery platform) and the English brand ethos "WE INSPIRE PEOPLE TO EXPERIENCE THE WORLD" set the register: aspirational, warm, community-minded. Copy addresses members as "크루" (crew) and hosts as "슈퍼호스트", framing the marketplace as a shared adventure rather than a vendor list.

Voice samples (verbatim from live surfaces):

• "대한민국 1등 취미여가 탐색 플랫폼" — homepage title tag (category-leader positioning). (verified live 2026-07-02)
• "주간 인기 BEST 🏆" — homepage section heading (curatorial, emoji-warm). (verified live 2026-07-02)
• "WE INSPIRE PEOPLE TO EXPERIENCE THE WORLD" — Frip Medium publication tagline (brand ethos). (verified live 2026-07-02, medium.com/frientrip)

Forbidden register: cold transactional phrasing, fear-based urgency, corporate stiffness, or treating experiences as inventory rather than adventures. Savings language stays playful, never predatory.

11. Brand Narrative

Frip (프립) began as 프렌트립 (Frientrip) — a contraction of "friends" and "trip" — a Korean startup built to solve a distinctly modern loneliness problem: it was hard to find good hobbies, classes, and outings, and harder still to do them with like-minded people. Frip reframed leisure as a discoverable, bookable marketplace of "experiences" (프립) hosted by individuals and small businesses, with the company positioning itself as "대한민국 1등 취미여가 탐색 플랫폼."

The brand's mission, stated plainly on its own publication, is to "inspire people to experience the world." That ethos shapes the product: members are "크루" (crew), trusted sellers earn a "슈퍼호스트" badge, and the feed is curated into warm, human shelves ("크루님을 위한 고감도 경험", "이런 모임은 어때요?") rather than a cold catalog. The design follows suit — bright imagery, playful emoji in headings, and a single confident violet for the moment of commitment.

What Frip refuses, visible in its design: the intimidating chrome of legacy booking sites (no heavy shadow stacks, no institutional blue) and predatory sale-pressure aesthetics. What it embraces: a flat, fast, image-forward commerce feed; a single trustworthy violet action color; promo reds kept in their lane; and copy that treats browsing as the start of an adventure.

12. Principles

1. Experiences, not transactions. Frip sells the feeling of trying something new with others. UI implication: lead with imagery and warm curation ("고감도 경험"), keep the transactional CTA to a single clear violet button.
2. One action, one color. Violet (#7a29fa) means "join this." UI implication: reserve the saturated violet for the booking CTA and Superhost trust tag so the next step is never ambiguous.
3. Savings stays in its lane. The red family signals discount/exclusive/points, never navigation. UI implication: #f4373d/#ff3f33/#e21d47 only appear on tags, percentages, and reward labels.
4. Flat and fast. A browse-many marketplace must feel quick. UI implication: no shadows; separate with #e6e6e6 hairlines and tints; pack cards densely into scannable shelves.
5. Belonging over customer-hood. Members are "크루", hosts are "슈퍼호스트". UI implication: trust and community signals (Superhost badge, crew language) get first-class visual treatment.

13. Personas

Personas below are fictional archetypes informed by publicly observable Frip user segments (Koreans seeking hobbies/classes, solo travelers, experience hosts), not individual people.

김하늘, 27, 서울. A young professional looking for weekend hobbies to meet new people. Browses the "주간 인기 BEST" shelf on her phone during her commute, drawn to cards with a "프립단독" tag and a bold discount. Books a pottery class because the "참여하기" button made the next step obvious.

박민준, 34, 경기. A solo traveler who uses Frip for guided small-group trips ("혼자여행"). Trusts the "슈퍼호스트" badge as a quality signal and reads host profiles before committing. Values that the flat, image-forward layout lets him judge an experience by its photos fast.

이서연, 41, 부산. An experience host teaching a craft class. Cares that her listing's thumbnail, tags, and price read clearly in the card grid, and that the Superhost badge she earned is prominently shown. Sees Frip as a community platform ("크루") more than a booking pipe.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is bright but functional — consistent with a fast commerce feed. The hero carousel crossfades at motion-slow; card shelves snap-scroll at motion-standard / ease-enter; the booking CTA and tags respond to press with a subtle scale/opacity shift at motion-fast. No heavy bounce or spring — the feed favors quick, legible transitions over playful physics. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the carousel stops auto-advancing; the product remains fully functional.