Chris Nager
Developer and designer in Brooklyn, NY, passionate about performance, accessibility, and design systems
Latest posts
Custom design system MCP
Vibe coding with your design system
Vibe coding
Design engineering
Return to Vim
My GPTs
AI image prompts
CodePen Radio 362: Chris Nager
A chat with Chris Coyier about web accessibility and new CSS features
Time for a change
Zephyr
A deep dive into our design system at Air
Designing today's digital products
Organized, hosted, and spoke at the second Brooklyn Tech Startups event
Lifecycle of an icon
Air's icon creation process, from ideation to implementation (Organized, hosted, and spoke at the first Brooklyn Tech Startups event)
Design system
Typography, icons, and documentation (Air internal company presentation)
Takeaways from F8 2018
Case for a monorepo
When - Chatbot for location recommendations
TechCrunch Disrupt Hackathon 2017 presentation
Stack your classes within template literals
Center and crop images with a single line of CSS
Cheer me up - Fun, custom pages in seconds
TechCrunch Disrupt Hackathon 2015 presentation
Bespoke SVG reference
Analog-style LED clock concept
Simple vertical centering with CSS
NYC Subway Lines reimagined with long shadow design
Time-based media queries
Hue bump with Sass @for control directive
Display icons with custom data-attributes
Circles
Further simplified hexcodes
Box sizing for pseudo elements
Video and audio in CSS
Natural curves
My initials
Touchable textures with CSS - can you feel me?
An Event Apart and a designer’s view of the web
CSS3 ::selection background color trick
Chris Nager 2012 (responsive design)
ChrisNager.com v2 is live
fr.sh
Code-golfed bash script that uses ANSI colors to display the French flag 🇫🇷
CSS-only barcodes
Generate real EAN-13 barcodes with CSS-only visuals.
Snowball
You're a snowball. Collect snow to grow. Avoid lava. (Vibe Jam 2025 entry)
Palegen
Generate a brand palette from a single color.
Reverse a sound
Upload an audio clip and hear it backwards.
Elevator Pitch
GPT that summarizes companies in a single sentence
4-7-8 breathing
Enhance your calm.
Affirmations
You are enough.
hAIku
Write a haiku with AI.
Tiles
Generative typeface
CartaX
One small step for Carta, one giant leap for private markets
Accessible gradients
Find the most accessible gradient determined by the greatest contrast per colorspace. Built in CSS.