Circular Living

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/circularlivingco.com -->
<!-- Extracted: 2026-11-03T17:42:23.977Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Circular Living"
description: "Circular Living embodies a serene and conscious aesthetic, blending earthy tones with a clean, accessible presentation. It feels grounded and trustworthy, promoting a holistic approach to well-being and environmental respect through its organic skincare offerings."
colors:
  primary: "#aa9743"
  secondary: "#aa9743"
  neutral: "#6a6a6a"
  surface: "#ffffff"
  on-surface: "#1c1b1b"
  on-surface-secondary: "#6a6a6a"
  border: "#dddddd"
  link: "#6a6a6a"
  surface-dark: "#1c1b1b"
typography:
  display-lg:
    fontFamily: "Ovo"
    fontSize: "15px"
    fontWeight: "400"
    lineHeight: "24.75px"
  headline-lg:
    fontFamily: "Montserrat"
    fontSize: "20px"
    fontWeight: "500"
    lineHeight: "33px"
    letterSpacing: "4px"
  headline-md:
    fontFamily: "Montserrat"
    fontSize: "12px"
    fontWeight: "500"
    lineHeight: "19.8px"
    letterSpacing: "2.4px"
  headline-sm:
    fontFamily: "Montserrat"
    fontSize: "16px"
    fontWeight: "500"
    lineHeight: "26.4px"
    letterSpacing: "3.2px"
  body-md:
    fontFamily: "Ovo"
    fontSize: "15px"
    fontWeight: "400"
    lineHeight: "24.75px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#1c1b1b"
    rounded: "0px"
    padding: "14px 28px"
    fontSize: "13px"
    fontWeight: "500"
    borderColor: "#ece7db"
    borderWidth: "1px"
  button-secondary:
    backgroundColor: "#1c1b1b"
    textColor: "#ece7db"
    rounded: "50%"
    padding: "0px"
    fontSize: "15px"
    fontWeight: "400"
    borderColor: "#ece7db"
    boxShadow: "rgba(54, 54, 54, 0.15) 0px 2px 10px 0px"
  button-primary:
    backgroundColor: "#aa9743"
    textColor: "#ffffff"
    rounded: "0px"
    padding: "12px 20px"
    fontSize: "13px"
    fontWeight: "400"
    borderWidth: "1px"
---

# Circular Living — Design System

## Overview

Circular Living's design system manifests a serene and conscious aesthetic, directly reflecting the Caregiver and Innocent archetypes. It projects an immediate sense of grounded trustworthiness, aligning with the holistic well-being and environmental respect central to its organic skincare offerings. The visual language avoids any hint of artificiality, harshness, or overly clinical tones, instead embracing the gentle, nurturing qualities of nature. This design system prioritizes clarity and approachability, ensuring that the user experience is as calming and straightforward as the brand's philosophy.

The aesthetic draws inspiration from brands like Herbivore Botanicals, OSEA Malibu, True Botanicals, and Tata Harper, establishing a premium yet accessible feel. It is not opulent or overly minimalist to the point of being stark; rather, it strikes a balance between refined simplicity and organic warmth. The design actively rejects anything that might suggest mass production, synthetic ingredients, or fleeting trends, instead focusing on timeless, natural elegance. Every element, from color to typography, reinforces a commitment to genuine well-being and a deep connection to the earth.

**Key characteristics:**

- Vibe — organic, natural, earthy, conscious, accessible, serene
- Archetypes — The Caregiver, The Innocent
- Comparable to — Herbivore Botanicals, OSEA Malibu, True Botanicals, Tata Harper
- Design era — contemporary-natural
- Emotional tone — nurturing-authentic
- Target audience — Conscious consumers, particularly women and mothers, who prioritize organic, sustainable, and gentle skincare for themselves and their families, valuing transparency and natural ingredients.
- Visual energy — 4/10 (moderate)

## Colors

The color palette centers on a primary earthy gold, #aa9743, which immediately signals natural origins and a grounded, trustworthy character. This hue evokes the richness of soil and the warmth of sunlight, reinforcing the 'organic' and 'earthy' vibe. Paired with a clean, expansive white surface, #ffffff, the palette maintains an accessible and serene presentation, preventing the earthy tones from feeling heavy or rustic. This combination effectively communicates both the natural integrity and the refined purity of Circular Living's offerings.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#aa9743` | Peru |
| secondary | `#aa9743` | Peru |
| surface | `#ffffff` | White |
| background | `#ffffff` | White |
| text | `#1c1b1b` | Near-Black |
| secondary text | `#6a6a6a` | Dim Gray |
| border | `#dddddd` | Gainsboro |
| link | `#6a6a6a` | Dim Gray |
| muted | `#6a6a6a` | Dim Gray |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#1c1b1b` | Near-Black |

## Typography

