Airfoils Incorporated

Only The Best Is Good Enough

Style Guide

Design tokens and component patterns for airfoils.com. This page is the single source of truth for the site's visual design—both the examples and the rationale behind them.

Design Philosophy

Evolution, not revolution. Dan Somers has had the same website since ~2000. Our goal is to modernize the code and presentation while preserving the site's identity. A visitor familiar with the old site should recognize it instantly, while a designer should approve of the craftsmanship.

Typography Philosophy

The Man and the Work

Dan Somers is a Purdue-educated aeronautical engineer who spent 15 years at NASA Langley Research Center before founding Airfoils Incorporated in 1980. He co-developed the Eppler Airfoil Design and Analysis Code with Richard Eppler of Universität Stuttgart—a tool that allows airfoils to be designed for almost all subcritical applications. He has designed dozens of named airfoil families: the S-series for wind turbines and fans, the NASA NLF series for general aviation, airfoils for cruise missiles, business jets, gyroplanes, sailplanes, and unmanned aerial vehicles. His resume lists him as an "internationally recognized expert in airfoil design, analysis, and testing."

His tagline—Only The Best Is Good Enough—is not marketing. It is a statement of professional identity from someone whose airfoils are spinning on wind turbines and flying on aircraft around the world.

The Audience

Dan's clients are the National Renewable Energy Laboratory, the Naval Air Warfare Center, NASA, and private aerospace companies. His audience is engineers—people who read AIAA Journal papers and NASA Technical Memorandums, who evaluate consultants on technical depth, and who distrust anything that looks like it's trying too hard. They hire Dan because he is one of the best in the world at what he does, and they expect his presentation to reflect that substance.

Why Serif Headings

The world Dan inhabits—NASA technical reports, AIAA conference proceedings, university research publications—is a world of serif type. When his audience sees "Subsonic Airfoil Design" set in a transitional serif, it registers as a journal article title, a technical memorandum, a publication of substance. In a sans-serif, the same words read as a blog post or a product page.

We chose Source Serif 4, a transitional serif designed by Frank Griesshammer at Adobe. Its letterforms are precise without being cold—the subtle contrast in stroke weight and the clean, open counters echo the kind of careful, methodical craft that defines Dan's approach to airfoil design. It is a modern typeface with roots in the tradition of technical publishing. It does not call attention to itself. It simply looks right.

Why Sans-Serif Body

Dan's content is dense technical prose: Reynolds numbers, boundary-layer characteristics, NACA designations, performance percentages. Paragraphs are long and information-rich. For sustained reading of this kind of material on screen, a humanist sans-serif outperforms a serif at body sizes—it handles the mix of acronyms, numerals, and technical abbreviations more cleanly, and it provides better legibility at the smaller sizes where body text lives.

The system font stack also honors the legacy site's use of Arial and Helvetica while delivering modern refinements: San Francisco on macOS, Segoe UI on Windows, Roboto on Android. Zero loading cost. Instant rendering. The body text gets out of the way so the reader can focus on the content—which is, after all, what Dan's clients came for.

Why Monospace for Technical Identifiers

Airfoil designations like S801, NLF(1)-0416, and SM701 are not words—they are identifiers. Setting them in monospace distinguishes them from the surrounding prose instantly, just as they would appear in a data table or a wind-tunnel report. This is how engineers expect to see these designations in documentation.

Why 17px Body Text

The default web body size of 16px was established when screens were lower resolution and reading distances were shorter. Dan's content demands sustained attention—paragraphs explaining boundary-layer development, pressure distributions, and Reynolds-number ranges. At 17px with a 1.7 line height, the text has room to breathe. The slightly larger size and more generous leading reduce eye strain and improve comprehension for the kind of careful, technical reading this content requires.

The Overall Effect

The combination—serif headings, sans body, monospace technical text—creates a site that looks like it belongs to someone who publishes in journals, works with NASA, and conducts wind-tunnel investigations. Not a startup. Not a blog. A serious technical practice with institutional depth, presented with modern craft. Dan should recognize his site. An engineer should trust it. A typographer should approve of it.

Accessibility

Target: WCAG 2.1 Level AA

The Grayscale Test

Automated tools (pa11y-ci) catch structural accessibility issues—missing alt text, heading hierarchy, contrast against backgrounds. They cannot catch perceptual issues like "can you tell this is a link by looking at it?" (WCAG 1.4.1: Use of Color).

The test: For every interactive element, ask: "If I remove all color from this page, can I still identify what's interactive?" If the answer is no, add a non-color affordance (underline, border, icon, shape).

This is why body-text links are underlined by default—not just on hover. The underline is the link affordance. It has been since the beginning of the web, and it's what WCAG expects.

Colors

Rationale: The legacy site used a blue/orange complementary color scheme. We retain this relationship but generate proper tint/shade scales for flexibility. The 500 values match the original colors exactly.

