Fonts in Use

Lato is the core brand font for Westphal Solutions, used across our logo, digital presence, and print media. Our three secondary fonts are used only for specific functions detailed below.

Type scale

Six heading levels, all Lato. Sizes scale with the screen, so each spec lists the desktop size first and the mobile size second.

Weight

Lato ships nine weights. Here is where each one is used.

Body copy

Lato 400 at 16px, with a large and a small variant.

This is a normal paragraph at the default size, used for running text on every page, post, and guide.

This is large text at 20px, used for opening paragraphs.

This is small text, used for captions, specs, and fine print.

This text is bold. This text is italic. This is an inline link. Inline code sits in running text like this: wp_enqueue_style().

Lists

Bulleted lists for items in no particular order, numbered lists for steps that happen in sequence.

• A bulleted item.
• A second one, running long enough to wrap onto a second line so the indent is visible.

1. Upload the file.
2. Set the options.
3. Download the result.

Highlighter

A lime band behind a word or phrase, used to mark the one thing on a page that matters most. It comes in a display size and a body size.

Display highlight

And the body-size band for running text.

Blockquote

Italic at 1.4em with a lime edge and a lime quote mark. The name goes in a span inside the quote.

A quote pulled out of the copy, set large enough to break the page and short enough to read in one pass. Attribution

Code

JetBrains Mono at 14px on charcoal, with a lime edge. Code blocks stay dark in both themes.

function ws_hello() {
    return 'Hello, world';
}

Inline code sits in running text like this: get_stylesheet_directory_uri(), --ws-accent, filemtime().

Brand color

The brand colors and what each one is for.

Roles

Components use these roles rather than the colors directly, so dark mode swaps here and nowhere else.

Status color

Green for something that worked, gold for something to check, red for something that failed. Every pairing clears 4.5 to 1 in both themes.

Wash rows are the color against its own background. Every other row is the color against the page.

Status blocks

Callouts, validation messages, and tool results. The status color sits on the label and the left edge, and the copy stays in normal text color.

Buttons

Every button uses uppercase Lato 700 at 12px with 3px tracking, a 3px radius, and a 1px border. Fills change between light and dark mode, the shape does not.

There is no red button. Delete actions use neutral with a confirmation step.

The switch

Used anywhere a visitor picks one of two options. Light or dark, source or rendered, HTML or text.

The lime thumb slides between the two options. A wide variant handles longer labels.

Form controls

One field component, everywhere. Contact form, tools, document generators, plugin settings. Labels sit above the field and never float, and a placeholder is never the only label a field gets.

Labels and marks

Three small labels with three different jobs. The eyebrow sits above a page title, the section label divides major sections, and the pill marks state. They are not interchangeable.

Eyebrow

Quiet category line above a page title.

Contact

Section label

The loud divider between major sections, with a lime rule that draws in on scroll. This is the workhorse for structuring a long post or guide. Every lime-ruled heading on this page is one.

Pill

Small and high contrast. Use sparingly, since a page with five pills has none. Status variants take the mark color on the matching wash.

Links

Lato 500 with a 2px lime underline. On hover the underline drops out and a lime bar rises behind the text.

A paragraph with an inline link in it, plus a second one, at a normal reading size.

The mark

One single-color SVG that takes the color of whatever it sits in. Every lockup below is the same file on a different background, with the measured contrast ratio underneath.

Primary. Use these by default.

Limited. Large sizes only, never a favicon or a header mark.

Avoid.

Logos are exempt from contrast rules, but we hold to legibility anyway. Lime on white is the one to watch, since it looks fine on a bright screen and disappears everywhere else. Grey on white is fine as a watermark behind other content.

Featured graphic

Three copies of the mark offset on a diagonal in lime, slate, and grey. For large light backgrounds like social headers, featured images, and deck covers. Not a replacement for the mark, so never the site header or a favicon.

Radius

Three values, plus a squared single edge. 3px is the default on almost everything.

Spacing

A 4px base and nine steps. Every gap on the site comes from this scale.

Applied

Everything above, running together the way it would in a post.

This is an H3 header

Running copy at the default size, with an inline link and a bold phrase carrying the emphasis. A paragraph or two of setup before the section gets into specifics.

A subhead at H4

A second-level subhead breaking up a longer section, followed by a short list:

• A first item.
• A second item, long enough to wrap so the indent shows.

Inline code sits in running text like code_example_style(), with a block for anything longer than one line:

function ws_hello() {
    return 'Hello, world';
}

A pull quote sitting between two paragraphs, close to the point it belongs to. Attribution

A closing paragraph back at the default size, ending with the buttons the page was leading toward.