# A Ware At · Design system migration spec

> Source: https://a-ware.at  ·  Curated by OpenDesign  ·  en

> This site is a prime example of a premium, photography-driven brand that uses classical typography to elevate its athletic identity.

## 1. Identity DNA

The system operates like a well-crafted piece of performance gear: its premium nature is evident in refined details, not in ornamentation. The identity merges the raw, powerful imagery of nature with the precise, classical authority of its typography.

**One-liner:** A premium outdoor and athletic brand that leverages bold editorial photography and classical typography to project a sense of natural power and refined quality.
**Keywords:** natural · performance · premium · outdoor
**Analogy:** A premium athletic brand blending raw nature photography with refined, classical typography.

## 2. Color

The color strategy is one of restraint, using a neutral canvas to let photography provide all chromatic depth and narrative. The palette of deep blacks and earthy off-whites is foundational, ensuring visual weight comes from content, not decoration.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ECE9DF` | main background |
| `--bg-soft` | `#F7F5EE` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#A77A41` | placeholder |
| `--line` | `rgba(0,0,0,0.12)` | divider |

**Color principle:** Earthy neutrals and deep blacks, using photography as the primary source of color and visual interest.

The principle is that the design should feel like a window to the world, not a painted frame.

## 3. Typography

Typography serves a dual, editorial voice: massive, tightly tracked serifs convey authority and classical form for headlines, while clean, wide-spaced sans-serifs provide functional clarity for navigation and labels.

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** geometric-mono

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 150px | 1.0 | 300 | -10px | Massive hero headlines |
| heading | 38px | 1.0 | 300 | -1px | Subheadings and call-to-action text |
| body | 14px | 1.1 | 400 | 0.3px | Standard body text and UI elements |

**Type rules:**
- Use wide letter-spacing for uppercase sans-serif labels.
- Use tight tracking for large display serifs.

## 4. Spacing

Spatial rhythm is defined by generous whitespace, anchored to a 48px base unit that creates deliberate, structural pauses between content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 96 px
- **Rhythm:** Generous whitespace with a clear 48px base for structural gaps.

## 5. Surfaces

Depth is implied rather than constructed, with surfaces rendered mostly borderless to emphasize content. Where separation is needed, it is achieved through minimal 1px dividers or the softest of shadows.

- **Radius:** sm 8px · md 12px · lg 32px · pill 999px
- **Shadows:**
  - rgba(172,171,171,0.3) 0px -1px 10px 0px
- **Borders:** Minimal, mostly borderless with occasional 1px dividers or subtle underlines.

## 6. Layout

The layout skeleton is fundamentally editorial, built on a framework of full-bleed photography. This photographic base is then overlaid with massive, confident typography, creating a direct and impactful visual hierarchy.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed editorial photography with massive typographic overlays.

## 7. Motion & Interaction

Motion is treated as a functional utility, not a spectacle. It consists of minimal, linear transitions that provide immediate feedback for interactive states, ensuring the interface remains quiet and the content remains primary.

- **Durations:** micro 150ms · small 400ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth linear opacity transitions for UI state changes.

- **Hover:** Subtle color or opacity shift.
- **Click:** Immediate feedback with linear transitions.
- **Transition:** 0.15s linear opacity and 0.4s linear color.
- **Keyboard:** Standard focus visibility.

## 8. Voice & Don'ts

The editorial voice is confident and direct, matching the premium, performance-oriented nature of the brand. Language is purposeful and avoids any hint of casual playfulness, aligning with the system's refined visual rigor.

- **Tone:** Confident, direct, and premium.
- **Headline style:** Massive, all-caps, tightly tracked serifs or spaced sans-serifs.
- **CTA style:** Spaced uppercase sans-serif, often within a pill-shaped outline.
- **Avoid:** Playful or casual language. / Cluttered layouts. / Bright, neon accent colors.

### Don'ts
- ❌ Don't use bright, artificial accent colors — the screenshot relies on natural tones and photography.
- ❌ Don't use tight, centered text blocks — the design favors wide, left-aligned or full-bleed typographic compositions.
- ❌ Don't use heavy drop shadows or 3D effects — the UI is flat and relies on depth from photography.
- ❌ Don't use rounded sans-serif fonts for display — the screenshot features sharp, classical serifs for impact.
- ❌ Don't clutter the layout with multiple UI elements — the design is highly spacious and minimalist.
- ❌ Don't use complex background patterns — the design uses solid earthy tones or full-bleed imagery.

The system deliberately rejects bright, artificial color and cluttered, multi-column complexity in favor of spacious, photography-led compositions.

## System Prompt (paste into AI tool)

```
A premium athletic and outdoor e-commerce brand. The layout is dominated by full-bleed, high-contrast photography of athletes in nature. The typography uses massive, tightly tracked transitional serifs for headlines (e.g., 'A-WARE') and clean, wide-spaced sans-serifs for navigation and labels. Key colors include an earthy off-white (#ECE9DF) for backgrounds, deep black (#000000) for ink, and a subtle golden-brown (#A77A41) for accents. Critical donts: never use bright neon colors, avoid cluttered multi-column layouts, and do not use playful or casual typography. The overall feel is editorial, refined, and powerfully natural.
```