# LA.IO Brand Reference
## LA.IO Brand System Reference

> This document is authoritative context for every LA.IO project, on any surface (Claude, Cowork, Claude Code, or design tools).
> Read it before generating any code, copy, layout, or design decision.
> It is not a suggestion document. It is a constraint document.

---

## What LA.IO Is

LA.IO (Louisiana Innovation Office) is an operating brand for Louisiana's innovation ecosystem — not a campaign, not a government rebrand, not a tourism play. It exists to give Louisiana's real innovation activity a coherent, credible signal that founders, investors, and global partners can align behind.

LA.IO is open source by design. Organizations across Louisiana's ecosystem adopt it directly. Its power comes from appearing in many places, owned by many actors, all pointing in the same direction.

**The core thesis:**
Louisiana plays an elemental role in the future. Louisiana has world-class, humanity-scale expertise in shipbuilding/maritime, energy, logistics/shipping, manufacturing, and agriculture — and creates the new technologies driving those sectors forward. What Louisiana builds for itself turns out to be what the world needs.

This is not a perception problem being corrected. This is a signal being amplified. There is no "rethink Louisiana." Louisiana has always been an innovation leader.

### The three pillars
LA.IO's work organizes into three areas. When they appear, they appear in this order:

+ **Capital.** Connecting founders and projects to investment.
+ **Coaching.** Expertise, mentorship, and operational support.
+ **Connections.** Relationships, partnerships, ecosystem access.

They are a description of the work, not a tagline. Use them where a piece needs them and leave them out where it does not. The `+` prefix is structural — it is the brand's bullet marker, not decoration. In designed layouts the `+` can be assembled from bracket elements at any scale. In copy, it appears as a literal `+` character before each term.

---

## Brand Voice

### The tone in one sentence
Louisiana doesn't sell itself. It states what's true, and the truth is enough.

### Foundational voice principles

**Confident, not defensive.** Never acknowledge an incorrect perception in order to correct it. Lead with what is, not what people have wrong. Phrases like "contrary to what you might think" or "you might be surprised" are off-brand — they invite the wrong frame before making the argument.

**Matter-of-fact, not enthusiastic.** The voice is a grounded, expert friend — someone so knowledgeable they don't need to perform expertise. Not professorial. Not hype. Think: plainspoken authority.

**Earned, not claimed.** Don't assert that Louisiana is innovative. Show the work and let the audience connect the dots. Trust them.

**Grounded, occasionally playful.** The voice can have wit. It's the genius who doesn't take themselves too seriously — not because the work is light, but because real confidence doesn't need volume.

**We let the audience come to us.** We don't ask to be invited.

### Voice calibration examples
These lines are canonically on-brand. Use them to calibrate any generated copy:

- *The Future Flows Through Louisiana*
- *The Robots are Coming ... and Louisiana is Ready.*
- *Local Frequency. Global Signal.*
- *Louisiana Innovation Creates Global Solutions*
- *Louisiana has always built what the world needs next.*

### Absolute prohibitions — never write these

**Words and phrases:**
- "resilience" / "resilient" — victim language. Louisiana overcomes with persistence and creativity, not resilience.
- "Silicon Bayou" or any [Place] + [Tech nickname] construction
- "innovative solutions" / "cutting-edge" / "disruptive" / "disrupting"
- "rethink" / "reimagine" / "transforming" as hollow verbs
- Any Louisiana cultural cliché: no jazz, no Bourbon Street, no Mardi Gras, no crawfish, no "Laissez les bons temps rouler"
- "it's not X, it's Y" constructions — defensive framing
- "we're different because..." — selling language
- Em dashes (—) anywhere in copy. They create false tension and have become a generic AI writing tic. If a sentence needs an em dash to work, rewrite the sentence.
- "it's not X, it's Y" or "it's not just X, it's Y" constructions. This is another AI writing trope. It also implies defensiveness — as if we're correcting a misconception. We are not.
- "problems" as a framing device. Louisiana addresses challenges, not problems.

**Structural patterns:**
- Never acknowledge a negative perception before correcting it
- Never use inspirational-poster cadence ("Together we can...", "The future is bright...")
- Never frame Louisiana as overcoming its reputation
- Never oversell — if a line feels like it's trying too hard, cut it
- Avoid overuse of "build" / "building" — find specific verbs

### Word choices that are on-brand
- *creates*, *develops*, *engineers*, *produces*, *shapes*
- *momentum*, *capacity*, *expertise*, *scale*
- *humanity-scale*, *global*, *elemental*, *foundational*
- *what the world needs*, *how the future works*

---

## Color System

