EBY MATHEW design system

---
version: alpha
name: EBY MATHEW
description: "Light monochrome interface measured from saint.qzz.io: EB Garamond type with Optima, tonal surfaces and square corners."
colors:
  background: "#FAFAFA"
  surface: "#FAFAFA"
  on-surface: "#09090B"
  on-background: "#09090B"
  on-surface-variant: "#52525B"
  on-surface-muted: "#71717A"
  surface-container-low: "#F1F1F3"
  overlay: "#FAFAFAA6"
  outline: "#E2E2E6"
  outline-variant: "#E2E2E6CC"
  primary: "#09090B"
  on-primary: "#FAFAFA"
typography:
  headline-display:
    fontFamily: EB Garamond
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.06
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: EB Garamond
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.11
  headline-md:
    fontFamily: EB Garamond
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.33
  headline-sm:
    fontFamily: EB Garamond
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.025em
  body-md:
    fontFamily: Optima
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: Optima
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.63
  code:
    fontFamily: JetBrains Mono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.1em
  headline-display-mobile:
    fontFamily: EB Garamond
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.06
    letterSpacing: -0.025em
  headline-lg-mobile:
    fontFamily: EB Garamond
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
rounded:
  none: 0px
spacing:
  xs: 2px
  sm: 8px
  md: 14px
  lg: 24px
  xl: 48px
  gutter: 8px
  section: 80px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.code}"
    rounded: "{rounded.none}"
    padding: 8px 14px
    height: 32px
  button-outline:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface}"
    typography: "{typography.code}"
    rounded: "{rounded.none}"
    padding: 14px 24px
    height: 46px
  button-ghost:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.code}"
    rounded: "{rounded.none}"
    padding: 6px 12px
    height: 32px
  card:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: 0px
  link:
    textColor: "{colors.primary}"
---

# EBY MATHEW Design System

## Overview

EBY MATHEW describes itself as: “ഇവിടെ എന്തും പോകും.” The interface is light, built on **Snow (#FAFAFA)** with **Near Black (#09090B)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **EB Garamond** and **Optima**, with **JetBrains Mono** for code. Headlines run large with tight negative tracking; body text is 16px. Depth comes from soft drop shadows. Corners are square.

Measured from [saint.qzz.io](https://saint.qzz.io/) on November 6, 2026 at 1440×900 and 390×844 from 226 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 10 roles.

- **Snow (#FAFAFA):** Page background, seen 27 times. Token `background`, CSS `--color-bg`.
- **Near Black (#09090B):** Primary text and headings, seen 33 times. Token `on-surface`, CSS `--accent`.
- **Cool Slate (#52525B):** Secondary text, seen 65 times. Token `on-surface-variant`, CSS `--muted`.
- **Cool Slate (#71717A):** Muted text and metadata, seen 14 times. Token `on-surface-muted`, CSS `--subtle`.
- **Mist (#F1F1F3):** Raised areas one step from the page, seen 14 times. Token `surface-container-low`, CSS `--color-surface`.
- **Snow 65% (#FAFAFAA6):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Mist (#E2E2E6):** Borders and dividers, seen 58 times. Token `outline`, CSS `--border`.
- **Mist 80% (#E2E2E6CC):** Secondary dividers, seen 1 time. Token `outline-variant`.
- **Near Black (#09090B):** Primary buttons and calls to action, seen 57 times. Token `primary`, CSS `--accent`.
- **Snow (#FAFAFA):** Text and icons on primary. Token `on-primary`.

## Typography

**EB Garamond**, **Optima** and **JetBrains Mono** (monospace) share the interface. Fallback stack: `EB Garamond, Garamond, Apple Garamond, Baskerville`. Other loaded fonts: Casko.

- **headline-display:** EB Garamond 72px at weight 400, line height 1.06, tracking -0.025em (36px on mobile). Page title (h1).
- **headline-lg:** EB Garamond 36px at weight 400, line height 1.11 (30px on mobile). Section headings (h2).
- **headline-md:** EB Garamond 24px at weight 400, line height 1.33. Sub-section headings.
- **headline-sm:** EB Garamond 20px at weight 600, line height 1.4, tracking -0.025em. Card and feature titles.
- **body-md:** Optima 16px at weight 400, line height 1.5. Body text.
- **body-sm:** Optima 14px at weight 400, line height 1.63. Secondary and small text.
- **code:** JetBrains Mono 12px at weight 400, line height 1.33, tracking 0.1em, uppercase. Code and technical values.

## Layout

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

- **Scale:** xs 2px, sm 8px, md 14px, lg 24px, xl 48px.
- **Sections:** 80px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.

## Elevation & Depth

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

- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- `rgb(9, 9, 11) 0px 0px 8px 0px, rgb(9, 9, 11) 0px 0px 16px 0px`

## Shapes

Corners are square. Measured radii, most used first:

- **none (0px):** measured.

## Components

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

- **button-primary (“01INDEX”):** #09090B fill, #FAFAFA text, 12px/600, padding 8px 14px, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`.
- **button-outline (“READ JOURNAL”):** #F1F1F3 fill, #09090B text, 12px/400, padding 14px 24px, border 1px solid #E2E2E6.
- **button-ghost (“LIGHT”):** transparent fill, #52525B text, 12px/400, padding 6px 12px, border 1px solid #E2E2E6.
- **card:** #F1F1F3 fill, #09090B text, 16px/400, padding 0px, border 1px solid #E2E2E6.
- **link:** transparent fill, #09090B text, padding 0px.

## Do's and Don'ts

- Do use #FAFAFA for the page and lift surfaces in small steps: #F1F1F3.
- Do keep text in 3 levels: #09090B, #52525B, #71717A.
- Do let contrast carry emphasis; primary actions use #09090B on #FAFAFA.
- Do set headlines in EB Garamond with tight tracking (-0.025em).
- Do reuse the measured spacing steps (8px, 14px, 24px).
- Don't introduce new font families beyond EB Garamond, Optima and JetBrains Mono.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.3s.

## Motion

Interface transitions are quick: 0.15s, 0.3s. Longer ambient animations run 2s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `cubic-bezier(0.4, 0, 0.6, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

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