<!-- Generated by ExtractVibe — https://extractvibe.com/brand/seangeng.com -->
<!-- Extracted: 2026-05-30T01:42:56.130Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Sean Geng — learnings, snippets & frontend components"
description: "Sean Geng's brand exudes a refined, technical, and slightly experimental vibe, offering transparent insights into frontend development with a focus on quality and detail. It feels like a meticulously curated workshop, sharing 'the good parts' with a discerning audience."
colors:
  primary: "#0f0f0f"
  tertiary: "#3c83f6"
  neutral: "#8f8f8f"
  surface: "#ffffff"
  surface-dark: "#0a0a0a"
  on-surface-dark: "#f5f5f5"
typography:
  display-lg:
    fontFamily: "Inter"
    fontSize: "48px"
    fontWeight: "600"
    lineHeight: "50.4px"
    letterSpacing: "-1.2px"
  headline-lg:
    fontFamily: "Inter"
    fontSize: "24px"
    fontWeight: "600"
    lineHeight: "32px"
    letterSpacing: "-0.6px"
  headline-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "500"
    lineHeight: "24px"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "8px"
  lg: "12px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#f5f5f5"
    rounded: "8px"
    padding: "0px 20px"
    fontSize: "14px"
    fontWeight: "500"
    borderColor: "#242424"
    borderWidth: "1px"
  button-secondary:
    backgroundColor: "#0f0f0f"
    textColor: "#f5f5f5"
    rounded: "12px"
    padding: "0px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#242424"
    borderWidth: "1px"
---

# Sean Geng — learnings, snippets & frontend components — Design System

## Overview

The Sean Geng brand design establishes a refined and highly technical atmosphere, mirroring the archetypes of The Creator and The Sage. It is meticulously curated, akin to the developer documentation and interfaces of Vercel, Stripe, Linear, and Figma. This design system prioritizes clarity, precision, and a transparent approach to frontend development insights. It is engineered to feel like a high-quality, well-organized workshop, providing 'the good parts' of technical knowledge to a discerning audience. The aesthetic is intentionally understated, allowing the content itself to be the primary focus.

This design explicitly avoids overt playfulness, excessive ornamentation, or a 'bloggy' aesthetic. It does not employ vibrant, attention-seeking color palettes or highly stylized, decorative typography. The design is not designed to be overtly 'friendly' or 'approachable' in a consumer-facing sense; instead, its approachability stems from its logical structure, clear presentation, and the inherent quality of its technical content. The visual language is direct, functional, and serves to enhance the understanding and consumption of complex technical information.

**Key characteristics:**

- Vibe — technical, curated, experimental, frontend-focused, transparent, meticulous
- Archetypes — The Creator, The Sage
- Comparable to — Vercel, Stripe (developer docs), Linear, Figma (developer resources)
- Design era — contemporary-minimal
- Emotional tone — informative-precise
- Target audience — Frontend developers, software engineers, technical co-founders, and individuals interested in advanced UI/UX implementation and rendering techniques.
- Visual energy — 4/10 (moderate)

## Colors

