Switch between the rendered Visual preview and the Raw DESIGN.md.
The 10x10 design system embodies a clean, contemporary e-commerce aesthetic centered on curated design stationery and lifestyle products. The visual identity prioritizes clarity and accessibility through a minimalist color palette, generous whitespace, and refined typography. The system balances bold accent colors for high-priority actions with neutral, understated backgrounds that allow product imagery to dominate. The overall mood is sophisticated yet approachable—a digital marketplace that treats everyday objects as design-worthy items deserving of careful presentation and thoughtful interaction.
Key Characteristics
#FF214F): Primary call-to-action buttons, promotional badges, primary navigation active states, high-priority UI elements#007AFF): Secondary information, detailed links, supplementary actions#FF3030): Error messages, validation states, critical alerts; used interchangeably with #FF214F and #FF3131 for consistency#333333): Button text, active states, high-contrast interactive elements#404040): Secondary button backgrounds, hover states, darker interactive surfaces#555555): Body text, primary content, default paragraph copy#666666): Secondary content, metadata, supporting information#000000): Headlines, strong emphasis, maximum contrast text#1A1A1A at 30% opacity): Disabled form states, inactive elements#FFFFFF): Default page and container backgrounds, card surfaces, input fields#E5E5E5): Default borders, dividers, subtle separators#E5E7EB): Secondary borders, filter boundaries, category separatorsPrimary Font: Core Sans C
Fallback stack: 'Core Sans C', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Used for body text, buttons, and links. Clean geometric sans-serif optimized for screen legibility.
Secondary Font: Pretendard
Fallback stack: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Used for labels, headings, and form elements. Modern typeface with excellent Korean language support.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large | Pretendard | 32px | 700 | 41.6px | 0px | Category page titles |
| Heading 1 | Pretendard | 24px | 700 | 31.2px | 0px | Section headings, page titles |
| Heading 2 | Core Sans C | 16px | 700 | 20.8px | 0px | Subsection headings |
| Heading 3 | Core Sans C | 12px | 700 | 19.2px | 0px | Card titles, component labels |
| Body | Core Sans C | 13px | 400 | 18px | 0px | Primary body text, product descriptions |
| Body Small | Core Sans C | 12px | 400 | 15.6px | 0px | Secondary body text, metadata |
| Label | Pretendard | 14px | 500 | 21px | 0px | Form labels, filter tags |
| Label Small | Pretendard | 12px | 500 | 15.6px | 0px | Small labels, badges |
| Link | Core Sans C | 11px | 400 | 12px | 0px | Navigation links, inline links |
| Button | Core Sans C | 13.33px | 400 | normal | 0px | Button text |
| Caption | Core Sans C | 11px | 400 | 14.3px | 0px | Image captions, footnotes |
font-weight: 400 with sufficient letter-spacing and padding to remain scannable.#FF214F#FFFFFF12px 24px8px0px nonenone38px#E01A45, text remains #FFFFFF#C21740, text remains #FFFFFF#E5E5E5, text rgba(16, 16, 16, 0.3)#FFFFFF#4040405px 8px100px1px solid #E5E5E5none27.59px#F5F5F5, border #D5D5D5#ECECEC, border #B5B5B5rgba(0, 0, 0, 0)#3333330px8px1px solid #E5E5E5none38px48pxrgba(0, 0, 0, 0.04), border #C5C5C5#333333#0000000px8px0px nonenone34px33px#1F1F1F#FFFFFF1px solid #E5E5E58px0px (image full-bleed), 16px (text content)none#D5D5D5, box-shadow 0px 4px 12px rgba(0, 0, 0, 0.08)4px (top), 0px (corners if full-bleed)#333333#FF214F#999999, text-decoration line-through#666666#FFFFFF1px solid #E5E5E50px20px 16pxnone#3333331px solid #E5E5E5, margin 12px 0px#FFFFFF#6666668px 12px2.5px1px solid #E5E5E528px202pxrgba(102, 102, 102, 0.5)#FF214F, box-shadow 0px 0px 0px 2px rgba(255, 33, 79, 0.1)#FFFFFF#4040400px 12px8px1px solid #E5E5E534pxrgba(64, 64, 64, 0.4)#FF214F, background #FFFAFB#FF3030, background #FFF5F7#FFFFFF#3333330px 10px8px1px solid #E5E5E535px83px#FF214F, box-shadow inset 0px 0px 0px 1px #FF214F#333333 (default), #FF214F (active)8px 12pxtransparent (default), transparent (active)2px solid transparent (default), 2px solid #FF214F (active)#555555, border 2px solid #FFB3C1#FFFFFF (default), #FF214F (active)#333333 (default), #FFFFFF (active)8px 16px100px1px solid #E5E5E5 (default), 0px none (active)32px#F5F5F5, border #D5D5D5#333333none (default), underline (hover)#FF214F, text-decoration underline#666666#FF214F#FFFFFF4px 8px4px20px#FF214F#FFFFFF4px 6px2px16px#FF3030#FFFFFF2px 4px2pxBase Unit: 4px
Spacing Scale:
4px: Micro spacing (icon gaps, tight grouping)8px: Compact spacing (adjacent form controls, close components)12px: Small spacing (padding inside containers, tight sections)16px: Standard spacing (card padding, component gaps)20px: Medium spacing (section padding, vertical rhythm)24px: Large spacing (major section separators)32px: Extra large (container margins, layout breathing room)36px: Extra large variant (category section spacing)44px: Accessibility minimum (touch-target padding)80px: Major section margins (hero to content transition)92px: Layout maximum margin (content edge spacing)140px: Full-width container margins (edge-to-edge layout management)Usage Context:
1400px (content container)16px between columns20px (mobile), 32px (tablet), 44px (desktop)Whitespace serves as a primary design tool—not merely empty space, but active breathing room that guides the eye and reduces cognitive load. The system embraces negative space around product imagery, allowing each item to command attention individually. Section separators use whitespace (minimum 32px) rather than lines. Text blocks maintain generous line-height (1.3× to 1.5×) and letter-spacing to enhance readability. Sidebar filters use ample vertical spacing (12px between items) to prevent visual crowding.
0px): Grid layouts, full-width sections, navigation bars2.5px): Search inputs, minimal visual softening4px): Product image corners, small components, badges8px): Buttons, form inputs, cards, modal dialogs100px): Category pills, toggle buttons, full-round elements| Level | Treatment | Use |
|---|---|---|
| Flat (0) | box-shadow: none | Default cards, inputs, most components |
| Hover (+1) | box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08) | Product cards on hover, floating buttons |
| Raised (+2) | box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12) | Modal overlays, dropdown menus, tooltips |
| Floating (+3) | box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.16) | Sticky headers, notification banners, top-of-page CTAs |
Shadow Philosophy: The 10x10 system employs subtle, naturalistic shadows that enhance perceived depth without overwhelming the interface. Shadows grow progressively larger and more diffuse at higher elevation levels, mimicking real-world light falloff. Most components remain flat or lightly elevated; deep shadows are reserved for modal contexts and floating UI elements that demand user attention. All shadow colors use black at reduced opacity rather than colored shadows, maintaining visual consistency and ensuring accessibility across light/dark contexts.
#333333, #404040) on light backgrounds.#FF214F exclusively for primary CTAs and promotional states; reserve #007AFF for secondary information only.44px height and width; provide 8px padding around small icons.4px base unit (4px, 8px, 12px, 16px, 20px, 24px, 32px, 36px, 44px, 80px, 92px, 140px).-webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale for crisp typography on macOS.12px vertical dividers between categories; use 16px padding around each group.:hover and :active states; links must have :visited styles.#FF214F and #FF3030 in the same context; standardize on #FF214F for primary brand color.120% to prevent text block opacity.#333333 or #FF214F; avoid #666666 or lighter for clickable text.4px scale; arbitrary values like 13px or 27px are not permitted.:focus states (outline or background change); keyboard navigation must not be invisible.| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–639px | Single-column layout, full-width cards, vertical filter sidebar, 16px container padding, 12px spacing |
| Tablet | 640px–1023px | 2-column product grid, collapsible filter sidebar, 24px container padding, 16px spacing |
| Desktop | 1024px–1399px | 4-column product grid, fixed filter sidebar (25% width), 32px container padding, 20px spacing |
| Desktop Large | 1400px+ | 5–6 column product grid, fixed sidebar, 44px container padding, max-width 1400px content wrapper |
44px × 44px (touch buttons, checkboxes, radio buttons)4px surrounding link text to increase touch target34px–38px minimum to accommodate touch input33px–34px minimum width/height; center icon within button using flexbox8px gap between adjacent interactive elements to prevent accidental tapsMobile (320px–639px):
100% with 8px margins16px container padding, 8px gap between cards1.2× instead of 1.3×)Tablet (640px–1023px):
24px container padding, 12px gap between cards16px → 18px)Desktop (1024px+):
32px–44px container padding, 16px–20px gapsFlexible Container:
max-width: 1400px to constrain content on ultra-wide displaysmargin: 0 auto to center container44px padding on left/right even on large screens to prevent text from edge-touching#FF214F) — all primary buttons, promotional badges, active navigation states#007AFF) — supplementary actions, informational links#FFFFFF) — all page and container backgrounds#000000) — H1 and H2 headings, maximum contrast text#555555) — paragraph copy, default content#FF3030) — validation failure states, error messages#E5E5E5) — dividers, card edges, input borders#333333) — button text, active elementsAll spacing must be a multiple of 4px: Use scale values (4px, 8px, 12px, 16px, 20px, 24px, 32px, 36px, 44px, 80px, 92px, 140px) exclusively; no arbitrary spacing.
Primary brand color is #FF214F: Use this red for all primary CTAs, promotional content, and high-priority interactive states. Do not mix with #FF3030 (#FF214F is the single source of truth).
Typography pairs are Core Sans C + Pretendard: Body text and buttons use Core Sans C; headings and labels use Pretendard. Never introduce additional fonts; always provide fallback stacks.
Border radius follows the scale: Use 0px (sharp), 2.5px (subtle input), 4px (soft card corners), 8px (rounded buttons/inputs), or 100px (pill-shaped elements). Do not use arbitrary radius values like 6px or 10px.
Shadows appear only on elevation: Flat components (box-shadow: none) are default; apply 0px 4px 12px rgba(0, 0, 0, 0.08) on hover, 0px 8px 24px rgba(0, 0, 0, 0.12) for raised elements, 0px 12px 32px rgba(0, 0, 0, 0.16) for floating UI.
All interactive elements require focus states: Implement :focus, :hover, :active states with visible styling (color change, border change, or subtle shadow). Do not rely on browser defaults.
Minimum contrast ratio is 7:1: Text must use #333333 or darker on #FFFFFF; ensure readability with sufficient weight (font-weight: 500 for labels, font-weight: 400 for body).
Container max-width is 1400px: Center all full-width layouts with margin: 0 auto and apply 44px padding on desktop. Reduce padding at smaller breakpoints (32px tablet, 24px mobile).
Button heights are standardized: Primary buttons 38px, secondary 27.59px (or 28px rounded), icon buttons 33px–34px. Never create custom button heights outside this range.
Form inputs use #FFFFFF background with #E5E5E5 border: Focus state adds #FF214F border and #FFFAFB background. Error state applies #FF3030 border and #FFF5F7 background. Disabled state uses #E5E5E5 background with rgba(16, 16, 16, 0.3) text.