# Markaware Jp · Design system migration spec

> Source: https://markaware.jp/en  ·  Curated by OpenDesign  ·  en

> This site is worth including as a masterclass in restrained, premium fashion e-commerce that uses architectural lines and neutral tones to elevate product presentation.

## 1. Identity DNA

MARKAWARE's design system operates like a quiet gallery of premium textiles, where the architecture recedes to let the materials speak. Every decision—from the monochrome palette to the single-weight typography—serves the product, not the interface.

**One-liner:** A refined Japanese fashion e-commerce experience with gallery-style photography and restrained typography.
**Keywords:** minimal · editorial · premium fashion · material-focused
**Analogy:** a quiet gallery of premium textiles

## 2. Color

The color system is a study in restraint: a neutral, high-key monochrome palette where black text and borders provide all structural definition against off-white backgrounds. Product photography is the sole source of chromatic variety.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FCFCFC` | main background |
| `--bg-soft` | `#F7F6F3` | card background |
| `--bg-quiet` | `#ECEBE9` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#9B9B9A` | placeholder |
| `--line` | `rgba(0,0,0,0.12)` | divider |

**Color principle:** Neutral, high-key palette letting product photography provide all color and texture.

The principle is absolute: the system never competes with the product it presents.

## 3. Typography

Typography is handled by a single geometric-sans typeface, ABCDiatype, used exclusively at weight 400. This consistent, understated voice ensures readability and sophistication without visual noise.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.1 | 400 | 0.5px | hero headline |
| headline | 32px | 1.2 | 400 | 0.4px | section titles |
| body | 14px | 1.3 | 400 | 0.4px | navigation and body text |

**Type rules:**
- All text uses a consistent geometric-sans (ABCDiatype) at weight 400.
- Brand logo is set in wide-spaced uppercase tracking.
- Body copy uses a slightly wider letter-spacing (0.4px) for enhanced readability.

## 4. Spacing

Vertical rhythm is established through generous padding that creates deliberate breathing room between content sections and imagery.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Vertical rhythm is maintained by generous padding (398px to 70px) between hero images and content sections.

## 5. Surfaces

Depth is communicated through subtle, layered shadows and a consistent 1px solid black border that defines every interactive element and container, creating a sharp, architectural framework.

- **Radius:** sm 0px · md 0px · lg 0px · pill 100px
- **Shadows:**
  - rgba(0,0,0,0.2) 0px 0px 18px 0px
  - rgba(0,0,0,0.3) 0px 12px 60px 0px
  - rgba(0,0,0,0.05) 0px 0px 2px 1px
- **Borders:** 1px solid black for all interactive elements and container boundaries, creating sharp structural definition.

## 6. Layout

The layout skeleton pairs full-bleed hero imagery with a strict 4-column product grid, defined by uniform 20px gutters. This gallery-style structure is clean, predictable, and allows the product cards to breathe.

- **Container max:** 1440px
- **Paragraph max:** 600px
- **Grid:** 4 columns, gutter 20px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed hero imagery paired with a 4-column product grid that maintains uniform 20px gutters.

## 7. Motion & Interaction

Motion is minimal and functional, designed to reveal and conclude without drawing attention to itself. Standardized 0.5-second opacity transitions govern overlays, while UI elements reveal with smooth cubic-bezier easing.

- **Durations:** micro 220ms · small 400ms · medium 500ms
- **Easing:** `cubic-bezier(0.215, 0.61, 0.355, 1)`
- **Patterns:**
  - Smooth opacity and visibility transitions (0.5s) for overlays like the 'Stay in Touch' modal.
  - Width and max-width transitions (0.4s) using a standard cubic-bezier for UI element reveals.

- **Hover:** Subtle color shifts or opacity changes, maintaining the site's overall restraint.
- **Click:** Instant feedback through page transitions or modal reveals.
- **Transition:** Standardized 0.5s opacity/visibility transitions for most interactive elements.
- **Keyboard:** Standard focus management for navigation, modals, and interactive components.

## 8. Voice & Don'ts

The editorial voice is quiet, sophisticated, and informative, focusing on material quality and technical specification rather than persuasive marketing. Headlines are descriptive and often technical, while calls to action are direct and functional.

- **Tone:** Quiet, sophisticated, and informative, reflecting a focus on material quality and craftsmanship.
- **Headline style:** Clear, descriptive, and often technical (e.g., 'Organic Wool 2/80 Tropical').
- **CTA style:** Direct and functional (e.g., 'Shop', 'Join Mailing List', 'Read More').
- **Avoid:** Loud marketing jargon / Aggressive sales language / Excessive use of exclamation points / Vague, flowery descriptions that distract from material specs

### Don'ts
- ❌ Don't use high-chroma accent colors — the palette is strictly monochrome and neutral.
- ❌ Don't use heavy font weights — all visible typography is weight 400.
- ❌ Don't use complex decorative backgrounds — the design relies on clean photography and white space.
- ❌ Don't use rounded corners on primary UI elements — the site uses sharp edges for most containers, reserving pills for buttons.
- ❌ Don't clutter the interface — the layout maintains generous, intentional spacing between all elements.
- ❌ Don't use a busy or multi-colored palette — product colors and photography are the only sources of chromatic variety.

The system deliberately avoids high-chroma accents, heavy font weights, decorative backgrounds, and any element that would clutter the interface or distract from the product.

## System Prompt (paste into AI tool)

```
MARKAWARE is a premium Japanese fashion brand with a refined, editorial e-commerce presence. The visual identity is built on a neutral, high-key palette (bg: #FCFCFC, ink: #000000, muted: #9B9B9A) that allows high-quality product photography to take center stage. Typography uses a geometric-sans (ABCDiatype) exclusively at weight 400, with generous letter-spacing for a sophisticated feel. Layouts are clean and structured, featuring a 4-column grid with 20px gutters and sharp 1px black borders for containers and buttons. Key elements include pill-shaped outline buttons (100px border-radius) and minimal, image-heavy product cards. Critical rules: never use high-chroma accents, never use heavy font weights (above 400), and never clutter the interface with unnecessary decorative elements. Prioritize breathing room and structural clarity to maintain the brand's quiet, premium aesthetic.
```