Ayda Oz design system

---
version: alpha
name: Ayda Oz
description: "Light monochrome interface measured from aydaoz.co: Aspekta type, tonal surfaces and pill-shaped controls."
colors:
  background: "#F0F0EB"
  surface: "#F0F0EB"
  on-surface: "#0A0A0A"
  on-background: "#0A0A0A"
  on-surface-variant: "#6B6B6B"
  on-surface-muted: "#989898"
  surface-container-low: "#FBFBF9"
  outline: "#ECECE7"
  outline-variant: "#E5E5E5"
  primary: "#0A0A0A"
  on-primary: "#FFFFFF"
typography:
  headline-display:
    fontFamily: Aspekta
    fontSize: 62px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.035em
  body-md:
    fontFamily: Aspekta
    fontSize: 16px
    fontWeight: 400
  body-lg:
    fontFamily: Aspekta
    fontSize: 25px
    fontWeight: 400
    lineHeight: 1.41
    letterSpacing: -0.005em
  body-sm:
    fontFamily: Aspekta
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.29
    letterSpacing: -0.01em
  caption:
    fontFamily: Aspekta
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.23
    letterSpacing: -0.015em
  headline-display-mobile:
    fontFamily: Aspekta
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.09
    letterSpacing: -0.034em
rounded:
  sm: 4px
  md: 8px
  full: 9999px
spacing:
  sm: 8px
  md: 14px
  lg: 24px
  xl: 37px
  gutter: 24px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 0px
    height: 32px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: 0px
    padding: 37px 24px 37px 18px
  link:
    textColor: "{colors.primary}"
---

# Ayda Oz Design System

## Overview

Ayda Oz describes itself as: “Hi! this is Ayda, design engineer. A zero-to-one builder at heart, a cheerful generalist design lead who's shipped through it all.” The interface is light, built on **Mist (#F0F0EB)** with **Near Black (#0A0A0A)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Aspekta**. Headlines run large with tight negative tracking; body text is 16px. Depth comes from soft drop shadows. Controls are pill-shaped.

Measured from [aydaoz.co](https://aydaoz.co/) on November 5, 2026 at 1440×900 and 390×844 from 114 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 9 roles, plus gradient stops #4696FF, #C8A0FF, #1E50E6, #A6F7FF.

- **Mist (#F0F0EB):** Page background, seen 26 times. Token `background`, CSS `--surface`.
- **Near Black (#0A0A0A):** Primary text and headings, seen 32 times. Token `on-surface`, CSS `--ink`.
- **Slate (#6B6B6B):** Secondary text, seen 2 times. Token `on-surface-variant`, CSS `--ink-muted`.
- **Gray (#989898):** Muted text and metadata, seen 10 times. Token `on-surface-muted`, CSS `--ink-faint`.
- **Snow (#FBFBF9):** Raised areas one step from the page, seen 3 times. Token `surface-container-low`, CSS `--bg`.
- **Mist (#ECECE7):** Borders and dividers, seen 5 times. Token `outline`, CSS `--line`.
- **Mist (#E5E5E5):** Secondary dividers, seen 2 times. Token `outline-variant`, CSS `--line-strong`.
- **Near Black (#0A0A0A):** Primary buttons and calls to action, seen 36 times. Token `primary`, CSS `--ink`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.

## Typography

**Aspekta** carries the whole interface. Fallback stack: `Aspekta, -apple-system, BlinkMacSystemFont, Helvetica Neue`.

- **headline-display:** Aspekta 62px at weight 400, line height 1.15, tracking -0.035em (44px on mobile). Page title (h1).
- **body-md:** Aspekta 16px at weight 400. Body text.
- **body-lg:** Aspekta 25px at weight 400, line height 1.41, tracking -0.005em. Lead paragraphs.
- **body-sm:** Aspekta 14px at weight 400, line height 1.29, tracking -0.01em. Secondary and small text.
- **caption:** Aspekta 13px at weight 400, line height 1.23, tracking -0.015em. Captions and fine print.

## Layout

Spacing does not follow a strict grid: 31% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** sm 8px, md 14px, lg 24px, xl 37px.
- **Gaps:** 24px is the most common gap in flex and grid layouts.
- **Breakpoints:** 600px, 899px, 900px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(40, 220, 255, 0.55) 0px 0px 6px 0px`

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **md (8px):** 40 elements.
- **full (9999px):** 24 elements.
- **sm (4px):** 12 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Book a call”):** #0A0A0A fill, #FFFFFF text, 13px/400, 4px radius, padding 0px.
- **card:** #F0F0EB fill, #0A0A0A text, 16px/400, padding 37px 24px 37px 18px.
- **link:** transparent fill, #0A0A0A text, padding 0px.

## Do's and Don'ts

- Do use #F0F0EB for the page and lift surfaces in small steps: #FBFBF9.
- Do keep text in 3 levels: #0A0A0A, #6B6B6B, #989898.
- Do let contrast carry emphasis; primary actions use #0A0A0A on #F0F0EB.
- Do set headlines in Aspekta with tight tracking (-0.035em).
- Do reuse the measured spacing steps (8px, 14px, 24px).
- Do make buttons and chips fully rounded (9999px); most other elements use 8px corners.
- Don't use #989898 for body text; it reaches 2.52:1 on #F0F0EB. Keep it for large text or metadata.
- Don't introduce new font families beyond Aspekta.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.2s.

## Motion

Interface transitions are quick: 0.2s, 0.15s. Longer ambient animations run 24s, 18s, 34s.

- **Easing:** `ease`, `linear`, `ease-in-out`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/aydaoz.co/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).