DESIGN.md — borabaloglu.com

1. Visual Theme & Atmosphere

Bora Baloglu’s personal site is a clean, developer-personal-brand portfolio built on modern design tokens. The aesthetic is minimal-neutral: near-white backgrounds, low-chroma surfaces, and a disciplined Inter type scale that feels at home in both a developer’s terminal and a design tool. The atmosphere is “thoughtful engineer who cares about craft” — it is not decorative, but it is clearly considered. The OKLCH color system signals a developer who stays current with CSS standards.

2. Color Palette & Roles

The site uses a full OKLCH token system — a significant design choice that signals precision and perceptual uniformity.

The chart palette spans blue, green, purple, amber, and orange — used for data visualization contexts, not UI chrome.

3. Typography Rules

Typeface: Inter with full Unicode emoji fallbacks — a serious developer-grade font stack.

• Line heights are 1.4–1.75x — generous for reading.
• No tracking adjustments — Inter’s native spacing is trusted.
• Radius token --radius: .5rem (8px) creates consistent softness across all rounded elements.
• What’s absent: no display typeface, no weight extremes (300 or 800+), no decorative text transforms.

4. Component Stylings

• Cards: oklch(97.6%) background with oklch(87.1%) border — barely differentiated from page, like raised paper.
• Inputs: near-white fill, consistent border — form elements don’t call attention to themselves.
• Radius: 8px (.5rem) globally applied — soft but not bubbly.
• Focus ring: neutral mid-gray at 75% lightness — accessible without a color accent.
• Status tokens: danger (red), warning (amber), info (blue), success (green) — a complete semantic set for a technical product.

5. Layout Principles

• Card-based content organization: each entry/project card shares identical surface treatment.
• No detected animations — deliberate static presentation.
• The portfolio likely uses a one-column reading layout on mobile expanding to a centered max-width on desktop.
• Minimal spacing — the OKLCH token system suggests a thoughtful spacing scale underneath.

6. Depth & Elevation

No box shadows detected. Elevation is achieved entirely through OKLCH lightness steps: page background at 98.5%, cards at 97.6%, borders at 87.1%. The perception of layering comes from these small but precise perceptual steps — OKLCH guarantees that steps feel visually consistent regardless of hue, unlike hex-based grays.

7. Do’s and Don’ts

Do:

• Honor the OKLCH token system — don’t substitute hex values.
• Use the semantic status tokens (danger, warning, info, success) for feedback states.
• Keep heading sizes close to body scale — this is a reading-first layout.
• Apply --radius: .5rem globally and consistently.

Don’t:

• Add decorative shadows — the depth model is purely chromatic.
• Use weight above 500 for headings.
• Introduce hue into the neutral surfaces — the near-zero chroma is intentional.
• Mix font sizes dramatically — this scale is deliberately compressed.

8. Responsive Behavior

• The card and token system is naturally responsive — OKLCH-based colors don’t shift perceptually on different displays.
• Small heading sizes (20px max) mean no dramatic typographic rescaling needed across breakpoints.
• 8px border-radius holds at all sizes without looking over-rounded on mobile.
• Input fields are near-white — they need adequate contrast rules for dark-mode and high-contrast contexts.

9. Agent Prompt Guide

Create a personal developer portfolio in the style of borabaloglu.com: OKLCH-based neutral palette (near-white background, near-black text with faint violet cast, light gray borders), Inter typeface at 400–500 weight with a compressed heading scale (20px max), 8px border-radius everywhere, no shadows — elevation through lightness steps only. Include semantic status tokens for interactive feedback.

Generated by Sparkbites — extracted from live CSS analysis