Style Guide

For Humans: Copy This Prompt

When you start building any app, website, or tool for South Downtown, paste the following prompt into your AI tool (Lovable, Replit, Cursor, Claude, Google AI Studio, Codex, or whatever you're using) BEFORE you start building:

PROMPT TO COPY:

Read the South Downtown Atlanta brand style guide at https://styleguide.southdowntownatl.com/ before writing any code. This page contains the complete brand system.

Follow these rules:
- Use the exact CSS custom properties from the CSS Tokens section. Copy them into this project's stylesheet. Every color variable starts with --sodo-, every semantic role starts with --sodo-color-.
- For fonts, copy the @font-face declarations as-is. They load from the style guide server. If they fail, use these Google Fonts instead: Oswald (headlines), Barlow Condensed (subheads), Libre Baskerville (body serif), DM Sans (body sans).
- Headlines use Plaak 3 Pradel Bold, uppercase, tight line-height (0.96). Subheads use Plaak 6 Bold, uppercase, wide letter-spacing (0.1em). Body text uses Trade Gothic Next LT Pro or Hercules.
- Primary brand colors: SDT Black #26262b (text, headlines), SDT White #ffffff (backgrounds), Day's Yellow #f4ad33 (accents, CTAs), Rich's Green #263835 (dark sections).
- The brand aesthetic is industrial, bold, textured, and neighborhood-rooted. Do NOT use generic corporate styling, rounded friendly aesthetics, or pastel tech-startup looks. Think brick, steel, painted walls, Atlanta grit.
- Download the logo files from the style guide site and save them locally in this project. Do not hotlink.
- Refer to the full style guide page for component examples, spacing, and the complete color palette.

SOUTH DOWNTOWN ATLANTA — BRAND STYLE GUIDE

This page is a complete brand reference for South Downtown Atlanta (SoDo Atlanta). It is designed to be read by AI coding tools.

HOW TO USE THIS:

1. Copy all CSS custom properties from the CSS Tokens section into your project's stylesheet.
2. Keep the @font-face src URLs as-is — they point to hosted font files on this server. Your app will load fonts from here at runtime.
3. If hosted fonts fail to load, use these Google Font fallbacks: Oswald (for Plaak 3 Pradel), Barlow Condensed (for Plaak 6), Libre Baskerville (for Hercules), DM Sans (for Trade Gothic Next LT Pro).
4. Save logo images locally into your project — do not hotlink the images.
5. Read the Design Principles, Patterns, and Photography sections to understand the brand's aesthetic before making design decisions.
6. Fetch the JSON block at the bottom for structured data if needed.

DO NOT link to this site's stylesheet at runtime. DO NOT use generic corporate aesthetics. This brand is industrial, bold, textured, and neighborhood-rooted.

Logo System

The South Downtown logotype is text-only, set in Plaak 3 Pradel Bold.

Download Black PNG

Download White PNG

Download NoATL Black

Download NoATL White

Download Centered Black

Download Centered White

Download Centered NoATL Black

Download Centered NoATL White

S Marks

Circle S Marks

Color Palette

All color names reference actual places and landmarks in the South Downtown Atlanta neighborhood.

Typography System

Typography Rules & Leading

Leading Rules (Critical)

Plaak 3 Pradel (headlines): line-height = (font-size - 3) / font-size
Example: 72pt text → 69pt leading → line-height: 0.958
In CSS, use approximately: line-height: 0.96

ALL other fonts (Plaak 6, Hercules, Trade Gothic): line-height = (font-size + 3) / font-size
Example: 12pt text → 15pt leading → line-height: 1.25
In CSS, use approximately: line-height: 1.25

Kerning Rules

Extended kerning (letter-spacing: 0.1em) is used for ALL CAPS moments in Subheads, Section Headers, and Footnotes utilizing Plaak 6.

Normal tracking for Plaak 3 Pradel headlines, Hercules body text, and Trade Gothic body text.

Fallback Font Stacks

--sodo-font-headline: 'Plaak 3 Pradel', 'Oswald', 'Bebas Neue', Impact, sans-serif;
--sodo-font-subhead: 'Plaak 6', 'Barlow Condensed', 'Roboto Condensed', sans-serif;
--sodo-font-body-serif: 'Hercules', 'Libre Baskerville', 'Georgia', serif;
--sodo-font-body-sans: 'Trade Gothic Next LT Pro', 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

CSS Custom Properties & Tokens

Google Fonts Fallback

If the SoDo-hosted font URLs are unavailable, place this in your HTML <head> to load the Google Fonts fallbacks:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@700&family=Barlow+Condensed:wght@300;400;700;900&family=Libre+Baskerville:ital,wght@0,400;1,400&family=DM+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

CSS Custom Properties

Copy this entire block into your project's stylesheet to access the SoDo design system variables.

Component Examples

Using ONLY brand tokens, here are examples of common UI components.

<!-- Primary Button -->
<button class="btn-primary">Primary Action</button>

<!-- Secondary Button -->
<button class="btn-secondary">Secondary Action</button>

<!-- Accent Button -->
<button class="btn-accent">Accent Button</button>

/* CSS */
.btn-primary { background-color: var(--sodo-sdt-black); color: var(--sodo-sdt-white); font-family: var(--sodo-font-subhead); text-transform: uppercase; font-weight: 700; letter-spacing: 0.1em; line-height: 1.125; }
.btn-secondary { background-color: transparent; border: 2px solid var(--sodo-sdt-black); color: var(--sodo-sdt-black); font-family: var(--sodo-font-subhead); text-transform: uppercase; font-weight: 700; letter-spacing: 0.1em; line-height: 1.125; }
.btn-accent { background-color: var(--sodo-days-yellow); color: var(--sodo-sdt-black); font-family: var(--sodo-font-subhead); text-transform: uppercase; font-weight: 700; letter-spacing: 0.1em; line-height: 1.125; }

<!-- Card Component -->
<div class="styled-card">
  <h3 class="sodo-subhead">Architecture Tour</h3>
  <p class="sodo-body">Join us for a walking tour of Historic Hotel Row.</p>
  <a href="#">Learn More &rarr;</a>
</div>

/* CSS */
.styled-card { background-color: var(--sodo-kress-white); color: var(--sodo-sdt-black); padding: 24px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border: 1px solid var(--sodo-hotel-row); }

<!-- Form Input -->
<input type="email" class="styled-input" placeholder="example@sodoatlanta.com" />

/* CSS */
.styled-input { font-family: var(--sodo-font-body-sans); border: 1px solid var(--sodo-sidewalk); padding: 12px 16px; width: 100%; max-width: 320px; }

Design Principles

1. Human touch
   The brand should always have a handmade quality. Favor texture over sterility. Imperfection is intentional.
2. Paint, don't print
   Branding should feel like it belongs in physical space — seamless with the landscape, not manufactured. Think street art, painted walls, organic placement. Application should be different every time.
3. Layered
   Compositions should layer patterns, photography, maps, and typography. Much like its history, South Downtown is made of many layers. Use torn edges, large pattern crops, and overlapping elements.
4. Neighborhood-rooted
   Everything references real places. Color names, logo variants, and typography choices all come from the neighborhood. The brand IS the neighborhood.
5. Bold + Industrial
   The Plaak typeface family sets the tone: tall, condensed, heavy, architectural. Headlines should command space.
6. Flexible
   This is explicitly an "interim" brand guide, meant as "a foundation and inspiration to be expanded upon." Designers have flexibility in logo orientation, font weight selection, and color application.

Patterns & Texture System

The brand uses hand-made abstract patterns created physically then digitized. These include brush strokes, torn edges, and paint textures — abstract and non-representational. Each pattern can be colorized into any brand palette color.

For AI-generated apps: You cannot reproduce the hand-painted patterns programmatically. When building digital applications, use solid brand colors or subtle CSS textures that evoke a raw/industrial/handmade feel. A subtle noise overlay or grain filter on backgrounds can approximate the brand's tactile quality. Avoid sterile, corporate, or overly polished aesthetics. The brand should feel like it was touched by human hands.

Photography Direction

Photography should capture the peculiar beauty and character of the buildings, even before restoration. Subjects include: industrial details, weathered textures, mechanical equipment, mailboxes and signage, building infrastructure, rooftop views, the Georgia State Capitol dome.

The mood is documentary, architectural, and textural — NOT polished lifestyle photography. Do not use generic corporate stock photos. When an AI tool generates or selects imagery for a SoDo project, it should favor gritty, authentic, urban-industrial photography over clean studio shots.

Machine-Readable JSON

The full brand system is available below in JSON format for parsers.