UI Skillbook
2

Design systems set in SF Mono

Brands and apps whose DESIGN.md names SF Mono as a typeface, including 1Password, ADP and Affirm. Each file also lists the sizes, weights and colors that go with it, so your coding agent can match the whole style.

108 files, page 1 of 3

Files

1Password

Brands · Inter

Identity and access security with a calm, premium SaaS frame. 1Password's public site uses deep indigo and blue gradients, white surfaces, rounded cards, and a modern sans stack to make security feel approachable and…

ADP

Brands · Inter

Workforce and payroll software design with approachable professionalism and direct conversion focus. ADP’s current site uses a clean HR-tech structure, strong red accents, light neutral surfaces, and high-trust…

Affirm

Brands · Calibre

Buy-now-pay-later fintech with deep blue trust, consumer-retail clarity, and installment-friendly messaging. Affirm's public site uses navy and blue accents, white surfaces, rounded cards, and purchase-focused…

Aiven

Brands · Inter

Open source data infrastructure design with practical cloud clarity, warm orange accents, and production-ready service management surfaces.

Algolia

Brands · Inter

AI search and discovery design with deep navy trust, electric blue action, and fast, relevance-first product structure.

AMD

Brands · AMD Sans

High-performance computing with sharp technical confidence. AMD's current public site combines deep charcoal foundations, bright white sections, signature red accents, angular hardware imagery, and product-forward…

Arm

Brands · Inter

AI-era semiconductor branding with deep compute minimalism, luminous gradients, and efficiency-first storytelling. Arm’s current visual language combines dark navy foundations, bright futuristic highlights, and…

ASUS

Brands · TT Norms Pro

Personal computing with broad innovation energy. ASUS's current public site blends bright white merchandising surfaces, deep blue and black contrast areas, crisp product-family storytelling, and premium device…

Atlassian

Brands · Charlie Display

Work coordination software with sharp enterprise clarity and bright blue structure. Atlassian's public site uses Charlie Display and Charlie Text, with white surfaces, pale blue support backgrounds, deep navy text,…

Autodesk

Brands · Artifakt Legend

Bold industrial-modern brand with black-and-white confidence and high-visibility yellow. Autodesk’s current identity uses Artifakt typography, open whitespace, sharp contrast, and selective color emphasis to make…

Behance

Brands · Adobe Clean

Creative portfolio discovery with Adobe-adjacent polish, white gallery surfaces, and strong project framing. Behance's public site uses a white and light-gray base, dark text, blue Adobe-style action accents, and…

Best Buy

Brands · Human BBY

Electronics retail with strong blue-yellow branding and high-visibility merchandising. Best Buy's public site uses a vivid cobalt blue foundation, bright yellow branding, white content surfaces, and dense retail…

Betterment

Brands · GT America

Digital investment design with calming green identity, trust-forward surfaces, humanist typography, and goal-based financial clarity.

Bloomberg

Brands · Inter

Information-dense media and terminal design with unmistakable black-and-amber identity. Bloomberg combines bold contrast, efficiency-first hierarchy, modern editorial layouts, and a culture of high-signal interface…

Box

Brands · Inter

Enterprise content management with white space, blue trust cues, and AI-era document workflows. Box's public site uses bright white canvases, navy-blue accents, structured product cards, and a calm enterprise tone.

Brave

Brands · Poppins

Privacy browser design with official orange identity, dark neutral contrast, Poppins typography, and protective browsing surfaces.

Brex

Brands · Brex Sans

Intelligent finance for high-speed companies. Brex's current public site pairs deep ink and white surfaces with saturated electric-blue accents, rounded enterprise product cards, AI-forward messaging, and…

Buffer

Brands · Public Sans

Social media management design with warm teal identity, creator-friendly surfaces, clean typography, and calm publishing workflows.

ByteDance

Brands · ProximaNova

Global content platform design with bold red-and-black identity, creator-economy surfaces, dynamic motion, and algorithm-powered UX.

Calendly

Brands · Inter

Scheduling product design with calm blue trust, clean booking flows, and precise availability selection.

Canva

Brands · Canva Sans

Creative-tool design with playful confidence, rainbow-gradient energy, and strong workflow simplification. Canva combines bright brand color, rounded UI, approachable motion, and productivity-first editor structure…

Capital One

Brands · Optimist

National bank design with bold red identity, confident card surfaces, clean Sans typography, and accessible financial clarity.

Character.AI

Brands · At Hauss

Consumer AI entertainment design with conversational surfaces, creator discovery, and a lively blue-led interaction system.

