---
title: "A-WARE design system"
variant: extended
source: https://a-ware.at/
captured_at: 2026-10-12
theme: dark
industry: health
generator: Design DNA (https://four.wiralomi.com/style/a-ware-at)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# A-WARE · Design System

> Natural nutrition, presented with bold restraint.

**Theme:** dark · **Industry:** health · **Source:** https://a-ware.at/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A-WARE pairs a dramatic black hero with oversized typography and warm, pale product sections. The homepage balances Austrian natural-nutrition cues with a direct, editorial online-store experience.

## North star

Use oversized, high-contrast typography on flat black and warm ivory fields, keeping accents and framing restrained.

## Overview

The homepage is built around a stark alternation: a near-black hero establishes the brand, while warm ivory sections carry product and benefit content. White typography and the oversized A-WARE wordmark create the strongest contrast; green is reserved for the narrow delivery announcement and restrained accent moments. Typography pairs a bold uppercase sans for display, navigation, and short labels with a light serif for more editorial product and supporting text. A mono face appears in compact utility copy. The opening layout gives the wordmark an expansive field, then anchors a large slogan and outlined pill CTA near the lower edge. Below, pale sections use centered headings and split content with product imagery, lists, and short calls to action. Hairline dividers and minimal framing keep the page flat and let imagery and type provide hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Canvas | `#000000` | `--color-deep-canvas` | brand | Primary hero and category-band background; also the main dark text color on pale navigation and content surfaces. |
| Warm Parchment | `#f7f5ee` | `--color-warm-parchment` | surface | Warm pale canvas for product benefits, editorial messaging, and product-focused sections. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | High-contrast text on black, product links, and the filled primary CTA background. |
| Graphite Line | `#595959` | `--color-graphite-line` | semantic | Measured border tone for subtle component outlines and separators. |
| Quiet Gray | `#808080` | `--color-quiet-gray` | neutral | Muted supporting text and secondary headings where full white contrast is unnecessary. |
| Stone Text | `#888783` | `--color-stone-text` | neutral | Secondary text tone measured in headings and body copy; use sparingly against pale surfaces. |
| Soft Pewter | `#b9b8b2` | `--color-soft-pewter` | neutral | Subtle measured border color, especially for low-emphasis separators on light sections. |
| Ivory Rule | `#d9d7d1` | `--color-ivory-rule` | neutral | Light divider and link-related detail within the pale product and editorial sections. |
| Warm Charcoal | `#403e3c` | `--color-warm-charcoal` | neutral | Deep neutral detail in measured borders and small interface elements, not a dominant surface. |
| Forest Signal | `#205f4b` | `--color-forest-signal` | accent | Green accent for the delivery announcement and restrained brand cues; keep it secondary to black and ivory. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Canvas) · `--color-surface` → `#f7f5ee` (Warm Parchment) · `--color-text` → `#ffffff` (Clean White) · `--color-text-muted` → `#000000` (Deep Canvas) · `--color-text-subtle` → `#808080` (Quiet Gray) · `--color-border` → `#595959` (Graphite Line) · `--color-accent` → `#205f4b` (Forest Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#f7f5ee` | 1.09:1 | fail |
| `#000000` | `#f7f5ee` | 19.25:1 | AAA |
| `#808080` | `#000000` | 5.32:1 | AA |
| `#808080` | `#f7f5ee` | 3.62:1 | AA-large |
| `#205f4b` | `#000000` | 2.8:1 | fail |
| `#205f4b` | `#f7f5ee` | 6.88:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| plantin | `--font-display` | webfont | 300 | Light editorial headings and product or supporting copy. | Cormorant Garamond |
| practice | `--font-body` | system | 600, 400 | Display wordmark treatment, uppercase headings, navigation, labels, and CTAs. | Montserrat |
| lab-mono | `--font-mono` | system | 400 | Compact captions and utility information. | IBM Plex Mono |

- **plantin:** Use a light serif with natural contrast; sentence case is common, with restrained tracking.
- **practice:** Use confident sans weights, tight tracking on large uppercase display, and compact uppercase navigation.
- **lab-mono:** Keep mono text small and functional, with regular weight and uncomplicated casing.

### Type scale — Augmented Fourth (ratio ≈ 1.406, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 88px | 600 | normal | -0.02em | uppercase | practice | Oversized uppercase brand and slogan display on the black hero. |
| h1 | 38px | 300 | 1.05 | -0.02em | — | plantin | Light serif introductory or editorial headline. |
| h2 | 36px | 600 | 1.05 | -0.02em | uppercase | practice | Bold uppercase section headlines on pale content areas. |
| h3 | 25px | 600 | 1.2 | -0.02em | uppercase | practice | Uppercase subheadings for benefits and product groupings. |
| h4 | 24px | 300 | 1.33 | 0 | — | plantin | Light serif supporting headlines within editorial content. |
| body | 16px | 600 | 1.19 | 0 | — | practice | Compact, semibold sans copy for benefits and product information. |
| caption | 12px | 400 | 1.33 | 0 | — | lab-mono | Small mono utility and caption text. |
| button | 88px | 600 | normal | -0.02em | uppercase | practice | Large uppercase display treatment measured on category labels. |
| link | 14px | 600 | 1 | 0.1em | uppercase | practice | Compact uppercase navigation and action links. |
| eyebrow | 16px | 600 | 1 | 0.04em | uppercase | practice | Uppercase introductory labels above section content. |
| code | 12px | 400 | 1.33 | 0 | — | lab-mono | Small mono utility text where technical-style notation is needed. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 5, 8, 10, 12, 14, 16, 17, 20, 24, 32, 36, 38, 40, 48 px.
- Section rhythm 48px · element gap 5px · card padding — · max content width 1368px.

The measured content reaches a page max width of 1368px, with a comfortable rather than crowded density. The first viewport is dominated by a full-width black hero, followed by warm pale sections that use centered headings and split layouts. A narrow announcement strip and a separate light navigation row sit above the hero. Product and benefit content is organized into broad bands; category labels return to black full-width strips. Section rhythm is generous, with measured section gaps of 48px and a spacing system based on a 4px unit.

## Shape & elevation

- Radius: button `9999px` · media `6px` · link `6px` · xs `6px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s linear` on interactive elements.

The page is predominantly flat: no measured shadows or gradients. Use contrast between black and warm ivory bands, plus fine gray or pale dividers, to create separation. Buttons and media are the main rounded elements, while category bands and text links remain unboxed. Keep overlays and card elevation minimal.

## Imagery

Product and lifestyle imagery appears mainly in the pale sections, where it supports nutrition claims and product discovery rather than competing with the brand mark. The first viewport keeps the hero largely typographic and black, with no visible hero photography. Use clean, naturally lit product or sport imagery, broad crops, and restrained framing; measured image corners use a subtle radius. Avoid decorative illustration as the page’s main visual language.

## Components

### Announcement strip

A slim forest-green band above navigation carries centered delivery and shipping information in compact light text.

### Primary navigation

A warm light row places uppercase SHOP, ABOUT, and BLOG links at left, with account, search, and cart utilities aligned right.

### Hero wordmark

A huge white A-WARE wordmark fills the black hero, followed by the uppercase POWERED BY NATURE slogan and an outlined pill-shaped shop CTA.

### Benefit split

Pale content panels pair uppercase benefit labels and short proof points with product or sport imagery; use a thin divider between columns.

### Editorial CTA

A centered uppercase headline and short supporting sentence introduce the range, followed by a compact uppercase text link.

### Product links

Product names and prices appear in a light serif on pale sections, with minimal framing and ample breathing room.

### Category band

Black full-width strips use large white uppercase category labels and item counts to introduce product groupings.

### Measured component styles

- **Primary button** (“MEHR PRODUKTE”): background #ffffff · text #000000 · radius 32px · padding 0px 32px 1px 32px · 600 16px practice · uppercase
- **Link** (“PRO Plus BIO-Hanfprotein 60% 600g € 30,9”): transparent background · text #ffffff · radius 0px · padding 0px 0px 24px 0px · 300 24px plantin
- **Navigation item**: transparent background · text #000000 · radius 0px · padding 0px · 300 24px plantin

## Do

- Keep the hero black and let the wordmark dominate.
- Use warm ivory as the main surface for product and benefit content.
- Reserve green for the announcement strip and small brand accents.
- Pair bold uppercase sans display with light serif editorial copy.
- Use broad section bands and clear contrast instead of elevated cards.
- Keep dividers subtle and product imagery naturally framed.

## Don't

- Do not add gradients or decorative shadows.
- Do not use multiple bright accent colors.
- Do not crowd the hero with supporting copy or imagery.
- Do not turn every product into a raised card.
- Do not replace the uppercase display style with soft, rounded typography.
- Do not use the green accent as a large-area background outside its restrained role.

## Agent prompt

Build a new A-WARE page using the established contrast system: Deep Canvas (#000000) for the hero and category bands, Warm Parchment (#f7f5ee) for editorial and product surfaces, Clean White (#ffffff) for reversed text and primary controls, and Forest Signal (#205f4b) only for small brand accents. Use a bold uppercase sans display face with tightly tracked oversized headlines, balanced by a light editorial serif for product copy and a mono face for utility labels. Organize content in broad, full-width bands with generous spacing, centered section headings, and selective split layouts. Keep the navigation compact and the primary CTA clearly visible. Use clean, naturally lit product imagery with restrained framing. Avoid shadows, gradients, bright extra colors, or card-heavy layouts; rely on typography, flat color fields, and fine dividers for hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width black hero with oversized wordmark, bottom-aligned slogan, and outlined CTA. | brand statement, shop CTA | black canvas, oversized uppercase type, outlined pill button |
| 2 | feature-grid | Warm ivory two-column area pairing benefit labels, claims, and product or sport imagery. | benefit scanning, product discovery | split columns, uppercase labels, fine divider |
| 3 | cta | Centered heading and supporting copy on a warm ivory field with a compact text link. | learn more, range exploration | centered typography, uppercase heading, text link |
| 4 | gallery | Single full-bleed image spanning a broad pale section. | visual storytelling | full-bleed media, minimal chrome |
| 5 | product-showcase | Pale product-focused band with supporting copy and a compact set of images or linked items. | product education, product browsing | serif product links, minimal framing, image-led content |
| 6 | category-nav | Black full-width band with a large uppercase category label and item count. | browse by goal | white display type, black band |
| 7 | category-nav | Black full-width band with a large uppercase category label and item count. | browse by goal | white display type, black band |
| 8 | category-nav | Black full-width band with a large uppercase category label and item count. | browse by goal | white display type, black band |
| 9 | category-nav | Black full-width band with a large uppercase category label and item count. | browse by goal | white display type, black band |

## Source CSS custom properties (selected)

```css
--cfw-heading-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
--cfw-body-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
--cfw-body-background-color: #fff;
--cfw-body-text-color: #666;
--cfw-body-link-color: #0073aa;
--cfw-header-background-color: #fff;
--cfw-header-text-color: #2b2b2b;
--cfw-footer-background-color: #fff;
--cfw-footer-text-color: #999;
--cfw-cart-summary-background-color: #fff;
--cfw-cart-summary-mobile-background-color: #f4f4f4;
--cfw-cart-summary-text-color: #333;
--cfw-cart-summary-item-quantity-background-color: #727272e6;
--cfw-cart-summary-item-quantity-text-color: #fff;
--cfw-cart-summary-order-total-text-color: #000;
--cfw-breadcrumb-completed-text-color: #00000080;
--cfw-breadcrumb-current-text-color: #333;
--cfw-breadcrumb-next-text-color: #00000080;
--cfw-breadcrumb-completed-accent-color: #333;
--cfw-breadcrumb-current-accent-color: #333;
--cfw-breadcrumb-next-accent-color: #333;
--cfw-buttons-primary-background-color: #333;
--cfw-buttons-primary-text-color: #fff;
--cfw-buttons-primary-hover-background-color: #555;
--cfw-buttons-primary-hover-text-color: #fff;
--cfw-buttons-secondary-background-color: #333;
--cfw-buttons-secondary-text-color: #fff;
--cfw-buttons-secondary-hover-background-color: #555;
--cfw-buttons-secondary-hover-text-color: #555;
--cfw-loading-shimmer-primary-color: #eff1f3;
--cfw-horizontal-divider-color: #b0b0b2;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/a-ware-at