Form Nutrition — Design Language Reference

1. Visual Theme & Atmosphere

Form Nutrition inhabits the intersection of wellness and authority — a nutrition brand that wants to be taken seriously by athletes and skeptics alike. The design speaks softly but with conviction: clean white space, premium typography, and a restrained color palette anchored in black and natural off-whites. It refuses the garish color conventions of the supplement industry.

Built on WordPress with Gutenberg blocks, the site achieves a level of editorial refinement unusual for its CMS. The spacing system follows a deliberate 8px-based scale (0.44rem → 5.06rem), giving every block room to breathe. The result feels like a high-end print catalog translated to the web — composed, unhurried, and confident in its silences.

2. Color Palette & Roles

Foundation

• #000000 — Primary text, headings, borders
• #FFFFFF — Page background, card surfaces

Brand Accent

• #7A00DF — Synced block highlight, editorial callout color (vivid purple — used sparingly as a signal, not decoration)

Status / UI Chrome (WordPress admin tokens, not design-facing)

• #007CBA / #006BA1 / #005A87 — Admin theme colors; not present in front-end design

WordPress Preset Palette (available, rarely used in hero contexts)

• Standard WP block palette present but subordinate to the brand’s own editorial choices

Typography Colors

• #000000 for all display text; consistent with the brand’s refusal to use gray-on-white softening

What’s absent: No gradient on the marketing surface. No illustrated or photographic tinting. The purple accent is used with the discipline of a single drop of ink in water — once is enough.

3. Typography Rules

Form Nutrition uses Avenir Next as its primary typeface, delivered as a custom variant ("Avenir Next - Regular"). This is a geometric humanist sans-serif — precise and modern, but warmer than Futura. Body copy and captions both draw from this family.

The 30px line height on body text (1.875× ratio) is the site’s most distinctive typographic decision — it reads like a well-designed print article, not a web page. This density invites reading rather than scanning.

What’s absent: No rounded or display typeface. No monospace. No letter-spacing manipulation on body text.

4. Component Styling

Cards / Blocks

• WordPress Gutenberg block grid; standard spacing tokens apply
• Shadows from WP presets: natural (6px 6px 9px rgba(0,0,0,0.2)), deep (12px 12px 50px rgba(0,0,0,0.4)), sharp (6px 6px 0px rgba(0,0,0,0.2))
• The sharp shadow (no blur) is notable — it creates a graphic, almost screen-printed quality

Buttons

• Consistent with black/white system; no rounded pill shapes implied by the editorial register
• Focus state: 2px admin border width — accessibility-conscious

Aspect Ratios

• Full WP preset set: square (1:1), 4:3, 3:4, 3:2, 2:3, 16:9, 9:16
• 3:4 portrait ratio suggests strong vertical product photography

Spacing Scale

5. Layout Principles

The layout follows a centered editorial column with generous outer margins. Gutenberg’s block spacing controls vertical rhythm via the spacing scale above. The overall impression is a magazine grid: clear vertical flow, distinct section breaks, no sidebar distractions.

The wide line height on body text and the generous spacing steps mean the site breathes more than most e-commerce. This is intentional — Form is selling trust, not urgency.

6. Depth & Elevation

Three shadow presets define the elevation vocabulary:

• Natural — 6px 6px 9px rgba(0,0,0,0.2): Soft, directional. Used for product cards that need gentle lift.
• Sharp — 6px 6px 0px rgba(0,0,0,0.2): No blur, hard-edged. Graphic, editorial — feels like a offset print effect.
• Deep — 12px 12px 50px rgba(0,0,0,0.4): Heavy ambient shadow for modal or hero overlay elements.

The sharp shadow is the most distinctive and brand-aligned — it pairs beautifully with Avenir Next’s geometric forms.

7. Do’s and Don’ts

Do

• Use 30px line height on body text — it’s the site’s signature breathing room
• Apply Avenir Next consistently across all text; it unifies the editorial voice
• Favor the sharp shadow (no blur) for graphic, high-contrast card effects
• Honor the vertical spacing scale; don’t skip levels
• Use the purple accent (#7A00DF) once per page maximum — it loses power with repetition

Don’t

• Use supplement-industry conventions (neon accents, muscle photography with hard gradients)
• Reduce line height below 1.6 — the readability contract breaks
• Mix in the WordPress preset palette colors; they exist for blocks but clash with the editorial voice
• Add decorative borders or dividers; white space does this job

8. Responsive Behavior

WP preset spacing scales are fixed values (rem-based), not fluid. The site uses standard Gutenberg responsive stacking. Aspect ratio presets suggest images are art-directed across viewports — portrait crops (3:4, 2:3) likely replace landscape (16:9, 3:2) on mobile to maximize vertical product focus.

No CSS custom properties for fluid type were detected — responsive text sizing is handled at the block level, not via a token system.

9. Agent Prompt Guide

“Design in the style of Form Nutrition: white background, black text, Avenir Next typeface. Body text at 16px with 30px line height. Editorial spacing with generous vertical rhythm. Cards use a sharp no-blur offset shadow 6px 6px 0px rgba(0,0,0,0.2) for a graphic, print-inspired quality. The purple accent #7A00DF appears once as a focal callout. No gradients, no rounded pill buttons, no supplement-industry energy. Think: high-end print wellness catalog translated to web — composed, authoritative, unhurried.”

Generated by Sparkbites — extracted from live CSS analysis