Design System Inspiration of Brandi
1. Visual Theme & Atmosphere
Brandi is an official Korean women's fashion shopping service: the public site title calls it “여성 패션 쇼핑앱 브랜디,” and its two captured item pages concentrate the available product evidence around choosing an option and proceeding to purchase. Those public commerce surfaces are predominantly white with #202429 text. The clearest action treatment is not the legacy pink claim: the direct purchase link is #1e1e1e with white text, while an adjacent green #00c73c link is a partner purchase path. On the home route, #ff365d appears on an active promotional slider item; it is therefore recorded as route-local promo evidence rather than a universal Brandi action token. The capture is desktop-only and does not establish an app, marketing, documentation, or account-area system beyond these public routes.
Key Characteristics:
- White commerce canvas with
#202429 ink across all three captured routes
- Product-detail purchase pair: direct
#1e1e1e and a separate green partner action
- 6px rounding on the recorded product actions, option control, listbox, and badge
- Noto Sans KR and Spoqa Han Sans are live-loaded on the captured web surfaces
- Active home promotional slider evidence is
#ff365d, not a general CTA rule
2. Color Palette & Roles
Captured commerce colors
- Canvas (
#ffffff): observed page/control background on the home and product routes.
- Ink (
#202429): observed product-option, menu, and general text color.
- Direct purchase (
#1e1e1e): background of .btn-buy on both captured product pages.
- Partner purchase (
#00c73c): background of the adjacent .btn-n-buy; this is a route-local partner action, not a universal Brandi color.
- On action (
#ffffff): observed text on both recorded purchase links.
- Promo active (
#ff365d): observed only on active home slider list items.
- Option border (
#e6e6e6): default product-option selector border.
- Disabled option border (
#e1e1e1): observed disabled selector border.
- Badge surface / text (
#ebeef2 / #808893): product-detail badge pair.
No #ff204b live use was recorded by the supplied 2026-07-13 capture, so it is not retained as a current token.
3. Typography Rules
Font evidence classes
| Family | Captured use | FontFaceSet / source corroboration | Resolution |
|---|
Noto Sans KR | 257 visible uses across home and both product pages, including headings, controls, badges, and purchase links | loaded, high confidence, with 124 fonts.gstatic.com source URLs | Verified live webfont. It is the sole tokens.typography.family.ui family. The Noto documentation describes the collection’s OFL use boundary; that licence context does not make it a Brandi-owned font. |
Spoqa Han Sans | 124 visible uses across body, menu, button, badge, and list-item roles | loaded, high confidence, backed by the captured FontFaceSet; the artifact lists no exact source URL for this family | Verified live surface use, preserved as route-local typographic evidence rather than an additional UI-family token. The Spoqa project distributes its family under SIL OFL and documents webfont use; do not rename the exact captured family to a newer upstream alias. |
Pretendard | No visible use | 18 CDN @font-face sources but no computed use | Declared-only. It is not a Brandi UI token and is not substituted into examples. |
Arial | Seven utility-button uses | System classification; no webfont source | System-only. Not a Brandi font claim. |
Observed hierarchy
| Role | Font | Size | Weight | Line Height | Provenance |
|---|
| Product purchase link | Noto Sans KR | 17px | 500 | normal | .btn-buy and .btn-n-buy on both product pages |
| Product option / expanded menu | Spoqa Han Sans | 13px | 400 | normal | option trigger and listbox on both product pages |
| Product badge | Noto Sans KR | 13px | 700 | normal | .badge on both product pages |
4. Component Stylings
Product purchase action
Direct purchase — observed default
- Background:
#1e1e1e
- Text:
#ffffff
- Radius:
6px
- Padding:
18px 4px
- Font:
17px / 500 / Noto Sans KR
- Use:
surface-2::[data-omd-capture="17"] / .btn-buy, also observed on surface-3; direct product purchase link.
Partner purchase — observed default
- Background:
#00c73c
- Text:
#ffffff
- Radius:
6px
- Padding:
18px 4px
- Font:
17px / 500 / Noto Sans KR
- Use:
surface-2::[data-omd-capture="18"] / .btn-n-buy, also observed on surface-3; adjacent green partner purchase link.
Product option select
Default and observed states
- Background:
#ffffff
- Text:
#202429
- Border:
1px solid #e6e6e6
- Radius:
6px
- Font:
13px / 400 / Spoqa Han Sans
- Expanded: The trigger at
surface-2::[data-omd-capture="15"] opened the recorded listbox on both product routes.
- Disabled: The disabled trigger at
surface-2::[data-omd-capture="16"] retained white background and #202429 text with 1px solid #e1e1e1 border.
- Use: Product-option selector. No hover, focus, pressed, validation, or selected-option styling is specified.
Product option listbox
Expanded — observed interaction state
- Background:
#ffffff
- Text:
#202429
- Border:
0px 1px 1px #e6e6e6
- Radius:
0px 0px 6px 6px
- Padding:
0px 0px 1px
- Font:
13px / 400 / Spoqa Han Sans
- Expanded:
surface-2::[data-omd-interaction-capture="menu-0-0"] / .ui-menu appeared after the option-trigger interaction; a 16px-padded option wrapper was observed inside it.
- Use: Product-option listbox on product pages only.
Product detail badge
Default — observed product metadata badge
- Background:
#ebeef2
- Text:
#808893
- Radius:
6px
- Padding:
2px 8px 3px
- Font:
13px / 700 / Noto Sans KR
- Use:
surface-2::span / .badge, also observed on surface-3.
Verified: 2026-07-13
Tier 1 sources: https://www.brandi.co.kr/; https://www.brandi.co.kr/products/106329458; https://www.brandi.co.kr/products/125381184; https://github.com/spoqa/spoqa-han-sans; https://notofonts.github.io/noto-docs/website/use/
Tier 2 sources: https://getdesign.md/brandi (no indexed Brandi record found); https://styles.refero.design/?q=brandi (no Brandi result found in the public search result set)
Conflicts unresolved: none
5. Layout Principles
The supplied evidence is a 1440×900 desktop capture. It supports only the recorded product-action spacing (18px 4px), option-listbox item padding (16px on the representative option wrapper), and compact badge padding. No product grid, page container, sticky bar, mobile layout, or checkout funnel rule is retained without a representative captured selector.
6. Depth & Elevation
The representative purchase links, select trigger, listbox, and badge all have box-shadow: none. No shadow scale or image overlay system is established by this capture.
7. Do's and Don'ts
Do
- Keep the direct product purchase link black
#1e1e1e with white text when reproducing the captured product-page state.
- Keep the green
#00c73c purchase link scoped to the observed adjacent partner action.
- Use the measured 6px corners and 13px Spoqa Han Sans option text only for the recorded product-option controls.
- Preserve the observed option listbox and disabled border as distinct states with their route/selector provenance.
- Treat Noto Sans KR and Spoqa Han Sans as live font evidence; keep Pretendard declared-only.
Don't
- Do not restore the legacy pink
#ff204b CTA, sale badge, wish-toggle, or card system from this evidence set.
- Do not turn the home slider’s
#ff365d into a universal product action token.
- Do not infer hover, focus, pressed, error, checkout, responsive, or app-native variants from the two recorded menu expansions.
- Do not use the green partner action as evidence of a Brandi-owned brand palette.
- Do not substitute a system font or declared-only Pretendard for the captured loaded families.
8. Responsive Behavior
No mobile viewport was supplied. The public evidence does not establish breakpoints, touch-target requirements, sticky behavior, product-grid columns, or mobile navigation rules.
9. Agent Prompt Guide
Verified prompt boundary
“Recreate only the captured Brandi product-detail controls: a #1e1e1e direct purchase link and adjacent #00c73c partner link, both white 17px/500 Noto Sans KR with 6px radius and 18px 4px padding; a white 6px product-option select with #e6e6e6 border and 13px Spoqa Han Sans; and its observed white expanded listbox. Do not add pink CTAs, product cards, heart toggles, hover/focus/error states, grid rules, or a mobile treatment.”
10. Voice & Tone
The supplied capture establishes the service name and commerce labels only; it does not provide a first-party editorial voice guide or enough verified copy to derive one. [FILL IN: official voice principles or source-backed microcopy.]
11. Brand Narrative
Brandi’s public site identifies the service as “여성 패션 쇼핑앱 브랜디.” Its product pages show a public option-selection and purchase surface, while the site footer identifies Newnex as the hosting operator and describes its payment/intermediation boundary. These are product and legal-context facts, not authority for a broader origin story, market position, mission, or rebrand narrative. [FILL IN: first-party history, mission, or current-evolution source.]
12. Principles
[FILL IN: official Brandi product or design principles. The observed commerce constraints above are not presented as official principles.]
13. Personas
[FILL IN: first-party, source-backed stakeholder groups or research. No synthetic personas are included.]
14. States
Only the product-option expanded/listbox state and the disabled option border were observed. Empty, loading, error, success, cart, wish, sold-out, and validation treatments are not specified.
15. Motion & Easing
No motion duration, easing curve, transition, or reduced-motion behavior was captured. None is specified.
16. Do's and Don'ts (Summary)
Do
- Reuse only values tied to a captured Brandi route and selector.
- Keep font, component, and interaction provenance separate by surface and state.
Don't
- Promote declared-only assets or old token values into the current product system.
- Invent checkout, account, marketing, documentation, or mobile components from these three public routes.