@kartikarora Brand Design System

Overview

The @kartikarora design system establishes the visual, spatial, and interaction language for Kartik Arora’s digital presence across kartikarora.me, technical publications, open-source documentation, and native Android applications.

Design Thesis: Craft over costume. Restraint over decoration. Authority over generic templates.

Kartik Arora is a Staff Android Engineer and Google Developer Expert (GDE) for Android based in Sydney, Australia. The design system rejects generic “AI slop” tropes—such as neon gradients, artificial typewriter animations, circular photo stamps, fake metric counters, and uniform 3-box feature cards—in favor of high-craft editorial clarity, authentic engineering artifacts (real terminal output, architectural deep dives), and rigorous typography.

The Anti-Slop Rule. No component or decorative element may exist without conveying authentic information. If an element exists solely to “look technical” (e.g. decorative telemetry counters, fake binary streams, ornamental step numbers), it must be removed.

Colors

The palette is built on high-contrast neutrals anchored by a single intentional interactive signal: Precision Cobalt.

• Primary Interactive Signal: Precision Cobalt (#0066cc in Light Mode, #40a9ff Electric Cobalt in Dark Mode). Used for primary calls-to-action, active indicators, keyboard focus rings, and link hovers.
• Canvases: Pure White (#ffffff) in Light Mode; Obsidian (#0d1117) in Dark Mode.
• Card Surfaces: Elevated cards use #ffffff on #f6f8fa (Light) and #161b22 on #0d1117 (Dark).
• Sunken Wells & Code Blocks: #eaeef2 (Light) and #090d13 (Dark).
• Ink Contrast: Primary text (#0d1117 / #e6edf3) maintains ≥12:1 contrast against canvas. Muted secondary text (#57606a / #8d96a0) maintains ≥4.5:1 contrast for strict WCAG AAA conformance.
• Hairline Rules: Subtle structural borders (rgba(31, 35, 40, 0.12) in Light, rgba(240, 246, 252, 0.10) in Dark).

The Single Anchor Rule. One accent hue per surface. No chromatic rainbow buttons, no purple-to-blue gradients, and no colored drop shadows. Elevation is achieved through lightness and subtle hairlines.

Typography

Typography pairs a human, legible modern sans-serif with a monospace face reserved strictly for code, technical figures, and data.

• Primary Voice (Display & Body): Albert Sans. A geometric sans-serif with open apertures and high legibility across mobile viewports and editorial reading lengths.
  • Display: clamp(2.5rem, 5.5vw, 4.25rem), 700 weight, letter-spacing: -0.03em, text-wrap: balance.
  • Section Headings: clamp(1.4rem, 2.75vw, 2.0rem), 700 weight, letter-spacing: -0.02em.
  • Body: 1.0rem (16px), line-height: 1.6, max-width: 65ch for prose, text-wrap: pretty.
• Technical Voice (Code, Figures & Data): JetBrains Mono.
  • Used for code snippets, CLI terminal captures, version tags, conference years, and numerical data.
  • Numbers in technical contexts must use font-variant-numeric: tabular-nums.

The Mono As Substance Rule. Monospace is never used as a decorative costume for labels, eyebrows, or regular UI copy. Monospace is reserved exclusively for actual code, terminal commands, data figures, and file paths.

Layout

• Container Widths: Standard content maximum width is 1200px (--max-width); narrow reading container is 800px (--max-width-narrow).
• Spatial Grid: Strict 8-point spatial grid (4px, 8px, 16px, 24px, 32px, 48px, 64px, 96px).
• Rhythm: Generous breathing room between sections (var(--space-3xl)), tight grouping between headings and direct descriptions (var(--space-xs)).
• Hero Stance: Settled editorial layout. The hero speaks directly and authoritatively, leading with Kartik’s role and technical impact, rather than generic typing cursors.

The Asymmetric Work Rule. Projects and technical achievements are given visual structure tailored to their real medium (e.g., CLI tools showcase real terminal syntax; libraries showcase multiplatform architectures), rather than forcing every project into identical 3-column cards.

Elevation & Depth

• Defined Edges over Soft Blur: Surfaces commit to a single depth technique—crisp hairline borders (1px solid var(--border)) on slightly elevated surfaces (var(--card)).
• Shadows: Soft, subtle elevation with positive vertical offset (0 8px 24px var(--shadow)). Zero-offset colored glowing halos are forbidden.
• Glassmorphism: Strictly avoided as an arbitrary card background. Translucent backdrops are permitted solely on the fixed navigation bar (backdrop-filter: blur(12px) with 85% opacity surface tint) to maintain spatial context during scroll.

Shapes

• Controls & Actions: Signature 100px full pill radius (--radius-pill) on buttons, filter chips, and navigation items. This establishes a tactile, friendly interaction affordance.
• Cards & Containers: Moderate 12px radius (--radius-md) for content cards and dialogue surfaces.
• Tags, Inputs & Code Wells: 6px radius (--radius-sm) for inline technical badges, inputs, and code containers.
• No Circular Photo Crops: Avoid 2015-era circular headshot cutouts (border-radius: 50%). Editorial imagery should respect the photograph’s natural aspect ratio or use grounded rectangular framing (12px radius).

Components

1. Buttons (.btn)

• .btn-primary: Precision Cobalt fill (var(--accent)), white text (var(--color-signal-ink)), 100px pill radius, instant focus ring on tab.
• .btn-outline: Hairline border (1px solid var(--border)), transparent background, hover shifts to subtle surface tint.
• Active state: Subtle mechanical press (transform: translateY(1px)). Focus state: Instant outline: 2px solid var(--focus); outline-offset: 3px.

2. Sliding Navigation Tabs (.tabs)

• Pill container with active pill indicator sliding smoothly beneath the selected item using transform: translateX().

3. Conference Talk Index (.talk-row)

• Clean, high-density index format displaying Year, Conference/Event, Talk Title, and quick action links (Slides, Video). Replaces clumsy video preview tiles with a clean, searchable index.

4. Technical Work Showcase (.project-feature)

• Rich project showcase highlighting real technical tooling:
  • CLI commands in native sunken terminal frames.
  • Multiplatform capability badges (Android, iOS, JVM).
  • Direct links to GitHub repositories and live documentation.

Do’s and Don’ts

Do:

• Do anchor designs around Kartik’s authentic identity as a Staff Android Engineer and Google Developer Expert.
• Do use Precision Cobalt as the single purposeful accent signal.
• Do align all spacing and margins to the 8px token scale (tokens/design-tokens.json).
• Do provide instant, accessible :focus-visible rings on all interactive elements.
• Do format code with accessible contrast and tabular numbers.

Don’t (The AI Slop Bans):

• Don’t add typing typewriter text animations (typing-text) with blinking cursors.
• Don’t clip profile photos into circular 160px tokens with thick card borders.
• Don’t add fake telemetry stat cards (“10+ Years”, “15+ Talks”) simply to fill space.
• Don’t use decorative step numbers (“01 / 02 / 03”) unless a sequential tutorial strictly requires it.
• Don’t use generic 3-card equal-sized tile grids for all content.
• Don’t use rainbow gradients or text gradients (background-clip: text).
• Don’t use glassmorphism or backdrop-filter on standard content cards.
• Don’t use monospace fonts on general UI labels, subtitles, or headings.