아이아이컴바인드 DESIGN.md

Design System Inspiration of IICOMBINED

Overview

Visual Theme & Atmosphere

IICOMBINED (아이아이컴바인드) is the Korean company behind the eyewear brand Gentle Monster. Its own site introduces it as "the innovative global company which has fundamentally different paradigm for retailing business", under the line "Unexpected Wonder. High-end Valueness." and the promise of "Brands, made of experimental differentiation." It says Gentle Monster, launched in 2011, was the first brand it made, and that, "frustrated by lack of remarkable brand store", it set out to build retail spaces never seen before. It sums up its brand identity as PSSCS: Product, Space, Styling, Culture & Campaign and Service. The same company — ㈜아이아이컴바인드, business registration 119-86-38589, CEO 김한국 — is named in the legal footers of gentlemonster.com, tamburins.com and nudake.com, so the fragrance brand Tamburins and the dessert brand Nudake belong to the same house, each on its own domain.

This reference measures the domain it declares, www.gentlemonster.com: Gentle Monster's official online store ("젠틀몬스터 공식 온라인 스토어"). The store's structured data names Hankook Kim as founder and IICOMBINED CO., LTD. as parent organisation. Its navigation shows where the brand is now: a 2026 collection, the Veggie Collection, collaborations with Prada, Maison Margiela and Tekken 8, a Pocket Collection and a page for intelligent eyewear. When the home was probed, the active hero slide was a PRADA GENTLE campaign.

