# Ayda Oz design system

> Ayda Oz design system measured from aydaoz.co: Aspekta font, 9 color hex codes, type scale, spacing and a free DESIGN.md. Light theme with 8px corners.

Canonical page: https://sitepeel.dev/design-md/aydaoz.co/

Ayda Oz’s website (aydaoz.co) uses the Aspekta font on a #F0F0EB background. Measured by Sitepeel on November 5, 2026.

## What font does Ayda Oz use?

Ayda Oz uses Aspekta (weight 400) on aydaoz.co. Page titles are 62px at weight 400 (44px on phones) and body text is 16px. Measured on November 5, 2026.

- Aspekta (weights 400)

## Ayda Oz colors: palette and hex codes

Ayda Oz’s main colors are #F0F0EB (mist) for the background and #0A0A0A (near black) for text. Measured on November 5, 2026.

- #F0F0EB: mist
- #0A0A0A: near black
- #6B6B6B: slate
- #989898: gray
- #FBFBF9: snow
- #ECECE7: mist
- #E5E5E5: mist
- #FFFFFF: white

## What is Ayda Oz built with?

Ayda Oz’s website (aydaoz.co) is built with Cloudflare. Measured on November 5, 2026.

- Hosting & CDN: Cloudflare
- Analytics: Cloudflare Web Analytics

## Questions and answers

### What font does Ayda Oz use?

Ayda Oz’s website uses Aspekta (weight 400). Page titles are 62px at weight 400 (44px on phones) and body text is 16px. Measured on November 5, 2026.

### What are the Ayda Oz colors and hex codes?

On aydaoz.co: #F0F0EB (mist) for the background and #0A0A0A (near black) for text. The color palette above lists all 9 colors with their hex codes and where each one is used.

### What is the Ayda Oz design system?

The design system on this page is aydaoz.co’s, as measured on November 5, 2026: Aspekta type and 8px corners, written down as a DESIGN.md. It is not Ayda Oz’s own documentation.

### What is Ayda Oz built with?

Ayda Oz’s website (aydaoz.co) is built with Cloudflare. The full tech stack Sitepeel found: Cloudflare and Cloudflare Web Analytics. Measured on November 5, 2026.

### What is the Ayda Oz DESIGN.md?

A plain-text file with Ayda Oz’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Ayda Oz’s official design system?

No. Sitepeel measured it from aydaoz.co’s public page on November 5, 2026. It is an independent analysis, not made or approved by Ayda Oz.

### Can I use Ayda Oz’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Ayda Oz’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/aydaoz.co/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Ayda Oz.

## The DESIGN.md file

```markdown
---
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).

```