FUQUA INC. — Visual System

Public reference · updated 9 August 2026 · governing rules in docs/visual-system.md

The FUQUA visual language

A contemporary, editorial identity built on restraint: quiet type, open space, a disciplined palette, and an abstract graphic language of thin architectural lines, overlapping planes and a few deliberate nodes — suggesting ideas, people and disciplines converging. It should read like gallery graphic art, never a diagram, dashboard or marketing template.

Principles

  1. Restraint first. When in doubt, use less — less color, less motion, less weight, more space.
  2. Convergence is the idea. The overlap of planes and the meeting of lines expresses disciplines and teams coming together.
  3. Art, not diagram. Linework crops off-canvas and never explains a process; no arrows, no connectors.
  4. Neutrals carry, accents punctuate. Ivory, stone, navy and graphite do the work; plum and slate appear sparingly.
  5. Editorial typography. Clear hierarchy, controlled line length, restrained weight.
  6. Accessible and calm. Everything is reduced-motion safe and meets AA contrast; the graphic is decorative only.

Color

Warm Ivory

#f7f5f0

Primary background

Soft Stone

#e3dfd8

Secondary background / section shift

Midnight Navy

#182536

Headings, footer, dark sections

Graphite

#4b5056

Body copy, muted UI

accent

Dusty Plum

#6f5368

Signature accent — sparingly

accent

Muted Slate

#7f91a5

Secondary accent — very sparingly

Plum is the signature — about one moment per view. Slate is even more restrained and never competes with plum. Section grounds alternate navy → ivory → stone → navy → ivory → navy; don't add new background colors.

HeroAboutWritingHow I thinkStay in touchFooter

Typography

Sans: Inter Variable (UI, headings, body). Serif:Source Serif 4 Variable (pull quotes, points of view). Fluid scale, restrained weights (max ~680).

Composition types

Three sanctioned variants of the brand graphic. Don't invent new ones without a rule.

Hero variant="hero"

A large-format supporting composition. The redesigned homepage hero uses the lit backdrop instead.

Motif variant="motif"

A compact cropped signature for small brand moments (footer, feature card, About).

Field variant="field"

Ultra-subtle linework behind dark (navy) sections. Never competes with content.

Anatomy

Linework

Thin (~1.15) architectural strokes, non-scaling-stroke. Hierarchy by opacity (path .72, arc .5, hairline .18), not weight. Runs past the frame.

Planes

2–3 overlapping cropped rectangles, low opacity (stone ~.62, plum ~.17 multiply). The overlap is the point. Rotations ≤ ~8°.

Nodes

2–3 only, not one per intersection. Three styles: plum, slate, and the ring node (ground fill, navy stroke). At most one of each.

Spacing

Generous and open. Section rhythm comes from .section / .section--tight; use the scale, avoid arbitrary values.

Motion

Permitted: restrained scroll reveals, word-by-word bio reveal, line masks, gentle 3–4% parallax, desktop-only sticky hero recede, ambient backdrop drift and a quiet light sweep. Every effect is gated behindprefers-reduced-motion: no-preference and the motion-ready JavaScript guard.

Content is visible by default. JavaScript may prepare a hidden state only after it confirms the motion preference and required APIs, includingIntersectionObserver. With JavaScript disabled, unsupported, or reduced motion requested, content stays in its final state.

Do & Don't

Do

  • Use plum for roughly one deliberate moment per view — an eyebrow, quiet link, hairline emphasis, or its reserved roles in the graphic.
  • Keep linework thin and architectural, running off-canvas so it reads as art.
  • Let the overlap of 2–3 planes carry the "convergence" idea.
  • Use the spacing and type scales; control paragraph width with the measure tokens.
  • Gate every animation behind prefers-reduced-motion and the motion-ready JavaScript guard.
  • Keep content visible by default; prepare hidden reveal states only after required APIs are confirmed.
  • Treat the graphic as decorative: aria-hidden, never the sole carrier of meaning.

Don't

  • Don’t use plum for body text, large fills, or a second filled button in the same view.
  • Don’t let slate compete with plum — it’s a quiet, occasional accent only.
  • Don’t add arrowheads or wire nodes together — it must never become a flowchart, network or org chart.
  • Don’t scatter nodes (one per intersection) or stack more than ~3 planes.
  • Don’t introduce new background colors outside ivory / stone / navy.
  • Don’t add scroll-jacking, autoplay with sound, looping-attention motion or strong parallax.