jonesand.ai brand standards

Named colors

The literal palette. Engineers should reference semantic tokens below, not these names directly.

Semantic tokens

Reference these in code, not the named colors. Role tokens are what keep the brand from drifting when new pages get built.

Contrast & accessibility

WCAG AA (4.5:1) for body text; 3:1 for large or bold UI text.

Color rules

Night mode

Night mode is the same grounded modernist system in a quieter reading state. It should not become cyberpunk, neon, pure black, or high-saturation AI styling.

Type scale

Type rules

The 12-column grid

Foundation for all layouts. Flexible enough for complex arrangements, simple enough to stay consistent.

Spacing scale

4-point grid. Consistent rhythm creates calm — every spacing decision should resolve to one of these values.

Layout patterns

Design principles

Button

One primary CTA per viewport. Secondary supports the primary action. Ghost is for low-noise tertiary actions. Danger is destructive only.

Input

Always paired with a visible label. Focus state uses Signal Blue border plus a 3px outer ring.

Tag

Default for stack labels and metadata; highlight for status; accent for featured items.

Card

Subtle shadow, never lifted. Interactive cards strengthen the shadow on hover.

Callout

Eyebrow-label callout. No colored side borders; use labels, numbers, or hairlines for emphasis.

Code

@theme {
  --color-text-primary: #121212;
  --color-accent: #2F6BFF;
  --font-display: 'Inter Tight', sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Editorial article images

Use editorial, type-led images when a working note needs a strong visual anchor. These are not decorative illustrations. They are structured graphics that make one idea legible at a glance.

Illustrations are allowed when they behave like editorial or technical graphics. They should clarify a concept, process, or artifact. Avoid mascot art, cartoons, decorative scenes, and generic AI imagery.

Supplementary icons

Lucide remains the default UI icon set. Custom jonesand.ai icons are additive, not replacements. Use them only when the concept is specific to the brand or working-note system and Lucide does not have a close match.

Structural graphics

Structural graphics are the technical drawing layer. They add order, measurement, and process cues without making the site feel like a dashboard.

Flow diagrams

Use flow diagrams for process explanations, prompt loops, agent workflows, evaluation paths, and experiment results.

Flow loops are allowed when they make the process clearer. Prefer orthogonal return paths. Curves are allowed only when a straight return path makes the diagram harder to read.

Reusable image prompt

Create a jonesand.ai editorial article image in the grounded modernist style.

Canvas:
- Hero version: 1200x626.
- Square thumbnail version: 1252x1252.
- Warm off-white Paper background (#F6F3EE) with very subtle paper grain.

Composition:
- Left-aligned editorial headline block.
- One short mono eyebrow label at the top, using Mustard (#D8A12D) as a small rectangular tag.
- Large Ink (#121212) headline in Inter Tight style, bold, tight leading, clean spacing.
- One short supporting line in muted Ink below the headline.
- One Signal Blue (#2F6BFF) rule or small highlight under the headline.
- Optional right-side artifact that supports the topic, such as a Markdown file, code note, prompt card, or annotated document.

Style:
- Calm, credible, editorial, modernist.
- Strong hierarchy through type and spacing.
- Minimal shadows, no glossy UI, no neon, no purple gradients, no stock imagery, no cartoon illustration.
- Use only Ink, Paper, Soft Gray, Signal Blue, and a small Mustard accent.

Content:
- Eyebrow label: [SHORT TECHNICAL LABEL]
- Headline: [ONE STRONG CLAIM]
- Supporting line: [SHORT CONTEXT LINE]
- Artifact details: [OPTIONAL DOCUMENT OR UI TEXT]

Output:
- Produce a clean, high-resolution bitmap.
- Keep all text sharp and readable.
- Make the square thumbnail a designed square layout, not a crop of the hero image.

Example adaptation

Eyebrow label: CLAUDE.md
Headline: Critical Thinking > Agreement
Supporting line: CLAUDE.md instructions for better product work
Artifact details: A Markdown file panel with sections for Purpose, Core Principles, How to Respond, and Reminders, plus small labels for evidence, tradeoffs, and ask, don't invent.

Voice attributes

Voice in micro-copy

Voice that doesn't show up in 4-word strings isn't actually specified. Defaults below.

Message hierarchy

Every jonesand.ai surface should let a visitor extract these three things, in order, in under five seconds. Show the hierarchy visually — same-size text breaks the hierarchy.

Application by touchpoint