The color palette is deliberately minimal, centered on a primary black (#0f0f0f) and a surface white (#ffffff). This high-contrast, monochromatic scheme signals technical precision, clarity, and an uncompromising focus on content. It evokes the clean, functional interfaces of professional developer tools and documentation. This starkness ensures readability and emphasizes the meticulous nature of the shared insights, avoiding any visual distractions that would detract from the technical information.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#0f0f0f` | Near-Black |
| accent / tertiary | `#3c83f6` | Dodger Blue |
| background | `#ffffff` | White |
| muted | `#8f8f8f` | Gray |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| background | `#0a0a0a` | Black |
| text | `#f5f5f5` | White Smoke |

## Typography

The type system exclusively employs Inter for all primary text and JetBrains Mono for code snippets and technical elements. Inter, a highly legible and versatile sans-serif, provides a clean, modern foundation for general content, reinforcing the brand's technical and curated nature. JetBrains Mono is specifically chosen for its optimization for code, enhancing readability and developer experience within technical contexts. This dual-font strategy establishes a clear hierarchy and functional distinction between prose and code, communicating precision and a deep understanding of developer needs.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Inter | body | google-fonts | 400, 500 |
| Inter | heading | google-fonts | 500, 600 |
| JetBrains Mono | body | google-fonts | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Inter | 48px | 600 | 50.4px | -1.2px |
| Heading 2 | Inter | 24px | 600 | 32px | -0.6px |
| Heading 3 | Inter | 16px | 500 | 24px | — |
| Body | Inter | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.35) 0px 1px 2px 0px, rgba(60, 131, 246, 0.6) 0px 6px 18px -6px` |

### Gradients

- `radial-gradient(closest-side, rgba(60, 131, 246, 0.25), rgba(0, 0, 0, 0))`
- `linear-gradient(to right, rgba(255, 255, 255, 0.024) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(rgba(255, 255, 255, 0.024) 1px, rgba(0, 0, 0, 0) 1px)`

## Shapes

Border-radius scale:

- `sm` — 8px
- `lg` — 12px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Text — `#f5f5f5`
- Radius — `8px`
- Padding — `0px 20px`
- Font size — `14px`
- Font weight — `500`
- Border — `1px solid #242424`
- Sample copy — "About me"

**Secondary**

- Background — `#0f0f0f`
- Text — `#f5f5f5`
- Radius — `12px`
- Padding — `0px`
- Font size — `16px`
- Font weight — `400`
- Border — `1px solid #242424`
- Sample copy — "Image PixelatornewDrop an image and pixelate it — drawn tiny then scaled back up"

## Do's and Don'ts

### Do

- Utilize Inter font for all body and heading text, with weights 400 and 500 for body, and 500 and 600 for headings. JetBrains Mono should be reserved for code snippets or specific technical body text.
- Maintain a clean, high-contrast color scheme: #0f0f0f (dark text) on #ffffff (light background) for light mode, and #f5f5f5 (light text) on #0a0a0a (dark background) for dark mode.
- Employ #3c83f6 as the primary accent color for interactive elements, links, and highlights, ensuring it stands out against both light and dark backgrounds.
- Apply sentence-case for all headings, avoiding title case or all caps to maintain a measured and accessible tone.
- Design buttons with rounded corners, using 8px for smaller elements (e.g., 'About me') and 12px for larger, more descriptive buttons (e.g., 'Image Pixelator').
- Implement subtle background gradients for visual interest, specifically a radial-gradient(closest-side, rgba(60, 131, 246, 0.25), rgba(0, 0, 0, 0)) for ambient glow effects and linear-gradient(to right, rgba(255, 255, 255, 0.024) 1px, rgba(0, 0, 0, 0) 1px) for subtle vertical line dividers.
- Ensure body text has a line-height of 24px for optimal readability, particularly when using Inter 400 or 500.
- Craft calls to action using direct action verbs and descriptive labels, providing clear expectations of the outcome, such as 'Drop an image and pixelate it'.

### Don't

- Avoid using emojis in any copy or content; the brand maintains a serious and professional demeanor.
- Do not use exclamations; the brand's tone is matter-of-fact and confident without needing excessive emphasis.
- Refrain from using any shadows other than the single, subtle, and transparent shadow found (rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0), implying a preference for flat design or extremely subtle depth).
- Do not deviate from the established border radii of 8px and 12px; avoid sharp corners or overly pill-shaped elements.
- Avoid overly playful or casual language; while accessible, the brand maintains a technical and informative voice.
- Do not introduce additional font families beyond Inter and JetBrains Mono; maintain typographic consistency across all platforms.
- Do not use vibrant or multi-color palettes; stick to the defined primary, accent, and background colors for a cohesive and understated look.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 7/10 | casual |
| Playful ↔ Serious | 6/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 5/10 | balanced |
| Technical ↔ Accessible | 4/10 | technical |

### Copywriting style

- Avg. sentence length — 15 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct action verbs and descriptive labels

### Sample copy

> I sweat the small details in software, and leave the good parts (components, free tools & writeups) out in the open here.

> Drop an image and pixelate it — drawn tiny then scaled back up with smoothing off, so it renders as crisp blocks.

> A graduated blur — stacked backdrop-filter layers, each masked to an overlapping gradient band, so the blur ramps smoothly instead of stepping.

> A canvas grid of pixels that flicker random opacities inside a sine-pulsing circle — a breathing field of static.

> A glowy CTA with orbiting stars, a conic spark sweep, and a 3D star ring built on transform-style: preserve-3d.

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/seangeng.com/logo-1.png) | 74% |

## Sources

- Official brand guidelines — https://www.reddit.com/r/branding/comments/1syquus/are_there_any_standards_to_create_a_brand_style/
- Live brand page — https://extractvibe.com/brand/seangeng.com
- Raw JSON — https://extractvibe.com/api/brand/seangeng.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/seangeng.com/design.md
- Extracted — 2026-05-30T01:42:56.130Z
- Generator — ExtractVibe vv1
- Quality score — 100/100