---
name: Markaware Jp
description: "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."
version: alpha

colors:
  background: "#FCFCFC"
  primary: "#000000"
  neutral: "#9B9B9A"
  bg-soft: "#F7F6F3"
  bg-quiet: "#ECEBE9"
  line: "rgba(0,0,0,0.12)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "0.5px"
  headline:
    fontFamily: geometric-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0.4px"
  body:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0.4px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 100px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A refined Japanese fashion e-commerce experience with gallery-style photography and restrained typography.

*a quiet gallery of premium textiles*

## Colors

Neutral, high-key palette letting product photography provide all color and texture.

- **Background (`#FCFCFC`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#9B9B9A`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.12)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Vertical rhythm is maintained by generous padding (398px to 70px) between hero images and content sections.

## Elevation & Depth

- 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.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 100px

## Components

- **button:** Pill-shaped outline buttons with black text and transparent background, using a 100px border-radius.
- **card:** Minimal cards with a large product image and a small, left-aligned title below, separated by a light border.
- **chip:** Small color swatches (black, beige, charcoal, white) used for product variant selection.
- **input:** Clean text input fields with minimal borders, often accompanied by a black underline or border.
- **hero:** Split-screen hero on desktop with an image taking up roughly 60% of the width, shifting to full-width on mobile.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```