---
version: alpha
name: "OpenStax"
description: "OpenStax uses an accessible nonprofit education system: pale-blue content bands, white resource panels, orange conversion actions, blue text links, Helvetica typography, and direct pathways for higher education, K12, and learning research."
colors:
  bg: "#f7fcff"
  bg-page: "#f1f1f1"
  surface: "#ffffff"
  text: "#424242"
  text-muted: "#5e6162"
  brand: "#d4450c"
  brand-hover: "#b83a0a"
  link: "#026aa1"
  link-hover: "#01547f"
  border: "#d7d7d7"
  success: "#287b54"
  on-brand: "#ffffff"
typography:
  display:
    fontFamily: "Neue Helvetica W01"
    fontSize: "72px"
    lineHeight: 1.55
    letterSpacing: "-0.025em"
  body:
    fontFamily: "Neue Helvetica W01"
    fontSize: "16px"
    lineHeight: 1.55
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "5px"
  card: "10px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

The page feels like a dependable education service rather than a premium course store. Pale blue bands, white resource modules, and direct copy keep free access central.

## Colors

Orange `#d4450c` is the action and identity color. Blue `#026aa1` is reserved for links and navigation; charcoal carries long-form text on white or pale blue.

## Typography

Use Neue Helvetica or a close neutral sans throughout. Headings are bold and practical, while resource descriptions use generous line height for long educational copy.

## Layout

Organize the homepage around Higher Education, K12, and Learning Research. Keep institutional proof and impact metrics close to these pathways rather than isolating them in decorative cards.

Collapse the resource grid into a single column and keep audience labels before descriptions. Navigation can become a menu, but Order Print, Help, and Log in remain discoverable.

## Elevation & Depth

Prefer borders and alternating section backgrounds to shadows. Resource cards may use a minimal shadow only when white overlaps another light surface.

## Shapes

Use 2-5px corners for controls and resource cards, with 10px reserved for larger callout panels. The visual system is structured rather than soft.

## Components

Audience cards are white, lightly bordered, and use 5px corners. Buttons are orange with white text; secondary discovery paths can be blue text links with visible underlines on hover and focus.

Interactions are short and utilitarian. Links gain underline or darker blue, buttons darken, and menus reveal without large movement.

Keep skip navigation visible on focus, label audience and subject menus accurately, and preserve strong link distinction. Orange buttons need white text and a non-color focus outline.

Use inclusive, concrete language: free textbooks, instructor resources, K12 curriculum, learning research, and savings. State institutional relationships and impact numbers directly.

The primary system is light because it supports textbook-like reading. A dark reading mode should apply to long-form resources without changing the orange and blue identity roles.

OpenStax sits between an academic publisher and a public digital utility. Its restrained geometry and practical hierarchy keep the nonprofit mission more prominent than visual novelty.

## Do's and Don'ts

Do prioritize audiences, resources, accessibility, and impact. Do not hide free access behind vague marketing, over-round cards, or use decorative motion in core learning paths.

Create an OpenStax-style education homepage with pale-blue full-width bands, bold Helvetica headings, white audience resource panels, orange primary buttons, blue accessible links, clear Higher Education and K12 pathways, and visible nonprofit impact metrics.