LA.IO uses five color families, each with three stops: Dark, Easy, and Electric. Design within one family at a time. Use Dark as background, Easy or Electric as accent/foreground. Do not mix families within a single piece unless there is a strong structural reason.

### The Five Color Families

**Magenta family**
| Name | Hex | RGB | Use |
|------|-----|-----|-----|
| LA.IO DRK PRPL | `#101948` | 16, 25, 72 | Background, dark ground |
| LA.IO EASY MAGENTA | `#E385FE` | 227, 133, 254 | Accent on dark |
| LA.IO ELECTRIC MAGENTA | `#F629CB` | 246, 41, 203 | High-energy accent |

**Green family**
| Name | Hex | RGB | Use |
|------|-----|-----|-----|
| LA.IO DRK GRN | `#172708` | 23, 39, 8 | Background, dark ground |
| LA.IO EASY GRN | `#C8ED5D` | 200, 237, 93 | Accent on dark — structural use preferred |
| LA.IO ELECTRIC GRN | `#96F90B` | 150, 249, 11 | High-energy accent |

**Blue family**
| Name | Hex | RGB | Use |
|------|-----|-----|-----|
| LA.IO DRK BLUE | `#01233C` | 1, 35, 60 | Background, dark ground |
| LA.IO EASY BLUE | `#63DCDE` | 99, 220, 222 | Accent on dark |
| LA.IO ELECTRIC BLUE | `#00B9FE` | 0, 185, 254 | High-energy accent |

**Orange family**
| Name | Hex | RGB | Use |
|------|-----|-----|-----|
| LA.IO DRK ORNG | `#302511` | 48, 37, 17 | Background, dark ground |
| LA.IO EASY ORANGE | `#F1DC43` | 241, 220, 67 | Accent on dark |
| LA.IO ELECTRIC ORANGE | `#F5C124` | 245, 193, 36 | High-energy accent |

**Gray family**
| Name | Hex | RGB | Use |
|------|-----|-----|-----|
| LA.IO DRK GRAY | `#231F20` | 35, 31, 32 | Dark neutral, near-black |
| LA.IO GRAY | `#929497` | 146, 148, 151 | Mid neutral |
| LA.IO EASY GRAY | `#E3E6E7` | 227, 230, 231 | Light neutral, near-white |
| White | `#FFFFFF` | 255, 255, 255 | Pure white |

### Color usage rules

1. **Stay in one family per piece.** A Blue family piece uses Dark Blue + Easy Blue (or Electric Blue). It does not also use Easy Green.
2. **Accent colors are architectural, not decorative.** Easy Green (`#C8ED5D`) belongs on bars, borders, structural dividers — not as a background fill across a full section.
3. **Dark stops are for backgrounds.** Easy and Electric stops are for type, icons, accents placed on Dark backgrounds.
4. **Light-on-dark is the preferred mode** for high-impact layouts (event pages, hero sections, presentations).
5. **The Gray family is the neutral/functional family.** Use for UI elements, body copy backgrounds, secondary text.
6. **No brand color combinations that weren't enumerated above.** Do not invent new pairings.

### Tailwind token mapping
```js
// tailwind.config.js — extend with these:
colors: {
  'laio': {
    // Magenta family
    'drk-purple': '#101948',
    'easy-magenta': '#E385FE',
    'electric-magenta': '#F629CB',
    // Green family
    'drk-green': '#172708',
    'easy-green': '#C8ED5D',
    'electric-green': '#96F90B',
    // Blue family
    'drk-blue': '#01233C',
    'easy-blue': '#63DCDE',
    'electric-blue': '#00B9FE',
    // Orange family
    'drk-orange': '#302511',
    'easy-orange': '#F1DC43',
    'electric-orange': '#F5C124',
    // Gray/Neutral
    'drk-gray': '#231F20',
    'gray': '#929497',
    'easy-gray': '#E3E6E7',
    'white': '#FFFFFF',
  }
}
```

---

## Typography

### Primary: Aktiv Grotesk
The brand typeface. Monospace DNA, tech-forward, deeply legible. Use across all headings, UI labels, navigation, and display copy.

**Weight philosophy:** Bias toward the extremes. Headlines are Light (300) or Bold (700), never a middle weight. Body copy is Regular (400).

**Display weights.** XBold (800) and Black (900) ship in the hosted CSS and the desktop set, with italics. They are display cuts: large-scale headlines, posters, supergraphics, environmental type. Never at text sizes, never as a default headline weight, never in body copy. The embedded CSS carries Light 300, Regular 400 and Bold 700 only, so sandboxed work stays on those three.

