Veysel Aksin

Overview

Veysel Aksin's portfolio embodies **Minimalist Precision**, a design philosophy that prioritizes technical clarity and professional credibility through extreme restraint. The brand serves backend engineers and systems architects who value substance over decoration—the UI is a transparent window into expertise, not a showcase. The aesthetic is deliberately austere: near-black backgrounds (rgb(10, 10, 11)), high-contrast typography (rgb(237, 237, 236) on dark), and a single vibrant accent (rgb(164, 150, 251) / #a496fb) reserved exclusively for interactive moments and calls-to-action. This creates an almost monastic visual environment where every pixel earns its place.

The voice is direct, technical, and unadorned. Sentences are short and active: "I work primarily on backend systems, distributed architectures, and AI-powered products." No marketing flourish, no hedging. The brand personality is that of a seasoned engineer who lets code and shipped products do the talking—confident without arrogance, accessible without oversimplification. Example: "Software engineer building systems, products, and AI-powered software" reads as a statement of fact, not a pitch.

Colors

The color system is built on a **dark-first, accent-driven** model. The surface stack anchors the entire palette: surface (#0a0a0b) is the true black canvas, with surface-container (#131315) providing subtle elevation for cards and panels, and surface-container-highest (#232327) reserved for the most prominent interactive surfaces. On-surface (#ededec) is a near-white text color that maintains legibility at 16px body weight 400 without causing eye strain on dark backgrounds. On-surface-variant (#8b8b92) is a muted gray used for secondary text, metadata, and disabled states—it sits at ~50% opacity relative to on-surface.

Primary (#a496fb) is the brand's signature accent: a soft lavender-purple that appears on primary CTAs ("Explore my work" button), focus rings (3px rgba(164, 150, 251, 0.1

Typography

The type system uses a single typeface family—Geist (with Geist Mono for code)—applied across all scales with deliberate weight restraint. Display (60px, weight 500) and headline-lg (44px, weight 500) use medium weight to convey authority without heaviness; body-md (16px, weight 400) is the workhorse, set at 24px line-height for comfortable reading. Label-md (14px, weight 500) is used for button text and metadata labels, with 0.01em letter-spacing to maintain crispness at small sizes. The system avoids bold (weight 700) entirely—medium (500) is the maximum weight, reinforcing the minimalist ethos. Line-height is generous (1.5x to 1.625x) to ensure readability on dark backgrounds; apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (label-sm, 12px) when layered over complex bac

Layout

The page uses a **fluid 12-column grid** with a max-width of 1280px (64rem), centered with mx-auto. The hero section spans the full width with 24px horizontal gutters (px-6 in Tailwind), creating a comfortable reading measure of ~65 characters for body text. Vertical rhythm is established through a 4px unit system: spacing-md (24px) separates major sections, spacing-lg (40px) is used between hero and content blocks, and spacing-xl (64px) creates breathing room between distinct page regions. The grid is responsive: on mobile, the layout collapses to a single column with 24px gutters; on tablet (md breakpoint), it expands to 12 columns with 6px gaps. Container max-width is 1280px to prevent line lengths from exceeding ~80 characters at large viewports. White space is aggressive—the hero sect

Elevation & Depth

Depth is conveyed through **subtle shadows and surface-container layering** rather than dramatic drop shadows. The elevation scale is minimal: sm (0 1px 2px rgba(0, 0, 0, 0.12)) for micro-interactions like hover states on links, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.2)) for floating elements like sticky headers. Cards use a 1px solid border at outline-variant (#5a5a62) paired with surface-container (#131315) background; on hover, they transition to surface-container-high (#1a1a1d) and gain the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) over

Shapes

The shape philosophy is **Geometric Minimalism**: sharp corners where precision matters, rounded corners where softness aids usability. Buttons use rounded-full (9999px border-radius) to create pill-shaped CTAs that feel approachable and clickable; this is the only fully rounded element in the system. Cards and containers use rounded-lg (1rem / 16px) for a subtle softness that prevents the design from feeling cold. Input fields use rounded-DEFAULT (0.5rem / 8px) for a more technical appearance. Navigation links and list items use rounded-md (0.75rem / 12px) for hover backgrounds. The rationale

Components

Action Elements Primary buttons (button-primary) use backgroundColor: {colors.primary} (#a496fb), textColor: {colors.on-primary} (#0a0a0b), rounded-full (9999px), padding: 10px 20px, height: 40px, and typography: label-md (14px, weight 500). On hover, they transition to backgroundColor: {colors.primary-fixed-dim} (#6a4fd6) and apply transform: translateY(-2px) over 200ms cubic-bezier(0.4, 0, 0.2, 1). Secondary buttons are transparent with a 1px border at outline-variant (#5a5a62), textColor: on-surface (#ededec), and rounded-DEFAULT (8px); on hover, they gain backgroundColor: surface-container-high (#1a1a1d) and borderColor: outline (#5a5a62). All buttons use transition: all 200ms ease to ensure smooth state changes.

Containers & Surfaces Cards (card component) use backgroundColor

Do's and Don'ts

**Do**

• Do use primary (#a496fb) exclusively for interactive elements—buttons, focus rings, active links—to create a clear visual hierarchy and draw attention to actionable moments.
• Do maintain high contrast between on-surface (#ededec) and surface (#0a0a0b) for body text; aim for a contrast ratio of at least 15:1 to ensure readability on dark backgrounds.
• Do apply generous line-height (1.5x to 1.625x) and letter-spacing (-0.02em to 0.05em depending on scale) to prevent text from feeling cramped on dark backgrounds.
• Do use surface-container (#131315) and surface-container-high (#1a1a1d) to create subtle visual separation between cards and the background; avoid pure black (#000000) for surfaces as it creates excessive contrast.
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all interactive state changes (hover, focus, active) to create a sense of polish and responsiveness.

**Don't**

• Don't use bright or saturated colors other than primary (#a496fb) for interactive elements; secondary and tertiary are for text and backgrounds only.
• Don't apply shadows heavier than lg (0 8px 24px rgba(0, 0, 0, 0.2)) as they will overwhelm the dark background and create visual clutter.
• Don't use rounded-full (9999px) on anything other than buttons; it dilutes the signal and makes the design feel inconsistent.
• Don't set font-weight above 500 (medium); the system is built on medium and regular weights to maintain a restrained, technical aesthetic.
• Don't apply text-shadow or other text effects on body text; reserve text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) only for small labels over complex backgrounds.