# bedes.qui.gg — Design System Reference

## 1. Visual Theme & Atmosphere

bedes.qui.gg is a personal site that makes a deliberate and rare choice: an entirely serif typographic system. Where most developer portfolios reach for Inter or a geometric grotesque, this site sets IBM Plex Serif as its sole typeface — every selector from `body` to `button` uses it. The result is warm, literary, and unhurried, closer to an online essay or personal journal than a portfolio. The colour system is warm parchment-like neutrals — off-whites with a subtle yellow-brown temperature. There are no shadows, no gradients, no border radius variation (a single `4px`). The design philosophy here is restraint through editorial confidence: good typography does the work, decoration is absent by design. Built with Tailwind CSS.

## 2. Color Palette & Roles

| Role | Value | Usage |
|------|-------|-------|
| Page canvas | `rgb(253, 253, 252)` | Near-white with warm undertone |
| White surface | `rgb(255, 255, 255)` | Elevated cards (`bg-gray-00`) |
| Body text | `rgb(99, 99, 94)` | Default text — warm grey |
| Heading text | `rgb(33, 32, 28)` | H1, hover states — deep warm black |
| Warm border tint | `rgba(32, 16, 0, 0.063)` | Subtle warm-tinted dividers |
| Subtle fill | `rgba(37, 37, 0, 0.027)` | Near-invisible section backgrounds |
| Focus ring | `rgb(0, 144, 255)` | System blue inset focus ring |

The palette is warm-neutral — every value carries a slight yellow-brown temperature rather than true grey. The two text tones (`#63635e` body, `#21201c` heading) create a gentle, non-harsh reading contrast. The system has no chromatic accents; the only saturated colour is the browser's focus ring.

## 3. Typography Rules

**Sole typeface:** IBM Plex Serif — a humanist serif with high legibility at body sizes and genuine character at display sizes. Fallback: `Georgia, "Times New Roman", serif`.

**No weight variation beyond two values:** 400 (Regular) for body, paragraphs, headings (h1, h2), links, and buttons; 700 (Bold) only for h3.

| Level | Size | Weight | Line Height | Tracking |
|-------|------|--------|-------------|----------|
| Display / paragraphs | 24px | 400 | 32px | normal |
| H1 | 24px | 400 | 32px | normal |
| H2, body, links, buttons | 16px | 400 | 24px | normal |
| H3 | 16px | 700 | 24px | normal |

The near-flat hierarchy (h1 and paragraphs share 24px/400) suggests that visual structure comes from spacing and placement rather than type weight or size shifts. No letter-spacing manipulation — IBM Plex Serif is trusted to handle its own optical spacing.

## 4. Component Stylings

**Buttons:** No background fill, IBM Plex Serif, body-sized text in warm grey (`#63635e`). On hover, text darkens to `#21201c`. On focus, an inset ring in `rgb(0, 144, 255)` at 2px appears — the only chromatic moment in the system.

**Links:** Same treatment as buttons — transparent background, serif text, hover brightens to deep warm black.

**Cards:** White surface (`rgb(255,255,255)`) against the near-white canvas creates a minimal lift. `4px` border-radius is the only rounding in the system.

**Borders:** Warm-tinted at very low opacity (`rgba(32,16,0,0.063)`) — barely perceptible dividers that add structure without weight.

**Shadows:** None. Zero shadows in the entire system.

## 5. Layout Principles

Section horizontal padding is `64px`. Footer uses a negative horizontal margin (`-16px`) to allow full-bleed edge-to-edge treatments. No detected breakpoints — this may be a deliberately minimal responsive setup, or breakpoints exist in Tailwind's config rather than inline styles. The single `4px` border radius and absence of a multi-step spacing scale points to a hand-authored, opinionated layout rather than a design system grid.

## 6. Depth & Elevation

No shadows. No blur effects. Depth is achieved solely through the two-tone warm-neutral colour relationship: `rgb(253,253,252)` canvas vs `rgb(255,255,255)` card. The difference is subtle enough to feel paper-like rather than digital. The warm-tinted border tint at 6.3% opacity traces edges without casting weight. This is a deliberately flat, print-inspired elevation system.

## 7. Do's and Don'ts

**Do:**
- Use IBM Plex Serif for every text element — the mono-typeface system is the identity
- Let warm grey (`#63635e`) be the default text colour; reserve deep black (`#21201c`) for headings and hover states
- Keep border radius to 4px only — no pill shapes, no circular avatars
- Use focus rings as the only chromatic moment in the page
- Trust whitespace and line-height to create reading rhythm — avoid decorative dividers

**Don't:**
- Introduce a sans-serif typeface — even for UI chrome or metadata
- Add shadows or elevation layers — the flat paper aesthetic is intentional
- Use letter-spacing manipulation — IBM Plex Serif sets its own spacing
- Introduce colours beyond the warm neutral palette — no accent hues
- Add more than two type weights — Regular and Bold are the full range

## 8. Responsive Behavior

No media query breakpoints were detected in the extracted CSS. Either the site is a fixed-layout personal page, or all responsive behaviour is handled via Tailwind utility classes at build time (not captured in computed styles). Section padding (`64px`) may not collapse on mobile — consider overriding for small screens if adapting this system.

## 9. Agent Prompt Guide

> "Design in the style of bedes.qui.gg: warm parchment canvas (`rgb(253,253,252)`), IBM Plex Serif as the sole typeface for every text element. Body text in warm grey (`#63635e`), headings in deep warm black (`#21201c`). No shadows, no gradients, no rounded shapes beyond 4px. Flat, print-like elevation through subtle warm-tinted borders. Let typographic rhythm and whitespace create all structure. No accent colours — the focus ring blue is the only chromatic moment."

---

*Generated by Sparkbites — extracted from live CSS analysis*