The captured pages read as an image-led gallery with very little chrome. The page is a pale cool grey (#f3f4f6), not white, and every text is near-black #111111. Campaign slides carry white serif titles (Gentle Monster Serif, 24px) above a pair of transparent 25px pills drawn only with a 1px white stroke and white 11px labels. The header menu is white over the hero and turns #000000 on the listing and product pages. On the listing, products are captioned in 12px GentleSans Light with grey #858585 meta lines, and 35px-radius chips filter the grid, the selected one filled with pale grey #dfe3e8. The product page is the only place with a filled action: a full-width #111111 block with 8px corners and a white label.

Key Characteristics:

• Pale grey canvas #f3f4f6 with near-black #111111 text; white only over imagery
• A house serif (Gentle Monster Serif) for campaign and listing titles, and a serif bold for product names
• GentleSans Regular (400) and Light (350) for everything functional, at small sizes: 11–13px labels, 16px body
• Transparent 25px campaign pills with a 1px white stroke; 35px filter chips; 8px on the few rectangular actions
• One filled action, #111111 with white text, on the product page
• A header that recolours with the page: white over the hero, #000000 on white pages
• No shadows on product UI; photography carries depth and colour

Primary tasks

• Buy a pair straight from a campaign slide
• Browse sunglasses and glasses, bestsellers and collections from the top menu
• Filter a listing and load more products
• Open a product and act on it from the purchase area
• Find a Gentle Monster store

Brand Narrative

IICOMBINED describes itself as a company that approaches retail with "fundamentally different paradigm", creating brands, products and projects and "evolving it in our own way over the limit". Its first brand was Gentle Monster, a luxury eyewear brand launched in 2011. The about page explains the store strategy in the company's own words: frustrated by the lack of remarkable brand stores, it decided to make "a never seen before specialty retail space", and it built each brand's identity across five parts it calls PSSCS — Product, Space, Styling, Culture & Campaign and Service. It ends by saying its brands and members work "in creativity and humanity for the people who feels the unexpected wonder".

The house now spans several brands that share one legal entity: the footers of Gentle Monster, Tamburins and Nudake all name ㈜아이아이컴바인드 with the same registration number and CEO, 김한국, and Tamburins and Nudake give the same address, 서울특별시 성동구 뚝섬로 433. Each brand keeps its own site and design; this reference covers Gentle Monster's store only.

On gentlemonster.com that philosophy reads as restraint. The interface is a thin layer of small, light type over campaign photography; the serif is kept for titles; colour is left to the pictures. The collection and collaboration pages in the navigation (Prada, Maison Margiela, Tekken 8) show a brand that treats each release as a campaign. (The last two sentences are editorial readings of the captured pages, not company statements.)

Principles

1. Unexpected wonder. The company line. UI implication: let campaign imagery surprise; keep the interface out of its way.
2. Space as part of the brand. Space and Styling are two of the five PSSCS parts. UI implication: treat the page like a room — a grey canvas, thin chrome, few objects.
3. Experimental differentiation. UI implication: distinctive house typefaces instead of a generic sans; serifs only where a title needs a voice.
4. One action at a time. UI implication: a single filled #111111 action on the product page; everything else is a stroke or a text link. (An editorial reading of the captured pages.)
5. Quiet type. UI implication: 350–400 weights and 11–13px labels.

Personas

Personas below are fictional archetypes informed by publicly observable Gentle Monster customer segments (design-aware eyewear buyers, collaboration collectors, visitors to the flagship stores), not individual people.

정유진, 27, 서울. A design-aware shopper who follows Gentle Monster's campaigns. Opens a campaign slide, taps 캠페인 보기, and buys from the product page if the collection lands.

Marcus Lee, 33, Singapore. A collector of collaboration releases. Goes straight to the Prada and Maison Margiela collections from the menu and filters the listing by chip.

한소희, 41, 서울. A creative director who studies the brand's retail spaces. Uses the store to check a new collection before visiting a store listed on the stores page.

Colors

Every token below was read by the deterministic collector on 2026-09-30 from the Gentle Monster home, the sunglasses listing and a product page, or by the fixed keyboard probe on the home the same day.

Primary

• Ink Black (#111111): The fill of the product page's one filled action (button.btn-common, 327 × 48, rgb(17, 17, 17)) and the colour of all body text, product names and footer links. It is the primary because it is the measured fill of the primary action, and the pages are otherwise monochrome: the campaign pills are transparent with white strokes, the load-more control is outlined, and the selected filter chip is pale grey. The OneTrust consent dialog's accept button renders the same #111111 fill, but it is consent chrome, not a product action, and is not used as evidence.
• On Primary (#ffffff): The label of the filled action.

Neutral & Surface

• Canvas (#f3f4f6): The body background on all three pages.
• Chip Selected (#dfe3e8): The fill and 1px border of the selected filter chip; the unselected chips keep the border only.
• Outline (#ababab): The 1px border of the load-more control.

Text

• Ink Black (#111111): Body, product names, footer.
• Pure Black (#000000): The header menu on the listing and product pages.
• On Image (#ffffff): The header menu over the home hero, campaign titles, and the stroke and labels of the campaign pills.
• Muted Grey (#858585): Secondary lines under products on home; also the computed colour of the unselected filter chips' anchors.

Brand assets, not tokens

• The Gentle Monster logo and campaign imagery were not measured; colour in the photography belongs to the campaigns, and no image colour is a token here.

Typography

Font Family

• Live surface use: four faces, all loaded and self-hosted by the store through Next.js under www.gentlemonster.com/kr/_next/static/media/ — gentleSansRegularKo (870 observed uses: body, labels, buttons), gentleSansLightKo (268: menu items, product names, footer), gentleMonsterSerif (5: campaign titles and the listing title) and gentleSerifBoldKo (2: the product-page title). The browser reports them under hashed local-font names such as __gentleSansRegularKo_ca70b3; the tokens use the face names without the hash.
• Official product use: these faces are named for the brand and are served only by its own store; no distribution or licence page for them was found or opened, so no licence is stated.
• Declared only (no visible use): gentleSansLightCn, gentleSansLightEn and gentleSansLightJp, plus the generated fallback faces, are declared in @font-face with 0 observed uses.
• Stack fallbacks: the body stack continues with "Sandoll GothicNeo1 Md", Arial, sans-serif. None of these was loaded, and none is a token.

Hierarchy

Principles

• Serif for titles, sans for machinery: the serifs appear only on campaign, listing and product titles; GentleSans carries every label and control.
• Light weights, small sizes: menu items and product names run at weight 350 and 12–13px; nothing in the captured UI is heavier than 400.
• Normal tracking: no captured product text sets letter-spacing (only the consent dialog does, at 0.13px).
• Computed sizes run one pixel under the class names: text-13-ko computes 12px and text-12-ko 11px; the values above are the computed ones.

Layout

Spacing System

• Campaign pills: 0px 23px padding at 36px height
• Filter chips: 7px 12px padding at 33px height
• Filled action: 0px 10px padding at 48px height, full width of the purchase column (327px)
• The collector's spacing census is led by 12px (168 uses), then 8px (72) and 60px (48)

Grid & Container

• Home: full-bleed hero slides with a serif title and a pill pair near the bottom, then product rails with small captions.
• Listing: a row of filter chips above a product grid, closed by a centred load-more control.
• Product page: images beside a 327px purchase column with the serif product title and the filled action.

Whitespace Philosophy

• Imagery first: the chrome is thin, light-weight and small so that photography leads.
• Grey, not white: the #f3f4f6 canvas softens the page behind product photography.

Border Radius Scale

• 0px: almost everything (1,120 captured elements)
• 8px: the filled action and the load-more control
• 25px: campaign pills
• 35px: filter chips

Responsive Behavior

Breakpoints

Only the 1440 × 900 desktop viewport was captured. Class names such as desktop:block and mobile:flex show separate mobile layouts; no breakpoint was measured.

Touch Targets

• Filled action: 48px tall
• Load-more control: 44px
• Campaign pills: 36px
• Filter chips: 33px

Collapsing Strategy

• Not measured.

Image Behavior

• Product and campaign images sit flat on the canvas, without borders or shadows.

Elevation & Depth

Shadow Philosophy: no product element computed a box-shadow. The only layered element on the captured pages is the OneTrust consent dialog with its rgba(31, 30, 29, 0.6) scrim, which is third-party consent chrome and not part of the store's design.

Motion & Easing

The collector reads computed style, not animation, so no duration or easing is measured. The home hero is a carousel (Swiper slides), which shows that motion exists without timing it. The campaign pills compute transition: all 0s. Treat motion as unspecified rather than borrowing values, and honour prefers-reduced-motion in any build.

Components

Buttons

Filled action (product page)

• Background: #111111
• Text: #ffffff
• Radius: 8px
• Padding: 0px 10px
• Height: 48px (327px wide)
• Font: 12px / 400 / 20px gentleSansRegularKo
• States: rest only; not pointer-probed, because a press in the purchase area could add the item to the bag
• Use: the one filled action on the product page

Campaign pill

• Background: transparent
• Border: 1px solid #ffffff
• Text: #ffffff (the label span; the anchor itself computes #111111 at 16px)
• Radius: 25px
• Padding: 0px 23px
• Height: 36px
• Font: 11px / 400 gentleSansRegularKo
• States: on 구매하기, hover and pressed showed no change within the probe's compared scope; on 캠페인 보기 they were unmeasured
• Use: the 구매하기 / 캠페인 보기 pair on each home hero slide

Load-more control

• Background: transparent
• Border: 1px solid #ababab
• Text: #111111
• Radius: 8px
• Height: 44px (184px wide)
• Font: 12px / 350 gentleSansLightKo
• States: rest only
• Use: under the product grid of the sunglasses listing

Underlined text action

• Background: transparent
• Text: #111111, uppercase, underlined with a 3px offset
• Height: 16px
• Font: 11px / 400 / 16px gentleSansRegularKo
• Use: repeated 47 times on home; labels were not read

Navigation & Filters

Header menu

• Background: transparent
• Text: #000000 on the listing and product pages; #ffffff over the home hero
• Height: 18px items
• Font: 13px / 350 / 18px gentleSansLightKo

Filter chips

• Border: 1px solid #dfe3e8, background transparent
• Selected: background #dfe3e8
• Radius: 35px
• Padding: 7px 12px
• Height: 33px
• Labels sit in uncaptured children (the anchors compute font-size 0px), so no label colour or font is specified; the anchors compute #111111 when selected and #858585 otherwise

Product listing

• Products are captioned by a 12px / 350 gentleSansLightKo name in #111111 and 11px #858585 meta lines. Product images sit directly on the grey canvas with no card fill, border or shadow observed.

---

Verified: 2026-09-30 (deterministic collector capture of three public pages of www.gentlemonster.com, logged out, plus the fixed keyboard probe on the home and first-party company context) Tier 1 sources: https://www.gentlemonster.com/kr/ko ; https://www.gentlemonster.com/kr/ko/category/sunglasses/view-all ; https://www.gentlemonster.com/kr/ko/item/0PEEZ0A8AASR8/velom01 ; https://www.iicombined.com/about ; https://www.tamburins.com/kr/ ; https://www.nudake.com/kr/ Tier 2 sources: getdesign.md/gentlemonster and getdesign.md/iicombined ("0 DESIGN.md files") and styles.refero.design/?q=gentle%20monster (the query appears only in the search box), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

States

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

The collector recorded no hover, pressed or focus frame and no interaction event, so those treatments are unmeasured rather than absent. Error, empty, loading and success states were not captured and are not described.

Do's and Don'ts

Do

• Use the pale grey #f3f4f6 canvas and near-black #111111 text
• Keep actions quiet: transparent 25px pills with a 1px white stroke over imagery, a 1px #ababab outline on white
• Reserve the filled #111111 block for the main product action
• Mark the selected filter with a #dfe3e8 fill on a 35px chip
• Set titles in the house serif and everything else in GentleSans at 350–400
• Recolour the header: white over imagery, black on white pages

Don't

• Don't add a chromatic accent to the chrome; the captured pages have none
• Don't make the page white; the store's canvas is #f3f4f6
• Don't add shadows to products, pills or actions
• Don't substitute Arial or a system face and present it as the Gentle Monster faces
• Don't set labels heavier than 400
• Don't reuse the consent dialog's styling as a product component

Voice & Tone

IICOMBINED's own voice is declarative and aspirational; the Gentle Monster store speaks in very few words and lets campaigns do the talking.

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

• "Unexpected Wonder. High-end Valueness." — iicombined.com.
• "Brands, made of experimental differentiation." — iicombined.com.
• "구매하기" / "캠페인 보기" — home campaign pills (fixed probe).
• "Home | 젠틀몬스터 공식 온라인 스토어" — gentlemonster.com page title.

Forbidden register: discount urgency, countdowns, stacked exclamation marks, copy that competes with the campaign imagery.

Agent Prompt Guide

Quick Color Reference

• Canvas #f3f4f6; text and filled action #111111; label on it #ffffff
• Header on white pages #000000; over imagery #ffffff
• Secondary text #858585
• Selected chip #dfe3e8; outline #ababab

Example Component Prompts

• "Create the product action: #111111 background, #ffffff 12px label (weight 400, line height 20px), 8px radius, 48px tall, full width of a 327px column, no shadow."
• "Create a campaign pill over a photo: transparent background, 1px solid #ffffff border, #ffffff 11px label, 25px radius, 0 23px padding, 36px tall; pair two of them."
• "Build filter chips: 35px radius, 7px 12px padding, 33px tall, 1px #dfe3e8 border; the selected chip also fills #dfe3e8."
• "Add a load-more control: transparent, 1px solid #ababab, 8px radius, 184 × 44, 12px light label in #111111."

Iteration Guide

1. Grey #f3f4f6 page, #111111 text
2. One filled action; everything else transparent, stroked or tinted
3. Serif for titles, GentleSans 350–400 for UI
4. 25px pills, 35px chips, 8px rectangles, 0px elsewhere
5. No shadows; let photography carry colour and depth

---

Governance

Known Gaps

• Contrast, load-more-button. Text #111111 on #00000000 measures 1.11:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, header-menu-item. Text #000000 on #00000000 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, underlined-text-action. Text #111111 on #00000000 measures 1.11:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.