---
name: Ganni
description: "A highly effective example of how a minimalist UI framework can successfully support and elevate a vibrant, fashion-forward brand identity."
version: alpha

colors:
  background: "#F1F1F1"
  primary: "#000000"
  secondary: "#686A6A"
  neutral: "#686A6A"
  bg-soft: "#F8F8F5"
  bg-quiet: "#F0F0F0"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 26px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "0"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0"
  micro:
    fontFamily: grotesque-sans
    fontSize: 12px
    lineHeight: 0.75
    fontWeight: 400
    letterSpacing: "0"

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

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

---

## Overview

A premium fashion e-commerce platform featuring bold typography and high-impact photography.

*A bold, minimalist fashion editorial*

## Colors

Neutral canvas letting vibrant photography drive the visual energy.

- **Background (`#F1F1F1`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#686A6A`)** — uses `ink-soft` token
- **Muted (`#686A6A`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- Navigation and category labels are typically uppercase.
- Headlines use mixed-case or uppercase with tight spacing.
- Body copy uses standard sentence case.

## Layout

A fluid grid system that adapts from full-bleed photography to multi-column product layouts.

*Rhythm:* A flexible 4px base grid driving consistent internal component padding and layout gaps.

## Elevation & Depth

- rgba(0, 0, 0, 0.4) 0px 4px 8px 0px
- Borders: Solid 1px black borders for standard interactive elements.

## Shapes

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

## Components

- **button:** High-contrast solid blocks (typically black background with white text) without rounded corners.
- **card:** A clean, structured layout for product displays, featuring a dominant image and minimal textual information.
- **input:** Minimalist rectangular fields defined by a bottom border.
- **hero:** Full-bleed photographic imagery combined with large typography and a prominent call-to-action.

## Do's and Don'ts

**Don't:**
- Don't use soft, rounded corners on buttons — screenshot shows sharp, rectangular UI elements.
- Don't rely on a single strong accent color — screenshot shows a predominantly monochrome palette driven by photography.
- Don't use thin or script typography — screenshot shows bold, solid sans-serif typefaces.
- Don't clutter the layout with excessive borders — screenshot shows clean, open space defining elements.
- Don't use low-contrast text for navigation — screenshot shows stark black text on light backgrounds.
- Don't use decorative drop shadows on standard UI elements — screenshot shows a flat, clean aesthetic.

---

## System Prompt (paste into AI agent)

```
GANNI is a premium Scandinavian fashion e-commerce platform with a bold, minimalist aesthetic. The design relies heavily on high-quality, full-bleed photography set against a stark, neutral canvas of black (#000000) and off-white (#F1F1F1), with a muted gray (#686A6A) used for secondary text. The typography is exclusively a bold grotesque sans-serif, frequently using all-caps for navigation and calls-to-action. Critical constraints for replicating this design include avoiding rounded corners on buttons and inputs, ensuring sharp rectangular shapes are used throughout, and steering clear of any single dominant accent color that competes with the imagery. Always maintain a strict, clean grid with ample negative space.
```