The type system employs Ovo and Montserrat, a pairing designed for both elegance and clarity. Ovo, with its classic serifs, lends an organic, sophisticated touch that speaks to the brand's natural integrity and conscious approach. Montserrat, a clean sans-serif, ensures accessibility and modern readability, balancing the traditional feel of Ovo. The hierarchy will be straightforward and intuitive, prioritizing legibility and a calm visual flow, avoiding any jarring or overly bold statements to maintain the brand's serene and trustworthy voice.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Ovo | body | adobe-fonts | 400 |
| Ovo | heading | adobe-fonts | 400 |
| Montserrat | heading | adobe-fonts | 500 |
| Montserrat | body | adobe-fonts | 500 |
| Helvetica | body | system | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Ovo | 15px | 400 | 24.75px | — |
| Heading 2 | Montserrat | 20px | 500 | 33px | 4px |
| Heading 3 | Montserrat | 12px | 500 | 19.8px | 2.4px |
| Heading 4 | Montserrat | 16px | 500 | 26.4px | 3.2px |
| Body | Ovo | 15px | 400 | 24.75px | — |

### Conventions

- Heading case — title-case
- Body line-height — 24.75px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| modal | `rgba(0, 0, 0, 0.11) 6.5px 11.3px 19px 0px` |
| element | `rgba(54, 54, 54, 0.2) 0px -2px 10px 0px` |
| navigation | `rgba(255, 255, 255, 0.25) 0px -1px 0px 0px inset` |
| button | `rgba(54, 54, 54, 0.15) 0px 2px 10px 0px` |

## Components

### Buttons

**Outline**

- Text — `#1c1b1b`
- Radius — `0px`
- Padding — `14px 28px`
- Font size — `13px`
- Font weight — `500`
- Border — `1px solid #ece7db`
- Sample copy — "Add to cart
                          $180.00"

**Secondary**

- Background — `#1c1b1b`
- Text — `#ece7db`
- Radius — `50%`
- Padding — `0px`
- Font size — `15px`
- Font weight — `400`
- Border — ` solid #ece7db`
- Shadow — `rgba(54, 54, 54, 0.15) 0px 2px 10px 0px`

**Primary**

- Background — `#aa9743`
- Text — `#ffffff`
- Radius — `0px`
- Padding — `12px 20px`
- Font size — `13px`
- Font weight — `400`
- Sample copy — "Subscribe"

## Do's and Don'ts

### Do

- Use Ovo (400 weight) for body text and headings, complemented by Montserrat (500 weight) for select headings to add a touch of modern clarity.
- Maintain a primary color palette centered around #aa9743 (a muted gold/tan) for accents and primary calls to action, with #1c1b1b for text and #ffffff for backgrounds.
- Ensure body copy has a line-height of 24.75px for readability, and all headings are presented in title-case.
- Primary buttons should feature a #aa9743 background with #ffffff text and sharp, 0px border-radius, using padding of 12px 20px (e.g., 'Subscribe').
- Secondary buttons should have a #1c1b1b background, #ece7db text, and a distinct 50% border-radius (pill-shaped), with a subtle shadow (rgba(54, 54, 54, 0.15) 0px 2px 10px 0px).
- Outline buttons should use #1c1b1b text, a #ece7db border, 0px border-radius, and generous padding of 14px 28px.
- Apply subtle, dark shadows (e.g., rgba(0, 0, 0, 0.11) 6.5px 11.3px 19px 0px for modals) to create depth for interactive elements, but avoid excessive or multi-layered shadows.
- Maintain a clean, flat design aesthetic with minimal layering, relying on color and typography for hierarchy rather than complex visual effects.

### Don't

- Avoid using gradients anywhere in the design, as the brand's visual language is entirely flat and solid-colored.
- Do not use emoji in any marketing copy or website content; the brand maintains a serious yet accessible tone without playful icons.
- Refrain from using exclamations frequently; they are rare in existing copy, contributing to a calm and understated voice.
- Do not introduce new font families beyond Ovo, Montserrat, and Helvetica; maintain the established typographic hierarchy.
- Avoid bright, vibrant, or highly saturated colors; stick to the muted, earthy tones of the established color system.
- Do not use rounded corners for primary or outline buttons; these should maintain a sharp, 0px border-radius.
- Do not use technical jargon; keep vocabulary simple and accessible to a broad audience, as indicated by the high accessibility score.

*Source — inferred*

## Voice

### Tone (1–10 scale)

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

### Copywriting style

- Avg. sentence length — 6 words
- Vocabulary — simple
- Jargon — none
- CTA style — product category and benefit-oriented

### Sample copy

> Handmade organic skin care honoring our bodies and the Earth.

> Quench your skin's thirst with our replenishing oil

> Skincare for pregnancy, postpartum, babies & kids

> REUSABLE - COMPOSTABLE - RECYCLABLE

> Subscribe to our Newsletter for 10% off your first order

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/circularlivingco.com) | 100% |
| favicon | — | png | [link](brands/circularlivingco.com/logo-0.png) | 95% |
| primary | — | png | [link](brands/circularlivingco.com/logo-1.png) | 85% |

## Sources

- Official brand guidelines — https://www.canva.com/docs/media-kits/
- Live brand page — https://extractvibe.com/brand/circularlivingco.com
- Raw JSON — https://extractvibe.com/api/brand/circularlivingco.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/circularlivingco.com/design.md
- Extracted — 2026-11-03T17:42:23.977Z
- Generator — ExtractVibe vv1
- Quality score — 100/100

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