Damson Madder

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/damsonmadder.com -->
<!-- Extracted: 2026-11-05T13:31:06.898Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Damson Madder"
description: "Damson Madder projects a conscientious and approachable vibe, blending a serious commitment to sustainability with an enthusiastic and accessible communication style. It feels like a brand that is transparent and earnest in its mission, making eco-conscious fashion feel attainable and straightforward."
colors:
  primary: "#000000"
  secondary: "#f7f7f7"
  tertiary: "#000000"
  neutral: "#a8a8a8"
  surface: "#000000"
  on-surface: "#363636"
  border: "#e2e2e2"
  error: "#b6534c"
  success: "#82b875"
typography:
  display-lg:
    fontFamily: "OpenSauceSans Regular"
    fontSize: "28px"
    fontWeight: "400"
  headline-lg:
    fontFamily: "OpenSauceSans Regular"
    fontSize: "24px"
    fontWeight: "700"
    lineHeight: "28.8px"
  headline-md:
    fontFamily: "OpenSauceSans Regular"
    fontSize: "14px"
    fontWeight: "700"
    lineHeight: "15.4px"
  body-md:
    fontFamily: "OpenSauceSans Regular"
    fontSize: "25.6px"
    fontWeight: "400"
rounded:
  md: "1px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#f3f3f3"
    textColor: "#363636"
    rounded: "0px"
    padding: "0px"
    fontSize: "25.6px"
    fontWeight: "400"
    borderColor: "#363636"
---

# Damson Madder — Design System

## Overview

Damson Madder's design system embodies the Caregiver and Innocent archetypes, fostering a conscientious and approachable atmosphere. It aligns with brands like Everlane, Patagonia, and Reformation, prioritizing transparency and ethical practices. The visual language is clean, modern, and minimalist, designed to make sustainable fashion feel attainable and straightforward. This approach ensures that the brand's serious commitment to environmental responsibility is communicated with an enthusiastic and accessible tone, avoiding any sense of exclusivity or preachiness. The design is earnest and direct, reflecting a brand that is open about its mission and processes.

The aesthetic is grounded in a commitment to clarity and honesty, eschewing overly ornate or trend-driven elements. It is not luxurious or high-fashion in a traditional sense, nor is it overtly rustic or bohemian. Instead, Damson Madder focuses on functional elegance and understated sophistication, where design serves to highlight the product's ethical provenance and quality. The visual system is built to be easily understood and navigated, ensuring that the user experience is as transparent and straightforward as the brand's production values. This deliberate simplicity reinforces trust and makes eco-conscious choices feel natural and unburdened.

**Key characteristics:**

- Vibe — sustainable, transparent, accessible, ethical, modern, minimalist
- Archetypes — The Caregiver, The Innocent
- Comparable to — Everlane, Patagonia, Reformation, tentree
- Design era — contemporary-minimal
- Emotional tone — trustworthy-conscious
- Target audience — Conscious consumers aged 25-45 who value sustainability and transparency in their fashion choices, appreciate clear communication, and seek modern, understated styles.
- Visual energy — 3/10 (calm/understated)

## Colors

The Damson Madder color palette is intentionally stark, relying on a primary and surface color of #000000. This deliberate choice communicates a profound commitment to minimalism and transparency. Black signifies seriousness, timelessness, and a foundational strength, avoiding frivolous distractions. It grounds the brand in its ethical mission, allowing the inherent quality and sustainable story of the products to take precedence without visual clutter. This monochromatic approach underscores the brand's modern, straightforward, and accessible character.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#000000` | Black |
| secondary | `#f7f7f7` | White Smoke |
| accent / tertiary | `#000000` | Black |
| background | `#000000` | Black |
| text | `#363636` | Charcoal |
| border | `#e2e2e2` | Gainsboro |
| muted | `#a8a8a8` | Dark Silver |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#82b875` | Confirmations, positive states |
| error | `#b6534c` | Failures, destructive actions |

## Typography

Damson Madder employs OpenSauceSans Regular for all textual elements. This singular font choice reinforces the brand's commitment to simplicity, clarity, and consistency. The sans-serif nature of OpenSauceSans projects a modern, clean, and highly readable aesthetic, aligning with the brand's transparent and accessible communication style. Hierarchy is established through size and weight variations within this single typeface, ensuring that information is presented directly and without visual fuss. This system communicates an earnest, no-nonsense approach, making the brand's sustainable message feel straightforward and easily digestible.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| OpenSauceSans Regular | body | adobe-fonts | 400, 500 |
| OpenSauceSans Regular | heading | adobe-fonts | 400, 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | OpenSauceSans Regular | 28px | 400 | — | — |
| Heading 2 | OpenSauceSans Regular | 24px | 700 | 28.8px | — |
| Heading 3 | OpenSauceSans Regular | 14px | 700 | 15.4px | — |
| Body | OpenSauceSans Regular | 25.6px | 400 | — | — |

