avi.nyc
Overview
← Design System Typography Rules
Content
Project Cards Blog Cards Blog Post Project Description
Components
Forms Buttons Navigation
Reference
Code Typography Font Specimens
← Back to site

Typography System

Our definitive typography assignments combining Windsor, Satoshi, Metropolis, and Courier Prime across all UI contexts.

Typography Rules

The semantic font assignments that define our design language.

Definitive Assignments
Headlines & Headers
Windsor Light
--font-headline
Body & Text
Satoshi Regular
--font-body
Buttons & Labels
METROPOLIS
--font-button, --font-label
Navigation
Metropolis
--font-nav, --font-nav-section
Form Inputs
Metropolis
--font-input
Code
Courier Prime
--font-code

Project Cards

Two card variants: Windsor + Satoshi (editorial) and Satoshi throughout (minimal).

Windsor + Satoshi Recommended
Education Platform

Flatiron School

Built the curriculum and learning platform that helped thousands launch software engineering careers.

Rails EdTech LMS
View Project →
Satoshi Throughout
Education Platform

Flatiron School

Built the curriculum and learning platform that helped thousands launch software engineering careers.

Rails EdTech LMS
View Project →

Compact Project Cards

Windsor + Satoshi (Compact)
Open Source

Learn.co

A learning management system designed for technical education.

View →
Satoshi Throughout (Compact)
Open Source

Learn.co

A learning management system designed for technical education.

View →

Blog Cards

Blog post previews with both typography variants.

Windsor + Satoshi Recommended
Technology Dec 15, 2024

The Future of AI-Assisted Development

How AI is reshaping the way we build software, from intelligent code completion to full-stack generation.

Avi Flombaum
Satoshi Throughout
Technology Dec 15, 2024

The Future of AI-Assisted Development

How AI is reshaping the way we build software, from intelligent code completion to full-stack generation.

Avi Flombaum

Horizontal Blog Cards

Windsor + Satoshi (List View)
Engineering Dec 10, 2024

Building Rails APIs in 2024

Modern approaches to API design with Rails 7.1 and beyond.

Product Dec 5, 2024

Shipping Fast Without Breaking Things

Strategies for maintaining quality while moving quickly.

Blog Post Layout

Full article typography with Windsor headlines and Satoshi body text.

Windsor Headlines + Satoshi Body
Engineering December 15, 2024 8 min read

Building Products That Actually Ship

The difference between ideas that become products and ideas that stay in notebooks comes down to relentless focus on what matters.

Avi Flombaum
Founder, Flatiron School

Great products are not born from feature lists or competitive analysis. They emerge from a deep understanding of the problems people face and a relentless commitment to solving them elegantly.

Start With the Problem

When we built Flatiron School, we did not start by asking what features a coding bootcamp should have. We started by asking: why do so many smart, motivated people struggle to break into software development?

The answer was not a lack of free resources or tutorials. It was the absence of structure, community, and real projects that mirror what professional developers actually do.

"The best interfaces feel inevitable, as if there were no other way to design them."

Cut Ruthlessly

Every feature you add makes everything else harder. It makes your product harder to understand, harder to maintain, and harder to evolve. The right question is not "would this be nice to have?" but "would users quit without this?"

def ship_it
  cut_scope until viable?
  build_smallest_version
  measure_and_iterate
end

This approach applies to code as much as product. The ship_it method above captures the essence: start minimal, measure reality, and iterate based on data.

Project Description

Detailed project pages with both typography variants.

Windsor + Satoshi Recommended
Case Study

Flatiron School

A coding bootcamp and learning platform that transformed thousands of careers through immersive, project-based education.

Role
Founder & Dean
Timeline
2012 - 2020
Outcome
5,000+ Grads

The Challenge

Traditional CS education was not producing job-ready developers, while self-taught paths lacked structure and accountability. We needed to build something that combined the rigor of formal education with the practicality of learning on the job.

Satoshi Throughout
Case Study

Flatiron School

A coding bootcamp and learning platform that transformed thousands of careers through immersive, project-based education.

Role
Founder & Dean
Timeline
2012 - 2020
Outcome
5,000+ Grads

The Challenge

Traditional CS education was not producing job-ready developers, while self-taught paths lacked structure and accountability. We needed to build something that combined the rigor of formal education with the practicality of learning on the job.

Forms

Form elements with Metropolis labels and inputs.

Contact Form

We will never share your email.

Newsletter Signup

Stay Updated

Get notified when I publish new articles on engineering, product, and education.

Buttons

Metropolis uppercase with letter-spacing for all button variants.

Button Variants
Button Sizes

Navigation

Metropolis uppercase for section titles, regular Metropolis for links.

Sidebar Navigation
Foundation
Tokens Typography Layout
Components
Buttons Cards Forms
Top Navigation
avi.nyc
Projects Blog About

Code Typography

Courier Prime for all code elements.

Code Block
class User < ApplicationRecord
  validates :email, presence: true, uniqueness: true
  has_many :projects, dependent: :destroy

  def full_name
    "#{first_name} #{last_name}"
  end
end
Inline Code in Prose

Use the User.find_by(email:) method to look up users by email address. This returns nil if no user is found, unlike find which raises an exception.

Font Specimens

Reference specimens for each font family.

Windsor BT Light (Headlines)
The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Satoshi (Body Text)
Light 300: The quick brown fox jumps over the lazy dog
Regular 400: The quick brown fox jumps over the lazy dog
Medium 500: The quick brown fox jumps over the lazy dog
Bold 700: The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Metropolis (UI Elements)
Regular 400: The quick brown fox jumps over the lazy dog
Medium 500: The quick brown fox jumps over the lazy dog
SemiBold 600: The quick brown fox jumps over the lazy dog
SEMIBOLD 600 UPPERCASE: BUTTONS, LABELS, NAVIGATION SECTIONS

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Courier Prime (Code)
Regular 400: The quick brown fox jumps over the lazy dog
Bold 700: The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 {} [] () <> = + - * / # @ $ % ^ &