STYLE GUIDE

STUDIO VISUAL IDENTITY & DESIGN SYSTEM

DESCRIPTION:

This page serves as the master reference for the Cheryl Johnson Artist digital portfolio. It documents the typography, color palette, and spacing standards required to maintain a cohesive, "museum-quality" aesthetic across the website.

To ensure the site retains its authority as a Catalogue Raisonné, all new pages must adhere strictly to these guidelines. This system prioritizes Playfair Display for authoritative headings and Lato for high-readability body text, anchored by a Deep Red and Gallery Gray color palette.

Use this for the first slot. This controls your Buttons, Links, and Active Tabs.

Color: Marian Deep Red
HEX Code: #and make sure that I have it up-to-date I'll go find it now

2. Secondary (Text & Headers)

Use this for the second slot. This ensures your text is "Museum Black" (softer than pure black) for readability.

Color: Gallery Charcoal
HEX Code: #111111

3. Tertiary (Backgrounds)

Use this for the third slot. This provides that very faint "Mist Gray" for your section backgrounds so your White Cards pop out.

Color: Mist Gray
HEX Code: #F9F9F9

Summary for Copy/Pasting:

#D32F2F (Red)
#111111 (Black/Charcoal)
#F9F9F9 (Light Gray)

TITLE: STUDIO VISUAL IDENTITY & DESIGN SYSTEM

DESCRIPTION:

This page serves as the master reference for the Cheryl Johnson Artist digital portfolio. It documents the typography, color palette, and spacing standards required to maintain a cohesive, "museum-quality" aesthetic across the website.

To ensure the site retains its authority as a Catalogue Raisonné, all new pages must adhere strictly to these guidelines. This system prioritizes Playfair Display for authoritative headings and Lato for high-readability body text, anchored by a Deep Red and Gallery Gray color palette.

Part 2: The Button Color Decision

Why? You have already committed to Deep Red (#D32F2F) as your "Brand Color" (for the Marian Goodman look).
The Gallery Standard: Luxury galleries (Artlogic, Gagosian, White Cube) almost exclusively use Black, Dark Gray, or their One Signature Color (Red) for buttons.

My Recommendations (Pick One):

Option A: The "Brand Consistency" Choice (Recommended)

Color: Deep Red
Hex: #D32F2F
Why: It reinforces your brand. When users see Red, they know it is "clickable."

Option B: The "Museum Minimalist" Choice

Color: Solid Black
Hex: #000000
Why: It lets the art stand out. It is timeless and serious.

Option C: The "Luxury" Choice (If you hate Red buttons)

Color: Muted Gold / Ochre (Not bright yellow)
Hex: #C5A059
Why: If you really want a second color, this feels like a gold frame. It is elegant, not loud.

Part 3: The "Style Guide" Cheat Sheet (Copy & Paste)

Paste this code block onto your new Style Guide page. It will visual display your fonts, colors, and hex codes so you never lose them.

HTML

<h2 style="font-family: 'Playfair Display', Georgia, serif; font-size: 32px; color: #D32F2F; margin-top: 0; padding-bottom: 20px; border-bottom: 2px solid #D32F2F; text-transform: uppercase; letter-spacing: 2px;">Studio Design Specifications</h2>

<h3 style="font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px;">1. Typography Hierarchy</h3>

<p style="font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; color: #000; margin: 0;">Page Title (Playfair Display)</p>

<p style="font-family: 'Lato', monospace; font-size: 12px; color: #666; margin-top: 5px;">Usage: Main Page Headers | Size: 48px+ | Color: Black (#000000)</p>

</div>

<p style="font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 600; color: #D32F2F; margin: 0; text-transform: uppercase; letter-spacing: 1px;">Section Heading (Playfair Display)</p>

<p style="font-family: 'Lato', monospace; font-size: 12px; color: #666; margin-top: 5px;">Usage: Categories | Size: 24-30px | Color: Deep Red (#D32F2F)</p>

</div>

<p style="font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 400; color: #333; margin: 0; line-height: 1.6;">Normal Text (Lato). This is the standard body copy. It should always have a line-height of 1.6 to ensure readability and a high-end gallery feel. Never use pure black; use Dark Charcoal.</p>

<p style="font-family: 'Lato', monospace; font-size: 12px; color: #666; margin-top: 5px;">Usage: Paragraphs | Size: 16px | Color: Charcoal (#333333)</p>

</div>

<h3 style="font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px;">2. Official Color Palette</h3>

</div>

<p style="margin: 0; font-weight: bold; font-size: 14px;">Charcoal</p>

</div>

</div>

</div>

To achieve that sophisticated, "high-end gallery" look while ensuring maximum readability across all browsers, here is your definitive guide.

Question 1: Lato or Open Sans?

Winner: Lato

Why? While Open Sans is very readable, it can feel a bit "utilitarian" or "tech-corporate" (like a startup). Lato has semi-rounded details that give it a feeling of warmth and elegance. It looks more "designed" and pairs beautifully with Serif headers (like Playfair or Georgia), creating that expensive "museum catalog" aesthetic.
Browser Safety: Both are Google Fonts and are 100% safe for every modern browser.

Question 2: The Exact Spacing Specs

For a luxury gallery feel, white space is oxygen. You want your text to breathe. Standard web spacing (1.15) looks cramped and cheap. You need wider line heights and clear separation between paragraphs.

Go to Themes > Customize > Text and input these exact values for every single level.

1. Normal Text (Your Body Copy)

This is the most important one for "User-Intent" readability.

Font: Lato
Weight: Normal
Size: 16px (Standard for 2026 readability)
Line Spacing: 1.6 or 1.8 (This "airy" spacing signals luxury).
Paragraph Spacing:
- Before: 0px
- After: 24px (This creates a clean gap between paragraphs without needing to hit "Enter" twice).

2. Title (The Page Name)

Font: Playfair Display (or Merriweather)
Weight: Bold
Size: 48px (or larger)
Line Spacing: 1.1 (Keep big text tight so it doesn't look disjointed).
Paragraph Spacing:
- After: 40px (Push the content down so the title stands alone).

3. Heading (Section Dividers like "PORTFOLIO")

Font: Playfair Display (or Merriweather)
Weight: Semi-Bold
Size: 30px
Color: Deep Red (#D32F2F) or Black
Line Spacing: 1.25
Paragraph Spacing:
- Before: 60px (Huge space above gives the eye a rest before a new section).
- After: 15px (Keep it close to the content it introduces).

4. Subheading (Navigation Labels like "CORE WORKS")

Font: Lato
Weight: Bold (or Medium)
Size: 14px
Format: UPPERCASE (Click the "TT" icon).
Letter Spacing: Wide (If available) or just the font style itself.
Line Spacing: 1.5
Paragraph Spacing:
- Before: 20px
- After: 10px

5. Small Text (Captions/Footnotes)

Font: Lato
Weight: Light
Size: 12px
Line Spacing: 1.4
Paragraph Spacing:
- After: 12px

Summary Checklist for the "Gallery Look"

Contrast: Serif Headers (Playfair) + Sans-Serif Body (Lato).
Air: Line spacing of 1.6 on body text.
Rhythm: Heavy "Before" spacing on Headings (60px) to separate sections clearly.

This styling meets the 2026 requirement for "Visual Clarity" and makes your archive page a pleasure to read rather than a chore. Would you like me to update the HTML code blocks one last time to explicitly force "Lato" in the code, just in case the Theme settings glitch?