Skip to content
seangeng.com logo

Sean Geng — learnings, snippets & frontend components

seangeng.com

“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.”

technical
curated
experimental
frontend-focused
transparent
meticulous
developer-centric

Color Palette

Colors

Light Mode

#0f0f0f

primary

#ffffff

background

#8f8f8f

muted

#3c83f6

accent

Dark Mode

#0a0a0a

background

#f5f5f5

text

Typography

Fonts

Inter

body
400
500
google-fonts

ui-sans-serif, system-ui, sans-serif

Inter

heading
500
600
google-fonts

ui-sans-serif, system-ui, sans-serif

JetBrains Mono

body
400
google-fonts

ui-monospace, SFMono-Regular, monospace

body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

Components

Design System

About me
outline
8px
#f5f5f5
Image PixelatornewDrop an image and pixelate it — drawn tiny then scaled back up
secondary
12px
#0f0f0f#f5f5f5
element
box-shadow

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

gradient

radial-gradient(closest-side, rgba(60, 131, 246, 0.25), rgba(0, 0, 0, 0))...

gradient

linear-gradient(to right, rgba(255, 255, 255, 0.024) 1px, rgba(0, 0, 0, 0) 1px),...

Voice & Tone

Personality

Visual Energy

4/10

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.

Comparable Brands

Vercel
Stripe (developer docs)
Linear
Figma (developer resources)

Brand Rules

Dos & 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.

Design Assets

Visual Elements

Sean Geng
png500×500
Sean Geng
png500×500
Image Pixelator preview
png1280×1000
Progressive Blur preview
png1280×900
Dynamic Pixel Grid preview
png1280×900
Liquid Glass Button preview
png1280×900
Galaxy Button preview
png1280×900
Neumorphic Toggle preview
png1280×900

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

Download
DESIGN.md not yet generated for this brand.
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md
Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/seangeng.com \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.

Get started free