Family name `'Aktiv Grotesk'` (title case, never `'aktiv-grotesk'`). Headlines Light 300 or Bold 700, never a middle weight. Body Regular 400.

**Web delivery.** Inside any sandboxed output (claude.ai artifact, Claude Design, Lovable preview, email) embed the font CSS and inline the logo SVGs; external URLs do not load there, and Roboto is never an acceptable substitute in an artifact. Three ways to load it, in this order of preference:

+ **Embedded:** paste the contents of `laio-fonts-inline.css` into a `<style>` tag. Zero network requests. Use in claude.ai artifacts, Claude Design, Lovable previews, email, anything sandboxed. This is the default for AI-generated work.
+ **Hosted, for real sites and apps on a domain only, never inside an artifact or preview:** `<link rel="stylesheet" href="https://assets.la.io/fonts/laio-fonts.css">`.
+ **Fallback:** Roboto from Google Fonts, only when neither of the above is possible. Say so in the handoff. Roboto is a stand-in, never the goal. Never Roboto inside an artifact; embed instead.

```css
font-family: 'Aktiv Grotesk', 'Roboto', system-ui, sans-serif;
```

`laio-fonts-inline.css` ships in the `laio-brand` skill at `assets/fonts/laio-fonts-inline.css`, and in a claude.ai Project as uploaded knowledge. Use that copy rather than fetching it. Public copy: `https://assets.la.io/fonts/laio-fonts-inline.css`.

### Secondary: JetBrains Mono
Eyebrows, labels, tags, metadata only. All caps, letter-spacing 0.08 to 0.12em, weights 400/700, always a brand accent color. Google Fonts: `https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap`

### Typographic rules
- Headlines: Aktiv Grotesk Bold or Light — choose one, don't mix within a layout
- Body: Aktiv Grotesk Regular (400), 16–18px, 1.5–1.7 line height
- Labels, eyebrows, tags, metadata: JetBrains Mono, all caps, accent color. Aktiv Grotesk Bold is never used for labels
- No decorative or serif typefaces
- No system default fonts (Arial, Helvetica) in designed interfaces

---

## Logo and Design Elements

### The logo
The LA.IO logotype is monospace font bracketed by angular chevron/bracket marks: `< LA.IO >`. This is intentional — it reads as a URL, as code syntax, and as a technological signal. It deliberately distances the brand from Louisiana cultural/tourism aesthetics.

**Which logo:**
+ `LAIO-COMPLETE.svg`: the default everywhere. Full wordmark with LOUISIANA INNOVATION subtext.
+ `LAIO-ICON.svg`: the favicon and app-icon mark. The stacked LA/IO monogram, for favicons, app icons, avatars, social profile images, and any square or near-square slot where the full mark cannot breathe. Never in place of `LAIO-COMPLETE.svg` in layout.
+ `LAIO-BASE.svg`: only when the mark is under about 120px wide and the subtext would be illegible.
+ `LAIO-HORZ.svg`: only in a header or nav bar.
+ `LOUISIANA-INNOVATION-A.svg`, `LOUISIANA-INNOVATION-B.svg`, `DIVISION-LINE.svg`: secondary marks. Under or beside the primary mark. Never alone.
+ LED files (`LED-WHITE.svg`, `LED-BLACK.svg`, `LED-SMALL-WHITE.svg`, `LED-SMALL-BLACK.svg`): white on dark grounds, black on light grounds recolored to the family dark. Under or beside the LA.IO mark, never above it. LED's gold and full-color marks belong to LED's own communications; the LA.IO kit carries white and black only.
+ Never type or draw the logo. Always the SVG file.

**Logo colorization:**
All logo SVG files are exported in near-black (`#231F20`). To apply brand color, override the fill:
```css
/* CSS override */
.laio-logo path { fill: #63DCDE; }

/* SVG attribute */
<svg ...><path fill="#C8ED5D" .../></svg>

/* React prop */
<LaioLogo fill="#E385FE" />
```

Export one set of base SVGs. Do not pre-export in every color — apply color programmatically.

**Logo minimum spacing:**
The square pixel/dot in the logo is the base measurement unit. Maintain 3x that unit of clear space around the logo in all directions.

**Logo usage latitude:**
The brand guidelines explicitly encourage exploration — the logo can be used large, cropped, bleeding off edges, as a supergraphic. The rule is: it must remain legible. Breaking compositional rules is on-brand when it's intentional and legible.

