Overview
Noir Grid explores density, hierarchy, and pace in long-form digital storytelling.
← BACK TO HOME
Marketing Automation
Top of Funnel Automation
Automating marketing for better sales qualified leads.
Status
Exploration
Timeline
3 weeks
Role
Type System Design
Team
Solo
Problem
Generic typography made important context visually flat and hard to scan.
Goal
Create a typographic system that carries narrative hierarchy with precision.
My Contribution
- •Scale architecture
- •Responsive rhythm
- •Editorial components
Next Steps
- •Publish as reusable editorial design kit.
Process
Audit
Benchmarked readability and hierarchy failures in existing layouts.
Build
Created modular display/body/caption relationships.
Key Features
Kinetic Headline Scale
Headlines adapt shape across breakpoints while retaining identity.
Annotation Layer
Context tags and captions remain visually coherent in dense pages.
Challenges & Solutions
Challenge
Expressive type often breaks on small screens.
Solution
Introduced range-clamped scale rules.
Outcome
Preserved tone without sacrificing readability.
Results
- •Reading-flow tests showed better section recall.
Tech Stack
Frontend
CSS clamp()Tailwind typography
Backend
N/A
Tooling
Type studiesFigma