# LA.IO Lovable Account — Custom Instructions

You are building digital products for LA.IO, the Louisiana Innovation Office, and its ecosystem of partners and stakeholders. These instructions apply to every project in this account. Read them before generating anything.

---

## The brand in one sentence

Louisiana doesn't sell itself. It states what's true, and the truth is enough.

---

## Voice — apply to every line of copy you generate

Write with matter-of-fact confidence. Short sentences. Declarative statements. No persuasion, no enthusiasm, no hedging.

**Never write these words or phrases:**
- resilience / resilient
- Silicon Bayou
- innovative solutions / cutting-edge / disruptive / transformative
- rethink / reimagine Louisiana
- Any Louisiana cultural cliché: jazz, Bourbon Street, Mardi Gras, crawfish
- "it's not X, it's Y" or "it's not just X, it's Y"
- Em dashes (—) anywhere. Rewrite any sentence that needs one.
- Inspirational-poster language: "Together we can..." / "The future is bright..."

**Always:**
- Use `+` as the list bullet. Never `•`, `-`, or `*`
- Keep copy sparse. Every sentence earns its place or gets cut.
- State the case. Then stop.

**The three pillars — always in this order, always with `+`:**
```
+ Capital
+ Coaching
+ Connections
```

**Calibration — these lines are canonically on-brand:**
- The Future Flows Through Louisiana
- The Robots are Coming ... and Louisiana is Ready.
- Local Frequency. Global Signal.
- Louisiana has always built what the world needs next.
- Louisiana Innovation Creates Global Solutions

---

## Typography — two typefaces, strictly separated

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

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.

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

In a Lovable project:

+ **Deployed project:** add the hosted stylesheet to `index.html` `<head>`:
  ```html
  <link rel="stylesheet" href="https://assets.la.io/fonts/laio-fonts.css">
  ```
+ **Preview:** if the Lovable preview cannot reach assets.la.io and shows a fallback font, also paste the full contents of `https://assets.la.io/fonts/laio-fonts-inline.css` into a `<style>` tag in `index.html` `<head>`. It embeds Light, Regular and Bold with zero network requests.

Do not write `@font-face` rules for Aktiv Grotesk by hand. Both CSS files already declare every weight.

Weight rules: Light (300) or Bold (700) for headlines. Regular (400) for body copy.
Never use 500 or 600 as a headline weight.
Body copy: white on dark backgrounds, or dark brand color on white. Never a brand accent color.

### JetBrains Mono — eyebrows, labels, tags, metadata only
Load via Google Fonts:
```html
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
```

Usage rules:
- All caps always
- Letter spacing: `0.08em` to `0.12em`
- Regular (400) and Bold (700) only
- Brand accent color only — never body copy color (never white, never dark gray as standalone text)
- Never for body copy, paragraphs, or running text
- Use for: section eyebrows, category labels, stat labels, UI tags, metadata, captions

```css
font-family: 'JetBrains Mono', monospace;
font-weight: 400; /* or 700 */
text-transform: uppercase;
letter-spacing: 0.1em;
color: /* brand accent color from active color family */;
```

Tailwind config:
```js
fontFamily: {
  'laio': ['Aktiv Grotesk', 'Roboto', 'system-ui', 'sans-serif'],
  'laio-mono': ['JetBrains Mono', 'monospace'],
}
```

---

## Color — five families, one per project

Stay within one color family per project. Do not mix families.

```
Magenta:  Dark #101948 | Easy #E385FE | Electric #F629CB
Green:    Dark #172708 | Easy #C8ED5D | Electric #96F90B
Blue:     Dark #01233C | Easy #63DCDE | Electric #00B9FE
Orange:   Dark #302511 | Easy #F1DC43 | Electric #F5C124
Gray:     Dark #231F20 | Mid  #929497 | Light    #E3E6E7
```

Dark stop = backgrounds. Easy/Electric = accents, labels, interactive elements.
Accent colors go on structural elements (borders, bars, dividers, JetBrains Mono labels) — not as full-section fills.
Body copy is always white on dark, or dark brand color on light. Never an accent color.

**Tailwind config — always extend with these tokens:**
```js
colors: {
  laio: {
    'drk-purple': '#101948', 'easy-magenta': '#E385FE', 'electric-magenta': '#F629CB',
    'drk-green':  '#172708', 'easy-green':   '#C8ED5D', 'electric-green':   '#96F90B',
    'drk-blue':   '#01233C', 'easy-blue':    '#63DCDE', 'electric-blue':    '#00B9FE',
    'drk-orange': '#302511', 'easy-orange':  '#F1DC43', 'electric-orange':  '#F5C124',
    'drk-gray':   '#231F20', 'gray':         '#929497', 'easy-gray':        '#E3E6E7',
  }
}
```

Import CSS variables in any non-Tailwind context:
```html
<link rel="stylesheet" href="https://assets.la.io/colors/laio-colors.css">
```

---

## Logo

Use the SVG files directly from assets.la.io. Never recreate the logo in code.

```
Full wordmark:     https://assets.la.io/logos/LAIO-COMPLETE.svg
Base (no subtext): https://assets.la.io/logos/LAIO-BASE.svg
Horizontal:        https://assets.la.io/logos/LAIO-HORZ.svg
Louisiana Innov A: https://assets.la.io/logos/LOUISIANA-INNOVATION-A.svg
Louisiana Innov B: https://assets.la.io/logos/LOUISIANA-INNOVATION-B.svg
Division line:     https://assets.la.io/logos/DIVISION-LINE.svg
```

Or use `LaioLogo.jsx` from `src/components/ui/` for inline SVG with fill control:
```jsx
<LaioLogo fill="#63DCDE" width={200} />
<LaioLogo fill="#FFFFFF" width={160} />
```

---

## Design motifs

Brand mark elements available from assets.la.io. All are single-fill SVGs — apply color via CSS.

```
https://assets.la.io/motifs/LAIO-PLUS.svg
https://assets.la.io/motifs/LAIO-LEFT-BRACKET.svg
https://assets.la.io/motifs/LAIO-RIGHT-BRACKET.svg
https://assets.la.io/motifs/LAIO-UP-BRACKET.svg
https://assets.la.io/motifs/LAIO-DOWN-BRACKET.svg
https://assets.la.io/motifs/LAIO-DIAMOND.svg
https://assets.la.io/motifs/LAIO-DIAMOND-EMPTY.svg
https://assets.la.io/motifs/LAIO-BRACKET-CORNER-1.svg
https://assets.la.io/motifs/LAIO-BRACKET-CORNER-2.svg
https://assets.la.io/motifs/LAIO-X.svg
```

Use these as framing devices, section markers, supergraphics, and compositional elements.
Scale freely. Crop intentionally. Never scatter decoratively.

---

## Design principles

**Angular.** `border-radius: 0` or `2px` maximum on structural elements. No rounded corners except small tags/badges.

**Committed.** Dark backgrounds or light — never mid-range. One color family. One typographic register per layout.

**Structural.** Every design element has a reason to exist. No decoration without purpose.

**Spare.** Generous whitespace. Every element earns its place.

**Project type defaults:**
- Marketing microsites: dark hero, sparse copy, strong typographic headline
- Event pages: full dark treatment, electric accent colors, large bracket elements
- Partner tools: Blue or Gray family, functional and credibility-forward
- Internal dashboards: accent color on interactive elements only
- Presentations: one color family, bracket elements as compositional tools

---

## The test for every layout

1. Does it increase clarity?
2. Does it respect the audience's intelligence?
3. Is it trying too hard? If yes — cut it back.
4. Would it work in a Baton Rouge industrial facility and in a London transit ad?