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:
Copy all CSS custom properties from the CSS Tokens section into your project's stylesheet.
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.
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).
Save logo images locally into your project — do not hotlink the images.
Read the Design Principles, Patterns, and Photography sections to understand the brand's aesthetic before making design decisions.
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.
Never use multiple logo variations on one deliverable.
Match logo orientation to the typography header style being used.
Standalone "S" marks are only for small avatar instances.
Additional logo variants exist but are not hosted here:
- Logotype without 'Atlanta' (two-line: SOUTH / DOWNTOWN)
- Centered logotype variants (with and without Atlanta)
- Four Legacy S secondary marks: Kress (geometric block), Boots (rounded serif), Butlers Shoes (decorative), Rich's (script)
- Four circular badge logos with S center and 'SOUTH DOWNTOWN' circumference text
- Four standalone S tertiary marks with 'ATL' beneath
- Neighborhood marks: Historic Hotel Row, Gordon (Hotel Row), Scoville (Hotel Row), Sylvan (Hotel Row)
Contact the SoDo design team for these files.
Color Palette
All color names reference actual places and landmarks in the South Downtown Atlanta neighborhood.
It's Atlanta's Turn. We are contributing to a bigger story. The area south of downtown has been here for over a century. The brand is about revival, preservation, and building for the next 100 years.
font-weight: 400; line-height: 1.25;
Body Copy / Details - Trade Gothic Next LT Pro
This typography style is used for general paragraphs, UI elements, and detailed descriptions where legibility is paramount. It provides a clean, modern contrast to the more decorative display typefaces.
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.
These rules apply to every app, website, tool, and dashboard built for South Downtown Atlanta. Follow them in addition to the color and typography tokens above.
Logo Usage
MINIMUM SIZE: The primary logotype ("SOUTH DOWNTOWN ATLANTA") must never appear smaller than 120px wide on desktop or 80px wide on mobile.
The "SOUTH DOWNTOWN" (no Atlanta) variant has a minimum width of 100px desktop / 70px mobile.
S marks have a minimum size of 32px × 32px. Below that they become illegible.
PLACEMENT: The logo belongs in the top-left corner of the page or centered in the header. Never bottom-right, never floating mid-page.
CLEAR SPACE: Maintain padding around the logo equal to the height of the "S" in "SOUTH" on all sides. No other elements should crowd the logo.
BACKGROUND: Only place the black logo on light backgrounds (#ffffff, #c6d3c6, #dde2e2, #ddd6e2, #dbccbc). Only place the white logo on dark backgrounds (#26262b, #263835, #1e3f54, #4c262b, #42210a).
Never stretch, rotate, add drop shadows, add outlines, or recolor the logo. Use it exactly as provided.
Layout & Spacing
MAX CONTENT WIDTH: 1200px for primary content areas. Center on page with auto margins.
PAGE MARGINS: Minimum 24px on mobile, 48px on tablet, 64px on desktop.
SECTION PADDING: 64px top and bottom for major page sections on desktop, 40px on mobile.
COMPONENT SPACING: Use the spacing scale consistently:
4px — tight spacing (icon to label)
8px — compact spacing (between related items in a group)
16px — default spacing (between form fields, list items)
Never use rounded pill buttons or cards with border-radius above 4px.
Never use gradient backgrounds.
Never use stock photography of smiling people in business suits.
Never use a pure blue (#0000FF type) or purple. The brand has no blue except Miller's Blue.
Never use thin/light-weight fonts for headlines. Headlines are always bold/heavy.
Never center body text paragraphs. Body text is always left-aligned.
Never use more than 2 brand colors as backgrounds on a single page.
Never put a colored background behind the logo.
Never use Comic Sans. (Yes this needs to be said for AI tools.)
Design Principles
Human touch The brand should always have a handmade quality. Favor texture over sterility. Imperfection is intentional.
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.
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.
Neighborhood-rooted Everything references real places. Color names, logo variants, and typography choices all come from the neighborhood. The brand IS the neighborhood.
Bold + Industrial The Plaak typeface family sets the tone: tall, condensed, heavy, architectural. Headlines should command space.
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.
