JSON Resume Styleguide

Uppercase, letter-spaced labels on a 2px border, as on jsonresume.org. Buttons do things; links go places.

Large headings are light (300), the signature of jsonresume.org; smaller ones step up in weight to stay legible. Level and size are independent.

Body copy at 14px with generous line height, plus muted, strong and uppercase overline styles.

Brand-red underlined links for running text; neutral links for navigation lists and footers.

Inline code for commands, fields and file names; Kbd for keys.

Styles rendered Markdown and other long-form HTML: docs, posts and guides.

Centers content in the 970px site column with 30px gutters (16px on small screens).

Full-width bands in the three jsonresume.org surfaces: white, light gray and brand yellow.

One-dimensional layout with gaps from the spacing scale.

A responsive grid without breakpoints: as many columns as fit the minimum width.

A 1px rule in the default border color.

The "JSON Resume" wordmark in Ubuntu Bold, optionally with the document mark.

The yellow navigation band. Links collapse behind a menu button on small screens.

The title band at the top of inner pages: a light 40px title on light gray.

The centered yellow promo band from the jsonresume.org home page.

A centered teaser column: light title, one or two sentences, one action.

Small, centered, uppercase links.

Label, hint and error for one control. The control inside picks up its id, aria-describedby, aria-invalid and required automatically.

Text inputs in three sizes; lg is the large docs search field.

Multi-line text that resizes vertically.

A styled native select: keyboard, mobile and screen-reader friendly with no extra code.

A square check in ink, with optional indeterminate state and built-in label.

An on/off setting that takes effect immediately.

A highlighted note inside content: tips, changes, warnings and errors.

Short status and category labels.

Determinate progress for uploads, imports and completeness.

Spinners for short waits; skeletons to hold the shape of loading content.

What to show when there is nothing yet, and the next step to take.

Bordered tiles with a 2px radius, as in the jsonresume.org theme gallery.

Data tables with uppercase column labels; scrolls horizontally on narrow screens.

A person’s picture, or their initials when there is none.

A modal for confirmations and short tasks.

A short hint on hover and keyboard focus.

Switch between views of the same content, with a red underline on the active tab.

Collapsible sections for FAQs and long settings.

Where a page sits in the hierarchy.

Vertical navigation for docs and settings, in the jsonresume.org sidebar style.

The labelled code panel from the schema page, with a copy button.