**The LED logo:**
Louisiana Economic Development, the parent agency. White on dark grounds is the default. Black on light grounds, recolored to the family dark. LED's gold and full-color marks belong to LED's own communications; the LA.IO kit carries white and black only. Sits under or beside the LA.IO mark, never above it. Files: `LED-WHITE.svg`, `LED-BLACK.svg`, `LED-SMALL-WHITE.svg`, `LED-SMALL-BLACK.svg`, in `assets/logos/` and at `https://assets.la.io/logos/`. It is the one outside logo the kit ships. Partner logos: recolor into the family by default; original colors only when the partner requires it. The kit ships no partner logos.

### Design elements library
The bracket shapes from the logo decompose into a full visual vocabulary. Every element sits at 0, 45, or 90 degrees. Files are in `assets/motifs/` and at `https://assets.la.io/motifs/`.

+ `< >` full bracket pair: contains or frames content. `<` `>` alone: directional, indexing. (`LAIO-LEFT-BRACKET`, `LAIO-RIGHT-BRACKET`)
+ `v` `^` downward and upward chevrons (`LAIO-DOWN-BRACKET`, `LAIO-UP-BRACKET`)
+ `x` cross (`LAIO-X`)
+ `◆` `◇` filled and outlined diamond (`LAIO-DIAMOND`, `LAIO-DIAMOND-EMPTY`)
+ `■` `□` filled and outlined square, the diamond set back to 0 degrees (`LAIO-SQUARE`, `LAIO-SQUARE-EMPTY`)
+ `⌐` `¬` corner marks for frames and registration (`LAIO-BRACKET-CORNER-1`, `LAIO-BRACKET-CORNER-2`)
+ `L` the L-corner: a vertical bar with a foot. It holds the vertical LOUISIANA INNOVATION wordmark (`LAIO-CORNER-L`)
+ `+` plus (`LAIO-PLUS`)
+ Diagonal field: a right triangle with a 45-degree edge, sized for a 16:9 canvas at 100% width (`LAIO-FIELD-DIAGONAL`)
+ 45-degree hatch: one tile that repeats seamlessly (`LAIO-HATCH`)
+ Wire node: the open-square terminal for 1px connectors (`LAIO-WIRE-NODE`)

**The `+` as the brand bullet:**
The `+` is the canonical list marker for LA.IO. In body copy, use a literal `+` character. In designed layouts, the `+` can be constructed from bracket corner elements at any size. It replaces all standard bullets, dashes, and dots everywhere: UI lists, copy, slide decks, printed materials.

One trap. In markdown, `+ ` at the start of a line is itself a list marker, so it renders as a dot and the plus is gone by the time anyone copies the text into a layout. Escape it as `\+ ` when you are writing markdown, or set the list as plain text. The reader should see a plus, not a bullet.

Example:
```
+ Capital
+ Coaching  
+ Connections
```

Never use `•`, `-`, or `*` as list markers in LA.IO work.

**How to use bracket elements:**
- As framing devices: bracket important content or images
- As section dividers: a single `>` or `<` at scale between content blocks
- Violating borders: allow the element to extend beyond its container — intentional cropping is on-brand
- As supergraphics: large-scale, often partially cropped, used compositionally not decoratively
- Scale freely — from small UI icons to full-bleed supergraphics
- Never scatter them as decoration without structural intent

---

## Layout and Visual Principles

### Core aesthetic: angular, restrained, precise
- The brand is angular and geometric, not rounded or organic
- Whitespace is used generously — never fill space for the sake of filling it
- Elements have structural purpose; decoration for its own sake is off-brand
- Layouts that feel "busy" have failed

### Light vs. dark
- High-impact contexts (hero sections, event pages, presentations): dark background + light/electric accent
- Functional contexts (dashboards, forms, reports): light background (near-white or Easy Gray) + dark type + brand accent for interactive elements
- Never use mid-range values as backgrounds — commit to dark or light

### Component design principles
- Borders and dividers: use accent color (Easy or Electric stop) as a single-pixel or 2px line, not as a fill
- Cards: dark background, light type, accent border — or light background, dark type, accent border. Either is correct.
- Buttons: flat, angular (no border-radius or small radius only), brand color fill or outline
- Navigation: spare, no gradients, dark preferred for primary nav
- No rounded pill shapes except on badge/tag elements specifically designed as such

### Photography and imagery
When selecting or prompting for photography:
- Real people, real work, real Louisiana locations — no stock aesthetic
- Industrial, agricultural, maritime, technological environments
- Aerial/wide shots that establish scale
- Never tourist-coded imagery: no French Quarter, no Mardi Gras, no generic "Southern" aesthetics
- Bracket design elements can be overlaid on photography as framing devices

---

## Audiences and How to Write for Them