Chime

Brands · Circular

Neobank design with energetic green identity, member-first surfaces, friendly typography, and accessible mobile-first banking.

CircleCI

Brands · Inter

CI/CD platform design with confident black-and-green delivery surfaces, automation-first dashboards, and pipeline clarity.

Cisco

Brands · CiscoSansTT

Infrastructure-led enterprise brand with bright network blue, dark technical gradients, and mobile-first content discipline. Cisco’s current web presence balances futuristic AI-era storytelling with practical,…

Clerk

Brands · Inter

Authentication product design with polished drop-in components, violet developer-brand energy, and secure account-management flows.

ClickUp

Brands · Axiforma

Productivity software with a bright gradient brand, polished dashboards, and all-in-one work platform messaging. ClickUp's public site combines violet, pink, and blue gradients with white cards and dense productivity…

Cloudinary

Brands · Inter

Visual media platform design with official blue foundations, sky-inspired accents, and practical asset workflow clarity.

Confluent

Brands · Inter

Data-streaming platform design with bright coral energy, dark product framing, and concise technical storytelling. Confluent’s current site balances cloud-native momentum with enterprise readability.

Convex

Brands · Inter

Backend platform design with playful technical energy, real-time data clarity, and AI-agent-ready product surfaces.

Costco

Brands · Helvetica Neue

Membership retail with practical red-blue branding and warehouse-scale merchandising. Costco's public site uses white surfaces, brand blue and red, straightforward retail hierarchy, and practical shopping modules.

Coursera

Brands · Source Sans 3

Online learning with marketplace breadth, academic trust, and blue-led clarity. Coursera's public site uses a clean sans system, white and pale-blue surfaces, structured category browsing, and strong Coursera blue…

Craft

Brands · New York

Modern document editor with a clean, minimal aesthetic — white canvas, soft brand blue, and content-first UI.

CrowdStrike

Brands · Inter

Cybersecurity platform design with dark urgency, high-contrast red emphasis, and mission-clear hierarchy. CrowdStrike’s current brand uses black, white, gray, and red with tightly controlled tertiary colors to create…

Dribbble

Brands · Mona Sans

Design discovery with soft pink branding, gallery density, and polished creative-marketplace framing. Dribbble's public site uses white space, dark text, rounded search and filter controls, and a signature pink accent.

Drift

Brands · Inter

Conversational marketing design with bold teal identity, chat-first surfaces, real-time engagement UX, and pipeline-focused messaging.

DuckDuckGo

Brands · Inter

Privacy search and browser design with friendly orange identity, clean utility surfaces, and no-tracking clarity.

eBay

Brands · Market Sans

eBay is a global e-commerce marketplace connecting buyers and sellers worldwide. Founded in 1995, eBay has evolved from an auction-only platform to a comprehensive marketplace featuring fixed-price listings, deals,…

Expedia

Brands · Inter

Travel booking with royal-blue trust signals, search-led layouts, and marketplace clarity. Expedia's public site uses strong blue framing, white cards, rounded search modules, and broad travel category browsing.

Fly.io

Brands · Inter

Edge compute design with terse developer confidence, dark machine surfaces, and globally distributed deployment clarity.

GitBook

Brands · Inter

Knowledge-layer design with polished documentation surfaces, AI-ready content tools, and warm editorial accents.

GoDaddy

Brands · Inter

Small-business website and commerce design with confident black-and-green branding and guided-builder simplicity. GoDaddy’s current visual language mixes bold identity, rounded utility controls, and approachable…

Grammarly

Brands · Styrene A Web

Writing assistance with polished calm and enterprise trust. Grammarly's current public site pairs a bright white canvas with deep forest-ink contrast, saturated mint-green action color, cool gray UI framing, rounded…

Heroku

Brands · Salesforce Sans

App platform design with official purple foundations, cloud-blue support, and developer-friendly deployment workflows.

Home Depot

Brands · Helvetica Neue

Home improvement retail with vivid orange branding and highly practical commerce structure. Home Depot's public site uses strong orange (#F96302), white surfaces, black text, and tool-and-project-oriented shopping…

Hugging Face

Brands · SF Mono

Community-first AI platform design with cheerful yellow accents, open-source utility, and dense but approachable information architecture. Hugging Face combines playful brand signals with practical product surfaces…

Intel

Brands · Intel Clear

Computing and silicon innovation with blue brand authority and clean technology framing. Intel's public site uses white and blue surfaces, a modern sans stack, and broad product storytelling around AI and chips.

Other fonts