Answerable

Most of what people see is the content: data, arguments, steps and evidence. That content should feel calm and precise. It should be easy to scan and should never compete with the message.

The system also has something to say. Its voice comes through in a small number of deliberate statement moments: a huge number, a confident headline or a black quote panel. These moments are bold because everything around them is quiet.

The system is built from two layers that share one typeface, one colour logic and one shape language.

Rule of thumb: use at most one statement moment per screen or slide. If everything shouts, nothing is heard.

Key characteristics

• Pure white (#FFFFFF) is the default background and pure black (#000000) the default text colour.
• A cool neutral scale (#FAFAFA–#18181B) supports fills, secondary text, hover states and separators. It never uses warm greys, beige or cream.
• Four equal accent colours — Coral, Sky Blue, Yellow and Green — are used only for highlights and semantic states. They are rotated so no single accent dominates. They are always paired with black text and always square-cornered.
• Public Sans is used in three weights only:
  • Regular (400) for all body text. This is the default.
  • Bold (700) for subheadings, labels and buttons.
  • Black (900) for main headings and big statements.
• Everything must be readable and clear in all situations: projectors, small screens, bright rooms and print.
• All components are square-cornered. The only exceptions are radio buttons and avatars, which are circular by function.
• Components are defined by fill, space, typography and soft elevation. They never have outlines or perimeter borders.
• Interface separators are 1px neutral lines between rows or groups. Statement dividers are 2–4px black.
• Every interactive element shows a black focus ring on keyboard focus.

Core

• Background (#FFFFFF): the default page, slide and component surface.
• Foreground (#000000): primary text, icons and the default button fill.
• Surface Dark (#000000): tooltips, toasts and statement panels, always with white text.

Neutrals

The neutral scale lets the interface recede. It is cool and slightly blue-grey, never warm.

Muted grey text is for secondary information only. Primary content, headings and anything essential stay pure black.

Accent colours

The four accents have equal status. None is the primary or default.

Accent rotation

• Do not default to Coral. Coral should appear no more often than any other accent.
• Vary by section. Across a presentation or multi-section page, give each section or slide its own accent and cycle through all four. A sensible default order is Sky Blue → Yellow → Green → Coral.
• One accent per slide or local area. Within a single slide or section, use one accent for highlights so the area stays coherent.
• Charts are the exception. All four may be used together as a series palette.
• Choose by meaning when it exists. If the content is positive, cautionary or informational, Green, Yellow or Sky Blue may be chosen to match. Otherwise follow the rotation.
• Never use a run of the same accent. Three or more consecutive slides or sections with the same accent is a mistake.

Accent rules

• Black text only. All four accents pass WCAG AA with black text. Never set text in an accent colour.
• Square corners always. No rounding on any accent-filled element.
• Small areas only. Use accents for badges, markers, chart data, a highlighted word, a single CTA or a stat highlight. Never use them as page, section, slide or card backgrounds.
• Semantic use inside app interfaces: in functional app screens, Coral means destructive or error, so the primary app action stays black. In presentations and statement contexts, Coral is just one of the four rotating highlights.

Public Sans is the only typeface, and only three weights are used. Weight does the heavy lifting in the hierarchy. Body text is Regular and calm, so the Black moments really land.

• Regular text is never smaller than 14px. Bold labels are never smaller than 12px.
• All text must reach at least 4.5:1 contrast with its background. Prefer pure black.
• On slides, body text is never smaller than body-lg (18px at a 1280×720 canvas); scale proportionally for larger canvases.

Weight roles

No other weights. Never use Thin (100), Extra Light (200), Light (300), Medium (500), Semibold (600) or Extra Bold (800).

Heading hierarchy

Use headings in semantic order. If a page or slide needs a giant headline, apply a statement style (such as statement-xl) to the H1 element. Do not skip levels.

Full scale

Pairing the extremes

The signature typographic move is a Black headline over Regular body text. The contrast in weight does the work, so no colour, box or decoration is needed. Bold sits between them, only for subheadings and functional labels.

Numbers

Use tabular-nums in tables, metrics and anything that updates or aligns in columns. Right-align numeric table columns.

Everything is square. A single radius of 0 applies to every button, input, card, menu, dialog, tab, badge, toast and tooltip. This keeps the family coherent: a square button never sits awkwardly inside a rounded card.

The only exceptions are radio buttons and avatars. They use rounded.full because the circle is part of their meaning. Neither may be accent-filled.

Never use outlines or perimeter borders. No component is drawn by a stroke around its edge. Shape comes from fill, elevation and space.

There are two kinds of line, and both are standalone separators that never enclose anything.

Do not use black statement dividers inside dense interface areas, and do not use faint 1px lines on statement pages.

Focus ring: every interactive element shows 0 0 0 2px #FFFFFF, 0 0 0 4px #000000 on :focus-visible. This is a temporary state indicator required for accessibility, not a border. Never remove it.

• Spacing: 4px base unit. Use the spacing scale only.
• Controls: 32px (sm), 36px (default) and 40px (lg) heights. 48px is reserved for statement-layer CTAs.
• App shell:
  • 56px top nav with a 1px separator beneath and a page title at left. No logo.
  • Optional 256px neutral-50 sidebar.
  • Content area on white or neutral-50.
• Cards on surfaces:
  • On a white page, use card-muted, which has a neutral-100 fill and no shadow.
  • On a neutral-50 shell, use card, which has a white fill and xs shadow.
  • Never place a white card with no shadow on a white page.
• Content width:
  • 1200px maximum for app layouts.
  • 680px maximum for long-form reading.
• Density: interface screens are compact (16–24px gaps). Statement sections and slides are generous (64–96px vertical padding).
• Grid: 12 columns for app layouts. Editorial square-tile grids (3 / 2 / 1 columns) for presentations and statement pages.

Elevation separates floating layers from the page without outlines. Shadows are soft, neutral and always blurred.

Never use a zero-blur or spread-only shadow. That is an outline in disguise.

Statement components (quote panels, highlight panels, hero) are flat. Their contrast comes from solid black and white, not shadow.

These components should feel familiar to anyone who has used a modern app. They are neutral, predictable and quiet.

Buttons

All buttons are square, 36px tall by default and have no outline. Use one Default button per view region. Icons are 16px with an 8px gap from the label.

Form controls

• Input, textarea, select:
  • neutral-100 fill, square, no border, Regular text.
  • Hover deepens the fill to neutral-200.
  • Focus switches to a white fill with the black focus ring.
• Label: 14px Bold, 8px above the field.
• Helper text: 14px Regular in muted-foreground, 6px below the field.
• Errors:
  • Place a small square Coral marker beside the label.
  • Show the error message as black helper text.
  • Never use red or Coral text.
• Checkbox: 16px square. Unchecked is neutral-200. Checked is a black fill with a white check.
• Radio: 16px circle. Unchecked is neutral-200. Checked is a black fill with a white dot.
• Switch: square 36×20 track (neutral-200 off, black on) with a white square thumb.

Surfaces

• Card: white, xs elevation, 24px padding. Bold H3 title with a Regular body-sm description beneath in muted-foreground.
• Card (muted): neutral-100 fill, no shadow. Use on white pages.
• Dialog:
  • White, lg elevation, 50% black overlay, 24px padding, 480px max width.
  • Bold H2 title.
  • Actions right-aligned: Secondary, then Default.
• Dropdown menu / popover:
  • White, md elevation, 4px inner padding.
  • Menu items are 32px tall with a neutral-100 hover.
  • Groups are divided by interface separators.

Navigation

• Top nav: white, 56px, 1px separator beneath. Page title at left (no logo), nav links in Regular (Bold when active), actions at right.
• Sidebar:
  • neutral-50 background.
  • Items are 36px tall, with a neutral-100 hover.
  • The active item has a neutral-200 fill and Bold text.
  • Group labels use the eyebrow style in muted-foreground.
• Tabs:
  • The tab list sits on a neutral-100 fill.
  • The active trigger is white with xs elevation and Bold text.
  • Inactive triggers use Regular muted-foreground text.

Feedback

• Badge: neutral-100 fill or an accent fill, black 12px Bold, square, 4px × 8px padding.
• Alert:
  • neutral-100 fill.
  • An 8px square accent marker sits beside a Bold title, indicating the semantic type.
  • Regular body text.
• Toast: black surface, white Regular text, lg elevation.
• Tooltip: black, white 14px Regular text.
• Skeleton: neutral-100 with a gentle pulse.
• Progress: neutral-100 track with a black indicator.

Data

• Table:
  • Header row in 12px Bold muted-foreground.
  • Cells in 14px Regular black.
  • 1px neutral-200 row separators.
  • neutral-50 row hover and neutral-100 selected rows.
  • Tabular, right-aligned numbers.
  • No outer border or frame.
• Charts:
  • Black for the primary series. All four accents for comparisons and highlights; do not lead with Coral.
  • neutral-200 for gridlines.
  • Square bar ends.
  • Labels in caption style. Label series directly where possible so meaning doesn't depend on colour alone.

Use these components to make a point. Limit them to one per screen or slide inside an app. They may appear more freely in presentations, onboarding and report pages.

• Hero statement:
  • statement-xl headline in Black, with a lead-lg paragraph in Regular beneath it.
  • Optionally followed by a single accent button, with the accent chosen by rotation.
  • White background with generous space.
• Stat:
  • number-stat (48px Black) with a Regular body-sm label beneath in muted-foreground.
  • May use a square accent block as a highlight. When showing several stats in a row, either use one shared accent or none. Never default to Coral.
  • Use for headline metrics, ideally 1–4 in a row.
• Stat display: number-display (96px Black) with a Regular lead label, for reports and milestone moments.
• Quote panel:
  • Either a black fill with white statement-quote text, or white with black.
  • Attribution in Regular body-sm.
  • Never accent-coloured and never bordered.
• Highlight panel:
  • Black fill with a white statement-md heading and white Regular body text.
  • For a key message, milestone or call to commitment.
• Numbered steps:
  • 32px Black numerals with a Bold H3 title and Regular body text.
  • One marker per item, all the same size.
• Accent button:
  • Any one accent fill (by rotation), black Bold label, square, 48px tall.
  • One per screen or slide, for the most important action.
• Statement divider: 3px black rule for major editorial breaks.
• Photo tile: full-bleed collage imagery, square, unframed.

Bringing the layers together

A typical dashboard combines both layers:

• Statement: one row of stats in 48px Black numerals.
• Interface: filters, a table, a sidebar and buttons, all quiet and neutral.

A typical presentation inverts the ratio:

• Statement: Black headlines, big numbers, quote panels and numbered steps, with the accent rotating from slide to slide.
• Body: Regular supporting text at body-lg or larger, with Bold subheadings, calm and readable.
• No branding: no logo, no brand name, no branded title or closing slides.