### Conventions

- Heading case — title-case

## Layout

- Base spacing unit — `2px`

## Shapes

Border-radius scale:

- `md` — 1px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#f3f3f3`
- Text — `#363636`
- Radius — `0px`
- Padding — `0px`
- Font size — `25.6px`
- Font weight — `400`
- Border — ` solid #363636`

## Do's and Don'ts

### Do

- Utilize OpenSauceSans Regular for all text, using 400 weight for body copy and 400 or 700 weight for headings.
- Apply title-case for all headings to maintain a consistent, structured presentation.
- Employ a monochrome color palette with #000000 (black) as the primary and accent color, #f7f7f7 as a secondary background, and #363636 for body text.
- Design secondary buttons with a #f3f3f3 background, #363636 text, a 0px border-radius, and a #363636 border.
- Ensure all buttons and interactive elements have a sharp, 0px border-radius, reflecting a clean, unrounded aesthetic.
- Maintain a flat design aesthetic, avoiding any box-shadows or gradients across all UI elements.
- Use direct, action-oriented imperative verbs for all Call-to-Action (CTA) text.
- Keep vocabulary simple and free of jargon to ensure high accessibility in all copy.
- Structure content with clear bullet points for easy readability of information like shipping policies.

### Don't

- Do not use any serif fonts; the brand exclusively uses OpenSauceSans Regular.
- Avoid using emojis or exclamations in any copy, as the brand maintains a matter-of-fact and serious tone.
- Do not apply any box-shadows or drop-shadows to any UI elements, as the brand embraces a flat design.
- Do not incorporate gradients into any visual elements or backgrounds.
- Avoid rounded corners; all border radii should be 0px or a minimal 1px as per the base unit.
- Do not use a vibrant or multi-color palette; stick strictly to the defined monochrome system of black, white, and dark grey.
- Do not use overly playful or informal language; maintain the established balance of formal and serious tone.
- Avoid complex or technical vocabulary; all communication should be simple and accessible.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 7/10 | casual |
| Playful ↔ Serious | 7/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 8/10 | matter-of-fact |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 9/10 | accessible |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — simple
- Jargon — none
- CTA style — direct, action-oriented imperative verbs

### Sample copy

> Damson Madder believes that you shouldn’t have to choose between your wardrobe and the environment.

> Our aim is to ensure that every garment we make features as many sustainable attributes as possible.

> • Free shipping on orders over 200 €• We cover all duties & taxes, you only pay the price at checkout• Free exchanges on all orders• Shop in European sizing• Quick & easy returns

> Join Our Mailing List & Get 10% Off + Exclusive members only updates and rewards

> Checkout Securely

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/damsonmadder.com) | 100% |
| favicon | — | png | [link](brands/damsonmadder.com/logo-0.png) | 95% |
| primary | — | png | [link](brands/damsonmadder.com/logo-1.png) | 85% |
| primary | color | png | [link](brands/damsonmadder.com/logo-2.png) | 85% |
| primary | color | png | [link](brands/damsonmadder.com/logo-3.png) | 85% |
| primary | color | png | [link](brands/damsonmadder.com/logo-4.png) | 85% |
| primary | color | png | [link](brands/damsonmadder.com/logo-5.png) | 85% |
| primary | color | png | [link](brands/damsonmadder.com/logo-6.png) | 85% |
| primary | color | png | [link](brands/damsonmadder.com/logo-7.png) | 85% |
| primary | color | png | [link](brands/damsonmadder.com/logo-8.png) | 85% |
| logomark | — | svg | [link](brands/damsonmadder.com/logo-svg-9.svg) | 90% |

## Sources

- Official brand guidelines — https://www.canva.com/docs/media-kits/
- Live brand page — https://extractvibe.com/brand/damsonmadder.com
- Raw JSON — https://extractvibe.com/api/brand/damsonmadder.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/damsonmadder.com/design.md
- Extracted — 2026-11-05T13:31:06.898Z
- Generator — ExtractVibe vv1
- Quality score — 100/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md