jonesand.ai brand standards

Named colors

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

Cool alternates

Sourced from creativeboom.com's own stylesheet as a deliberate cool departure from this system's warm neutrals — used with intention, not as defaults.

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.

Action affordances

Links, downloads, and copy actions share one system (design.md 6.9), implemented by ActionLink and CopyButton. The glyph is a promise about what happens on click, derived from the href, never chosen per call site. The visual tier (secondary button or text action link) says how important the action is; any glyph can appear at either tier.

Glyphs sit in an aria-hidden span after the label, never inside the accessible name. Quiet links (muted, hover to Ink, no glyph) stay reserved for nav, footer, and back links. Email stays a plain mailto link with no glyph.

Input

Always paired with a visible label. Focus state uses the Link Blue border plus a 3px outer ring — focus is an interactive-state signal, grouped with links rather than branding.

Tag

Default for stack labels and metadata; highlight for status; accent for featured items. Standardized 2026-07-09 on the Paper Deep fill (implemented by the Tag component); border-only variants converged. New: bright solid variants for category-style labeling, matching the energy of creativeboom.com's own label pills — not for status/metadata, but for content-category tags that want to pop.

Card

Subtle shadow, never lifted, and always a 1px Soft Gray border (standardized 2026-07-09, implemented by the Card component). 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: #1E232B;
  --color-accent-strong: #1F54D6; /* focus rings only — links are Ink now */
  --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, graphical images when a working note needs a strong visual anchor. Communicate primarily through a visual metaphor, artifact, process, diagram, or technical illustration. Text should support the visual idea rather than automatically becoming the composition.

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

Updated: no longer favors Signal Blue as the default accent — it's phased out of general branding, and the composition rule now draws from the whole palette instead of a fixed shortlist.

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 (#FCFAF5) with very subtle paper grain.

Composition:
- Build the composition around one clear visual metaphor, artifact, process, diagram, or technical illustration.
- Anchor the composition in the neutral tones: Ink, Paper, Soft Gray.
- Add one or two accent colors from the full palette — Signal Blue, Amber, Green, Coral, or Mist — as bright, intentional pops of color. No accent is favored by default; pick whichever fits the concept.
- Keep titles short and secondary to the graphical subject by default.
- Let color carry real energy and confidence — not just an accent, a presence.

Style:
- Credible, editorial, modernist — with room for bold, intentional color.
- Strong hierarchy through type and spacing.
- Minimal shadows, no glossy UI, no neon, no purple gradients, no stock imagery, no cartoon illustration.
- Use Ink, Paper, and Soft Gray as the neutral base, plus any one or two accents from Signal Blue, Amber, Green, Coral, and Mist.

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