Color values are defined in src/css/input.css using Tailwind v4's @theme syntax.

Primary (Blue)

Used for navigation, headers, buttons, and links. Legacy value: #006699

50
100
200
300
400
500
600
700
800
900

Accent (Orange)

Used for emphasis, CTAs, and highlights. Legacy value: #CC3300

50
100
200
300
400
500
600
700
800
900

Neutral (Gray)

Tailwind's default gray scale. Used for text, borders, and backgrounds.

50
100
200
300
400
500
600
700
800
900

Legacy Color Comparison

Side-by-side comparison with original legacy colors (they should match):

Legacy #006699
primary-500
Legacy #CC3300
accent-500

Color Usage Guide

Element Color Notes
Section headings (h2)text: primary-700, border: primary-500Bottom-ruled, Source Serif 4
Linksprimary-600Underline on hover
Body textgray-700/800System sans-serif
Secondary textgray-600
Primary buttonsprimary-500White text
Button hoverprimary-600
Bordersgray-200
Backgroundswhite, gray-50

Typography

Approach: Serif headings with sans-serif body. This inverts the typical web convention—intentionally. Serif headings evoke technical publishing (NASA TMs, AIAA papers, engineering journals) and carry the institutional gravitas appropriate for an internationally recognized expert. Sans-serif body ensures readability for dense technical prose on screen.

Headings: Source Serif 4 — transitional serif by Frank Griesshammer (Adobe). Loaded from Google Fonts.

Body: ui-sans-serif, system-ui, -apple-system, ... — system font stack for zero load cost and legacy Arial continuity.

Technical: ui-monospace, SFMono-Regular, ... — for airfoil designations, Reynolds numbers, and code.

Body text size: 17px (1.0625rem) with 1.7 line height. Dense technical prose benefits from slightly larger text and more generous leading.

Heading Scale (Source Serif 4)

5xl / Hero

Only The Best Is Good Enough

4xl / H1

Subsonic Airfoil Design

3xl / H2

Qualifications and Major Contributions

2xl / H3

Wind-Tunnel Testing

xl / H4

Eppler Airfoil Design and Analysis Code

Body Scale (System Sans-Serif)

lg / Lead

Airfoils Incorporated specializes in airfoil design, analysis, and wind-tunnel testing, including high-lift systems, for wind turbines, fans, and aircraft.

body (17px) / Body

The cost of the airfoil design is trivial compared to the economic benefits of the new technology. For example, the cost of tailoring an airfoil to a single-engine airplane is less than 0.1 percent of the cost of bringing that airplane to production, yet the new airfoil determines to a large extent the airplane's performance and handling.

sm / Secondary

Secondary text for captions, metadata, and navigation labels.

xs / Fine print

Copyright 2000 Airfoils Incorporated. All rights reserved.

Technical Text (Monospace)

Airfoil designations like S801, NLF(1)-0416, and S829 are set in monospace to distinguish them from surrounding prose.

Numerical data like Reynolds numbers (Re = 3 × 10⁶) and performance figures (+23% AEP) also use monospace for clarity.

Font Weights

Normal (400) Body text — system sans-serif
Semibold (600) Subheadings — Source Serif 4
Bold (700) Major headings — Source Serif 4

Serif / Sans Pairing in Context

Why Use New Airfoils?

Because new airfoils will increase your profits and your customers' profits. The cost of the airfoil design is trivial compared to the economic benefits of the new technology. For wind turbines, the cost of the airfoil design is less than five percent of the annual-energy increase. In other words, the increased energy production will pay for the airfoil design within the turbine's first month of operation.

New airfoils were designed specifically for such machines, that resulted in measured, annual-energy increases of 23–35%, with greatly reduced peak-power variability.

Section Headers

Inspired by the legacy site's blue header bars, but rendered as bottom-ruled headings rather than solid-fill bars. A ruled heading reads as a section break in a technical document—the same convention used in journal articles and NASA reports—while a solid bar with centered white text reads as a UI component (button, nav tab, card header). The heading text sits flush left, aligned with the body text below it.

Economics
Performance

Spacing & Layout

Rationale: Use Tailwind's default spacing scale (0.25rem = 4px increments). CSS Grid for page layout, Flexbox for components. Max content width 72rem (1152px).

Common Patterns

Responsive Breakpoints

Buttons

Cards

Wind Turbines

New airfoils designed for horizontal-axis wind turbines resulted in annual-energy increases of 23 to 35 percent.

Aircraft Design

Custom airfoils for applications from single-engine airplanes to business jets and unmanned aerial vehicles.

Files Reference

When making design changes, update these files:

Note: This project uses Tailwind CSS v4, which uses CSS-based configuration. The tailwind.config.js file is not used.