Batuhan Karasakal

Overview

Batuhan Karasakal's portfolio embodies a 'Refined Minimalism' aesthetic—a design philosophy that prioritizes clarity, restraint, and purposeful typography over decorative flourish. The brand serves design officers and product builders seeking inspiration from real-world agentic AI product work. The visual identity evokes quiet confidence: a clean white canvas, serif headlines that command attention without shouting, and strategic use of a single accent green (#40c463) that appears in the GitHub contribution heatmap—the portfolio's most distinctive visual signature. The UI feels like a designer's notebook: intentional, legible, and built for deep focus.

The brand voice is direct, unpretentious, and grounded in craft. Batuhan speaks in active verbs and concrete outcomes: 'currently building /agentic help desk,' 'Applied Compute intelligence you can trust, own and scale.' There is no marketing hyperbole, no soft adjectives. The tone is that of a senior practitioner explaining their work to peers—precise, confident, and occasionally playful (the heart emoji in 'You can now like my posts here' signals warmth beneath the minimalism). Example sentence in brand voice: 'Ravenna transforms operational chaos into structured, AI-driven workflows—no setup required.'

Colors

The color system operates on a principle of 'monochromatic depth with strategic accent.' The primary color is #424346 (a warm charcoal), used for body text, navigation lines, and the primary CTA button. This near-black is never pure black (#000000), preserving warmth and legibility on white backgrounds. The surface stack ranges from pure white (#ffffff) at the brightest level down through grays (#f7f7f8, #e9ecef, #d8d8dc) for containers and interactive states, creating visual hierarchy through subtle contrast rather than dramatic shifts. The secondary accent is #40c463 (a vibrant, slightly desaturated green), reserved exclusively for the GitHub contribution heatmap and success states—it appears infrequently but memorably, making it the brand's signature color. The tertiary color is #ffea75

Typography

The type system pairs STK Bureau Serif (a custom serif typeface) for headlines with STK Bureau (its sans-serif companion) for body and UI text. This pairing communicates 'designed, not default'—the serif headlines (64px, 400 weight, -0.02em letter-spacing) establish authority and draw the eye, while the sans-serif body (16px, 400 weight) ensures readability and modernity. The display size (64px) is reserved for the hero headline; headline-lg (40px) for section titles; body-md (16px) for standard prose. Letter-spacing is consistently negative on larger sizes (-0.02em to -0.015em) to tighten the visual rhythm, while body text uses 0em spacing for neutral legibility. Line-height scales proportionally: 72px for display (1.125x), 48px for headline-lg (1.2x), 24px for body-md (1.5x). On small la

Layout

The page uses a fluid, centered layout with a max-width of 1540px (calc(100vw - 80px) on desktop), creating breathing room on ultra-wide screens while maintaining focus on content. The grid is 12 columns, though most sections use a single-column flow with generous margins (80px horizontal padding on desktop). The spacing scale is semantic: lg (40px) separates major sections (hero to first project), md (24px) separates cards and subsections, sm (12px) separates inline elements. The hero occupies 100svh (100% of the small viewport height), ensuring it fills the screen on mobile without overflow. Project sections are separated by 360px of margin-bottom, creating dramatic white space that forces the eye to reset between projects. The left-side table of contents (project-toc) is fixed at top: m

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not dramatic contrast. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.08)) for small interactive elements like badges and input fields; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and dropdowns; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and floating panels. The project-toc-tooltip uses md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) with a dark background (#424346) and slight scale transform (scale(0.985) → scale(1)) to create a 'floating' effect. The toast notification (You can now like my posts) uses md shadow plus

Shapes

The shape philosophy is 'Architectural Precision'—sharp corners for structure, full-radius for interaction. Buttons and interactive elements use border-radius: 999px (full pill shape), creating a friendly, clickable affordance. Cards and containers use 12px (lg) or 24px (xl) for project images, softening corners without appearing rounded. Form inputs use 4px (DEFAULT), a subtle rounding that signals 'functional' without distraction. The project-toc-line uses 999px (full radius) to appear as a smooth bar. The project-toc-tooltip uses 8px (md), a mid-ground between sharp and soft. The GitHub hea

Components

Action Elements Buttons use a two-state system: button-primary (backgroundColor: rgba(66, 67, 70, 0.8), color: #ffffff, border-radius: 999px, padding: 10px 12px, fontSize: 15px, fontWeight: 500) for primary CTAs like 'Book a call,' and button-secondary (transparent background, 1px solid border at #d0d0d0, same radius and padding) for secondary actions. On hover, primary buttons transition to button-primary-hover (backgroundColor: {colors.primary-container}, textColor: {colors.on-primary-container}) over 180ms ease. The 'Book a call' button is the most prominent CTA, fixed in the top-right corner, using the primary color at 80% opacity (rgba(66, 67, 70, 0.8)) to signal importance without harshness.

Containers & Surfaces Cards use backgroundColor: rgba(66, 67, 70, 0.92) with white t

Do's and Don'ts

**Do**

• Do use STK Bureau Serif for headlines (h1, h2) and STK Bureau for body text—never mix serif and sans-serif within a single text block.
• Do apply negative letter-spacing (-0.02em to -0.015em) on display and headline sizes to tighten the visual rhythm; body text uses 0em.
• Do reserve the green accent (#40c463) for success states, GitHub heatmaps, and secondary highlights—never use it for primary CTAs or backgrounds.
• Do use full-radius (999px) border-radius exclusively for buttons and interactive pills; use 12px (lg) for cards, 4px (DEFAULT) for inputs.
• Do apply md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to floating elements like tooltips and dropdowns; never exceed lg shadow (0 8px 24px) for non-modal content.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds—use the on-* token pairs (e.g., on-primary: #ffffff on primary: #424346).
• Don't apply rounded corners greater than 24px (xl) to cards or containers; the aesthetic favors precision, not organic softness.
• Don't mix serif and sans-serif fonts in the same visual hierarchy level (e.g., don't use serif for body text or sans-serif for display headlines).
• Don't use more than 3–4 colors in a single view; the palette is intentionally restrained to force intentional design decisions.
• Don't animate transitions faster than 180ms or slower than 620ms; use cubic-bezier(0.16, 1, 0.3, 1) for snappy interactions and cubic-bezier(0.2, 0, 0, 1) for smooth reveals.