**Founders and startups:** Direct, no fluff. They can smell positioning language. Give them signal, not persuasion.

**Investors:** Data-adjacent, concrete. Show expertise and scale. Don't oversell the opportunity — they'll evaluate it themselves.

**State government / policy:** Clear, formal enough to be credible, progressive enough to be interesting. Avoid buzzwords in either direction (tech-hype or government-speak).

**Economic development orgs:** Peer-to-peer. They know what LA.IO is. Speak to alignment, not education.

**National press and media:** The hook is the unexpected truth. Louisiana innovation at humanity scale is the story. Don't explain too much — let the facts do it.

**Corporate partners:** Professional, outcome-focused. What does partnership with Louisiana's ecosystem get them?

**General Louisiana public:** Proud but not chest-thumping. Grounded. "Yeah, of course we do this" energy.

---

## What LA.IO Projects Look Like

Every project — regardless of type — should pass this check:

1. Does it increase clarity or reduce it?
2. Does it respect the audience's intelligence?
3. Does it feel like it belongs to a forward-looking innovation ecosystem?
4. Is it trying too hard? (If yes, cut it back.)
5. Would it fit on a wall in a Baton Rouge shipyard and also in a London transit ad? (The brand has to work in both places.)

**For microsites and landing pages:** Lead with a strong typographic headline. Let photography do emotional work. Keep copy sparse. Use one color family throughout.

**For internal dashboards:** Functional first. Brand color as accent only — not decoration. Dark theme preferred.

**For event pages:** This is where the brand can be loudest. Full dark treatment, large-scale design elements, electric accent colors.

**For partner-facing tools:** Credibility over flair. Blue or gray family. Clean, functional, confidence-signaling.

**For presentations and decks:** One color family per deck. Strong headline typesetting. Photography + bracket design elements as compositional tools.

---

## The Badge System

LA.IO maintains an embeddable badge system at `https://badgebuilder.la.io`. Partner organizations embed these badges to signal ecosystem membership.

Badge embed example:
```html
<script async src="https://badgebuilder.la.io/badge.js"
        data-slug="partner-name"
        data-size="m"
        data-layout="pill"
        data-bg-color="#01233C"
        data-fg-color="#63DCDE"></script>
```

Badge layouts: `standard`, `pill`, `horizontal`
Badge sizes: `s`, `m`, `l`, `auto`

When building projects that involve partner representation, use the badge system rather than recreating partner logos manually.

---

## Providing Design Assets for Interpretation

The bracket mark system is generative — the elements can be combined, scaled, cropped, and rotated to create a wide range of compositions. To give the AI useful reference:

**Preferred method: organized SVG directory**
Export each mark as a standalone SVG (single path, fill `#231F20`, no artboard background) and place in `/public/assets/marks/`. The naming convention matters — use descriptive names that communicate the element's form and intended use (e.g., `bracket-left.svg`, `corner-tl.svg`, `cross.svg`).

**For compositional reference**
When a specific composed layout should be referenced (bracket framing a photo, oversized chevron as a section divider), provide a flat PNG or SVG of that composition labeled clearly. Place in `/public/assets/reference/`. These are not production assets — they are interpretive reference for the AI and for human collaborators.

**What the AI can do with base SVGs**
- Apply any brand color via `fill` attribute or CSS
- Scale to any size
- Crop using `overflow: hidden` on a container
- Combine elements to construct `+` marks at any scale from four corner pieces
- Rotate (chevrons become arrows in any direction)

**What the AI cannot do without reference**
- Know your intent for a specific composition
- Understand which bracket scale feels right for a given layout
- Replicate a specific "brand in action" execution without seeing it

When a specific look matters, provide a reference image alongside the base SVG.

---

## Quick Reference: Things to Always Do

- Stay in one color family per layout
- Use Aktiv Grotesk; bias toward Light or Bold weights
- Lead with fact, not persuasion
- Trust the audience to connect dots — don't over-explain
- Use design elements (brackets, chevrons) with structural intent
- Keep copy spare; if a sentence doesn't earn its place, cut it
- Angular geometry, generous whitespace, committed color (dark or light)

## Quick Reference: Things to Never Do

- Mix color families without a strong reason
- Use "resilience," "resilient," "Silicon Bayou," "innovative solutions," or "disrupting"
- Acknowledge a negative perception before making the positive case
- Use cultural Louisiana clichés (jazz, food, Mardi Gras, etc.) as a lead
- Use em dashes in copy
- Use "it's not X, it's Y" framing
- Round corners on elements that should be angular
- Add decoration that doesn't serve structure
- Oversell — state the case, then stop