---
title: "X — Doruk Profile design system"
variant: extended
source: https://x.com/dorukkavcioglu
captured_at: 2026-10-12
theme: light
industry: media
generator: Design DNA (https://four.wiralomi.com/style/create-video)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# X — Doruk Profile · Design System

> A quiet interface for a lively creator feed

**Theme:** light · **Industry:** media · **Source:** https://x.com/dorukkavcioglu · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Doruk’s X profile uses a restrained white-and-black interface to keep the profile details and post feed in focus. Blue links and verification marks provide small points of emphasis, while vivid orange and varied colors belong to the profile banner and embedded post media.

## North star

Keep the interface neutral and compact so creator identity and post media—not decorative chrome—carry the page.

## Overview

The page follows X’s light interface: a white canvas frames a narrow, centered profile column, while black text and controls establish the strongest contrast. Signal blue (#1d9bf0) is reserved for links and verification accents rather than broad decorative areas. Muted gray text distinguishes metadata and secondary actions; fine gray borders separate the timeline and outlined controls. TwitterChirp keeps headings, profile details, buttons, and post copy visually consistent, with heavier weights reserved for the name and key labels. The profile banner’s orange field is striking in the screenshot, but it belongs to the account’s image rather than the site’s reusable brand palette. Below the profile header, a compact tab row transitions into a vertically stacked post feed. Avatars, embedded images, and video previews add variety within the otherwise quiet, flat interface. Comfortable spacing and rounded controls soften the dense stream without competing with its content.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas, post backgrounds, and the light text on black controls. |
| Ink | `#000000` | `--color-ink` | brand | Primary text, headings, inverse surfaces, and the filled Follow action. |
| Signal Blue | `#1d9bf0` | `--color-signal-blue` | accent | Links and verification accents; use sparingly against the white interface. |
| Quiet Gray | `#666666` | `--color-quiet-gray` | neutral | Muted metadata and secondary text, including profile details and post context. |
| Rule Gray | `#d9d9d9` | `--color-rule-gray` | semantic | Thin separators and the outline around the secondary Mention control. |
| Card Mist | `#ced9de` | `--color-card-mist` | surface | Subtle card boundary tone measured on embedded post content. |
| Pale Slate | `#e4eaec` | `--color-pale-slate` | surface | Occasional light surface tone in measured card and supporting interface details. |
| Slate Link | `#52636f` | `--color-slate-link` | semantic | Secondary link color measured in limited instances; not a dominant interface color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Ink) · `--color-surface-2` → `#ced9de` (Card Mist) · `--color-surface-3` → `#e4eaec` (Pale Slate) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#666666` (Quiet Gray) · `--color-border` → `#d9d9d9` (Rule Gray) · `--color-accent` → `#1d9bf0` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#ced9de` | 14.6:1 | AAA |
| `#000000` | `#e4eaec` | 17.28:1 | AAA |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#666666` | `#000000` | 3.66:1 | AA-large |
| `#666666` | `#ced9de` | 3.99:1 | AA-large |
| `#666666` | `#e4eaec` | 4.72:1 | AA |
| `#1d9bf0` | `#ffffff` | 3:1 | AA-large |
| `#1d9bf0` | `#000000` | 7:1 | AAA |
| `#1d9bf0` | `#ced9de` | 2.09:1 | fail |

### Gradients

- `linear-gradient(to top, rgb(255, 255, 255) 52%, oklab(0.999994 0.0000455678 0.0000200868 / 0.45) 84%, rgba(255, 255, 255, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TwitterChirp | `--font-body` | webfont | 400, 500, 700, 800 | Profile identity, navigation, buttons, metadata, and feed text. | Inter |

- **TwitterChirp:** Sans-serif throughout; regular body copy, heavier profile-name emphasis, and compact labels. Keep casing natural.

### Type scale — Perfect Fourth (ratio ≈ 1.333, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 20px | 800 | 1.2 | -0.01em | — | TwitterChirp | Profile name and prominent identity heading. |
| body | 15px | 400 | 1.33 | 0 | — | TwitterChirp | Post copy, profile description, and primary interface text. |
| caption | 13px | 400 | 1 | 0 | — | TwitterChirp | Compact metadata such as post dates and counts. |
| button | 15px | 400 | 1.33 | 0 | — | TwitterChirp | Follow and other profile action labels. |
| link | 15px | 400 | 1.33 | 0 | — | TwitterChirp | Profile links, post links, and interactive text. |

OpenType features in use: `"ss01"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16 px.
- Section rhythm — · element gap 4px · card padding — · max content width —.

A restrained, centered timeline column sits between broad white margins, with a slim left rail carrying the X mark. The profile banner spans the content column and overlaps visually with the circular avatar and identity block. Profile details, counts, pill-shaped actions, and tabs form a compact header before the vertically stacked feed. Alignment is predominantly left-anchored, with thin horizontal rules dividing navigation and posts. Keep the rhythm consistent and the feed information-dense, while leaving clear separation between entries.

## Shape & elevation

- Radius: button `9999px` · card `16px` · link `7px` · xs `7px` · sm `16px` · md `29px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat, with no measured shadow system. Use thin gray hairlines to define the central column, tabs, and outlined actions instead of adding depth. Layering comes from the avatar overlapping the banner and from media embedded inside feed posts; preserve these clear content boundaries.

## Imagery

The account banner is a saturated orange image, and the circular profile portrait overlaps its lower edge. Treat both as account-specific media, not default brand colors. Feed content mixes text with embedded screenshots, video previews, and colorful product imagery. Keep media within the post column, use rounded framing where shown, and preserve the contrast between expressive content and neutral interface chrome.

## Components

### Profile header

Wide account banner, overlapping circular avatar, verified name, handle, bio, website, join date, and follower counts on the white canvas.

### Profile actions

Side-by-side pill controls: black filled Follow with white text, and white Mention with a thin #d9d9d9 outline.

### Profile tabs

A compact horizontal row for Posts, Replies, Reposts, Media, and Articles, separated from the feed by a fine rule.

### Post entry

Avatar and author metadata lead into left-aligned post copy, with engagement controls and optional embedded media.

### Embedded media card

Post imagery and video previews sit within the feed; measured card borders use #ced9de and a rounded treatment.

### Links and metadata

Use #1d9bf0 for prominent links, muted gray for supporting details, and black for key counts and identity text.

### Measured component styles

- **Primary button** (“Follow”): background #000000 · text #ffffff · radius 9999px · padding 0px 20px · 500 15px TwitterChirp
- **Secondary button** (“Mention”): transparent background · text #000000 · border 1px solid #d9d9d9 · radius 9999px · padding 0px 20px · 500 15px TwitterChirp
- **Link** (“Joined November 2012”): transparent background · text #000000 · radius 7.2px · padding 0px · 400 15px TwitterChirp
- **Card** (“00:04”): background #000000 · text #0f141a · radius 0px · padding 0px · 400 15px TwitterChirp

## Do

- Use white as the dominant canvas.
- Keep primary text and filled actions black.
- Reserve blue for links and verification details.
- Separate feed entries with subtle hairlines.
- Keep profile and post content left-aligned.
- Let account media supply its own color.
- Use rounded pill styling for profile actions.

## Don't

- Do not treat the orange banner as a site-wide brand color.
- Do not add decorative gradients to the interface.
- Do not make muted metadata compete with post text.
- Do not add shadows where flat borders define structure.
- Do not widen the feed into a full-bleed layout.
- Do not use multiple accent colors for interface controls.

## Agent prompt

Build a new creator profile page in the measured X light-interface style. Use Gallery White (#ffffff) as the canvas and Ink (#000000) for primary text and filled actions. Apply Signal Blue (#1d9bf0) sparingly to links and verification details, and use Quiet Gray (#666666) for metadata. Keep the main content as a narrow, centered profile-and-feed column with generous outer whitespace and a slim side rail. Place a wide account-specific banner behind an overlapping circular avatar, then show identity, profile details, counts, pill actions, and a compact tab row. Continue into a vertically stacked, left-aligned feed with fine Rule Gray (#d9d9d9) separators. Keep the interface flat; use embedded media for visual variation rather than decorative chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | Centered profile column with banner, overlapping avatar, details, action pills, tabs, and a vertical post feed. | profile actions, content tabs, scrolling timeline | white canvas, fine dividers, black pill CTA, embedded media |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/create-video