ozankaraali.com Design System
1. Atmosphere & Identity
A dark, personal working notebook rather than a polished product launch. The site should feel precise enough for research and software, but leave room for music, opinion, and odd experiments. Its signature is the contrast between one expressive name gradient, restrained typography, and the unfiltered color of real artifacts from Ozan’s work.
2. Color
Palette
| Role |
Token |
Value |
Usage |
| Surface / primary |
--surface-primary |
#0c1014 |
Page background |
| Surface / secondary |
--surface-secondary |
#161a1f |
Code and quiet inset surfaces |
| Surface / image |
--surface-image |
#11161b |
Media fallback background |
| Text / primary |
--text |
#f5f5f7 |
Headings and body copy |
| Text / secondary |
--text-muted |
#b0b0b6 |
Descriptions and metadata |
| Text / tertiary |
--text-faint |
#85868e |
Secondary metadata and separators |
| Border / default |
--border |
#3a414a |
Editorial rules and media edges |
| Accent / primary |
--link |
#2997ff |
Links, focus, and the single supporting accent |
| Accent / hover |
--link-hover |
#66b5ff |
Interactive hover state |
| Accent / soft |
--accent-soft |
rgba(41, 151, 255, 0.3) |
Selection and link underline |
| Hero ramp / start |
--hero-blue |
#2997ff |
Name gradient only |
| Hero ramp / middle |
--hero-purple |
#bf5af2 |
Name gradient only |
| Hero ramp / end |
--hero-pink |
#ff375f |
Name gradient only |
Rules
- The rainbow belongs to the name, not to every section.
- Body headings are white. Blue is reserved for links, focus, and small factual markers.
- Surfaces remain in one cool charcoal family. No decorative card colors.
- New colors must be added here before use.
3. Typography
Scale
| Level |
Size |
Weight |
Line height |
Tracking |
Usage |
| Display |
clamp(3.5rem, 10vw, 7.5rem) |
700 |
1 |
-0.04em |
Homepage name |
| H1 |
clamp(2.5rem, 6vw, 4.5rem) |
700 |
1.04 |
-0.035em |
Editorial statement |
| H2 |
clamp(2rem, 4vw, 3rem) |
700 |
1.08 |
-0.03em |
Major homepage modules |
| H3 |
1.25rem |
600 |
1.3 |
-0.01em |
Project and article titles |
| Lead |
clamp(1.25rem, 2.5vw, 1.5rem) |
400 |
1.45 |
-0.01em |
Hero description |
| Body |
1.0625rem |
400 |
1.6 |
0 |
Default content |
| Small |
0.9375rem |
400 |
1.5 |
0 |
Supporting copy |
| Metadata |
0.8125rem |
400 |
1.5 |
0 |
Dates, tags, captions |
| Label |
0.75rem |
600 |
1.4 |
0.08em |
Sparse uppercase indexes |
Font stack
- Primary:
-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif
- Mono:
"SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace
Rules
- Keep the existing system stack; it is part of the site’s identity.
- Use uppercase labels only as navigational indexes, never as the start of every section.
- Keep body measures near 60–65 characters and use balanced wrapping on display copy.
4. Spacing & Layout
Base unit
All spacing intent derives from 4px.
| Token |
Value |
Usage |
--space-1 |
0.25rem |
Tight inline spacing |
--space-2 |
0.5rem |
Metadata clusters |
--space-3 |
0.75rem |
Compact gaps |
--space-4 |
1rem |
Default small gap |
--space-5 |
1.25rem |
Text groups |
--space-6 |
1.5rem |
Standard gutter |
--space-8 |
2rem |
Module interior |
--space-10 |
2.5rem |
Major text separation |
--space-12 |
3rem |
Section groups |
--space-16 |
4rem |
Mobile section gap |
--space-20 |
5rem |
Footer and major breaks |
--space-24 |
6rem |
Desktop section rhythm |
Grid
- Maximum homepage width:
72rem.
- Reading width:
45rem.
- Desktop: 12 conceptual columns with 7/5 research, 8/4 projects, 6/6 music, and 4/8 writing splits.
- Mobile: one readable column with
1.5rem gutters.
- Breakpoints: 640px and 900px.
Rules
- Sections should not repeat the same alignment or content anatomy.
- Evidence comes before decoration: images, repository names, post titles, dates, and concrete outcomes.
- Resume and Now are supporting navigation, not full-screen marketing sections.
5. Components
Hero
- Structure: name, specific two-sentence introduction, compact primary links. No identity-label shorthand above the name.
- Spacing:
--space-4, --space-6, --space-10.
- States: links have default, hover, active, and focus-visible states.
- Accessibility: one page-level
h1; links remain visible without color alone.
- Motion: no perpetual decorative animation. The scroll cue is a static text link.
- Layout: left-aligned stack inside the homepage grid.
Editorial feature
- Structure: optional factual eyebrow, heading, concrete description, supporting metadata/link, one meaningful image or muted video.
- Variants: research feature and music feature; image placement alternates.
- Spacing:
--space-5, --space-8, --space-12.
- States: linked image/title gains a subtle opacity or color shift on hover and a visible focus outline; looping video has explicit Play/Pause states.
- Accessibility: meaningful alt text, explicit media dimensions, semantic heading order, and a keyboard-accessible 44px minimum video control with a dynamic label.
- Motion: research video may loop silently when motion is allowed; image hover uses opacity/transform only; no generic scroll reveal.
- Layout: asymmetric two-column grid collapsing to one column.
Evidence list
- Structure: section heading followed by rows containing title, factual description, metadata, and link target.
- Variants: repositories and writing.
- Spacing:
--space-4, --space-5, --space-8.
- States: each linked row has hover, active, and focus-visible feedback.
- Accessibility: row links have descriptive names; metadata is supplementary text.
- Motion: short color/transform transition on interactive rows only.
- Layout: bordered vertical list, not cards.
Utility rail
- Structure: candid personal artifact, short Now note, resume link, About link, and location/status context.
- Spacing:
--space-4, --space-6.
- States: standard link states.
- Accessibility: semantic aside with heading.
- Motion: none beyond link feedback.
- Layout: compact sidebar on desktop, full-width block on mobile.
- Structure: social links followed by the domain collection.
- Spacing:
--space-4, --space-6, --space-20.
- States: hover and focus-visible states on links.
- Accessibility: wrapping content, readable contrast, no horizontal overflow.
- Motion: standard link transition.
- Layout: centered wrapping cluster.
6. Motion & Interaction
| Type |
Duration |
Easing |
Usage |
| Micro |
120ms |
ease-out |
Active press |
| Standard |
--duration-standard (220ms) |
ease |
Link, row, and image hover |
| Emphasis |
500ms |
cubic-bezier(0.16, 1, 0.3, 1) |
Hero entrance only, if retained |
- Motion communicates interaction. Generic fade-up-on-scroll is not part of the homepage system.
- Animate only
transform, opacity, and color.
- Every interactive element gets a visible
:focus-visible state.
prefers-reduced-motion: reduce removes non-essential transitions, smooth scrolling, and autoplay video.
7. Depth & Surface
Strategy: borders plus tonal shift.
- Editorial rules use
1px solid var(--border).
- Media can use the secondary/image surface as a fallback and a thin border for definition.
- No floating rounded-card system and no generic box shadows.
- Images keep modest corner treatment; lists remain flat and structural.
8. Accessibility Constraints & Accepted Debt
Constraints
- Target WCAG 2.2 AA: 4.5:1 body contrast and 3:1 large-text/UI contrast.
- Full keyboard reachability and clear focus-visible treatment on every link.
- Respect reduced-motion preferences.
- Meaningful images require descriptive alt text and intrinsic dimensions.
- At 375px, primary content must reflow to one column without horizontal scrolling.
Accepted debt
| Item |
Location |
Why accepted |
Owner / Exit |
| Legacy raw visual values outside the homepage system |
Existing blog/page styles in style.scss |
This pass targets the homepage and must not silently redesign the rest of the site |
Consolidate during a dedicated site-wide design-system pass |