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.
- Honor the legacy palette and layout as inspiration
- Apply classic design principles (color theory, typography, grids)
- Prioritize readability and professionalism over trendiness
- Keep it simple—this is a consulting firm, not a startup
- Ensure accessibility (WCAG 2.1 AA minimum)
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
- Color contrast ≥ 4.5:1 for normal text, ≥ 3:1 for large text
- All images have alt text
- Heading hierarchy is logical (h1 → h2 → h3, no skips)
- Interactive elements are keyboard accessible
- Focus states are visible
- Skip link to main content
- No reliance on color alone to convey information
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
Accent (Orange)
Used for emphasis, CTAs, and highlights. Legacy value: #CC3300
Neutral (Gray)
Tailwind's default gray scale. Used for text, borders, and backgrounds.
Legacy Color Comparison
Side-by-side comparison with original legacy colors (they should match):
Color Usage Guide
| Element | Color | Notes |
|---|---|---|
| Section headings (h2) | text: primary-700, border: primary-500 | Bottom-ruled, Source Serif 4 |
| Links | primary-600 | Underline on hover |
| Body text | gray-700/800 | System sans-serif |
| Secondary text | gray-600 | |
| Primary buttons | primary-500 | White text |
| Button hover | primary-600 | |
| Borders | gray-200 | |
| Backgrounds | white, 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)
Only The Best Is Good Enough
Subsonic Airfoil Design
Qualifications and Major Contributions
Wind-Tunnel Testing
Eppler Airfoil Design and Analysis Code
Body Scale (System Sans-Serif)
Airfoils Incorporated specializes in airfoil design, analysis, and wind-tunnel testing, including high-lift systems, for wind turbines, fans, and aircraft.
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.
Secondary text for captions, metadata, and navigation labels.
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
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.
Links
This is body text with an inline link that shows the link styling. Links use primary-600 with a permanent underline. Technical references like the Eppler Airfoil Design and Analysis Code use the same treatment.
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
- Section padding:
py-12topy-16(48–64px) - Container max-width:
max-w-6xl(72rem = 1152px) - Card padding:
p-6(24px) - Stack spacing:
space-y-4tospace-y-6 - Inline spacing:
space-x-2tospace-x-4
Responsive Breakpoints
sm: 640pxmd: 768pxlg: 1024pxxl: 1280px
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:
src/css/input.css— Color/font/spacing values (in@theme)src/style-guide.njk— This page (examples and rationale)
Note: This project uses Tailwind CSS v4, which uses CSS-based
configuration. The tailwind.config.js file is not used.