Index

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/fiddle.digital -->
<!-- Extracted: 2026-09-25T06:57:38.357Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "Index"
description: "Fiddle.Digital — Index presents a professional web presence."
colors:
  primary: "#ded4e6"
  tertiary: "#f4ff1e"
  neutral: "#ff4f36"
  surface: "#e6dfe4"
  on-surface: "#101214"
  on-surface-secondary: "#ff4f36"
  border: "#c8c2cf"
  link: "#101214"
  surface-dark: "#101214"
typography:
  display-lg:
    fontFamily: "KHTeka"
    fontSize: "20px"
    fontWeight: "400"
    lineHeight: "24px"
  headline-lg:
    fontFamily: "KHTeka"
    fontSize: "133.92px"
    fontWeight: "400"
    lineHeight: "144.67px"
    letterSpacing: "-2.6784px"
  headline-md:
    fontFamily: "KHTeka"
    fontSize: "63.1467px"
    fontWeight: "400"
    lineHeight: "68.2155px"
    letterSpacing: "-1.26293px"
  body-md:
    fontFamily: "KHTeka"
    fontSize: "20px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  md: "6px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#ded4e6"
    textColor: "#101214"
    rounded: "6px"
    padding: "12px 36px"
    fontSize: "14px"
    fontWeight: "400"
    borderColor: "#101214"
---

# Index — Design System

## Overview

Fiddle.Digital — Index presents a professional web presence.

Key characteristics: professional.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The palette draws on 12 distinct colors observed across the site, organized into semantic roles below.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#ded4e6` | Gainsboro |
| accent / tertiary | `#f4ff1e` | Yellow |
| surface | `#e6dfe4` | Gainsboro |
| background | `#ffffff` | White |
| text | `#101214` | Near-Black |
| secondary text | `#ff4f36` | Tomato |
| border | `#c8c2cf` | Silver |
| link | `#101214` | Near-Black |
| muted | `#ff4f36` | Tomato |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#101214` | Near-Black |
| background | `#101214` | Near-Black |

## Typography

Type is set in KHTeka, KHTeka, KHTekaMono, with hierarchy expressed through size and weight contrast rather than family-switching.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| KHTeka | body | self-hosted | 400 |
| KHTeka | heading | self-hosted | 400 |
| KHTekaMono | body | self-hosted | 400 |
| Manrope | body | google-fonts | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | KHTeka | 20px | 400 | 24px | — |
| Heading 2 | KHTeka | 133.92px | 400 | 144.67px | -2.6784px |
| Heading 3 | KHTeka | 63.1467px | 400 | 68.2155px | -1.26293px |
| Body | KHTeka | 20px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Shapes

Border-radius scale:

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

## Components

### Buttons

**Secondary**

- Background — `#ded4e6`
- Text — `#101214`
- Radius — `6px`
- Padding — `12px 36px`
- Font size — `14px`
- Font weight — `400`
- Border — ` solid #101214`
- Sample copy — "Accept all"

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

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

## Sources

- Official brand guidelines — https://fiddle.digital/brand
- Live brand page — https://extractvibe.com/brand/fiddle.digital
- Raw JSON — https://extractvibe.com/api/brand/fiddle.digital
- DESIGN.md (this file) — https://extractvibe.com/api/brand/fiddle.digital/design.md
- Extracted — 2026-09-25T06:57:38.357Z
- Generator — ExtractVibe vv1
- Quality score — 65/100

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