# assets.la.io

> The LA.IO (Louisiana Innovation) brand system, served as public URLs with open CORS.
> Fetch what you need. Every file is current and permanent.

If you are an AI assistant asked to produce LA.IO work, read ai/CLAUDE.md first. It carries
the voice rules, banned language, color families, type rules, and asset URLs. It is short.

## Start here

The whole kit is also served as an MCP connector at https://assets.la.io/mcp. A Claude
organization adds it once and every chat can pull the logo, colors, fonts and voice rules
as tools. Setup steps are at https://assets.la.io/ai#connect.

- [ai/CLAUDE.md](https://assets.la.io/ai/CLAUDE.md): Brand instructions for any AI. Read this before generating anything.
- [ai/AGENTS.md](https://assets.la.io/ai/AGENTS.md): The same file, for tools that look for AGENTS.md.

## Docs

- [ai/laio-brand/BRAND.md](https://assets.la.io/ai/laio-brand/BRAND.md): Full brand system. The long form. Load when the work needs depth.
- [ai/laio-brand/COMPONENTS.md](https://assets.la.io/ai/laio-brand/COMPONENTS.md): Component code. Buttons, cards, eyebrows, and layout patterns as code.
- [ai/laio-brand/VOICE.md](https://assets.la.io/ai/laio-brand/VOICE.md): Voice guide. Speaker profiles, the full ban list, and the standing rules for AI work.
- [ai/laio-brand.zip](https://assets.la.io/ai/laio-brand.zip): Packaged skill. The whole kit as a Claude skill. Unzip into ~/.claude/skills/.
- [ai/claude-ai-project-setup.md](https://assets.la.io/ai/claude-ai-project-setup.md): claude.ai Project setup. Custom instructions and knowledge files for a Claude Project.
- [ai/claude-design-setup.md](https://assets.la.io/ai/claude-design-setup.md): Claude Design setup. The three form fields that set up the LA.IO Design System from this repo.
- [ai/lovable/LAIO_LOVABLE_GUIDE.md](https://assets.la.io/ai/lovable/LAIO_LOVABLE_GUIDE.md): Lovable guide. How to start an LA.IO project in Lovable.
- [ai/lovable/LOVABLE_CUSTOM_INSTRUCTIONS.md](https://assets.la.io/ai/lovable/LOVABLE_CUSTOM_INSTRUCTIONS.md): Lovable workspace instructions. Brand rules for every project in a Lovable workspace.
- [ai/lovable/LOVABLE_STARTER_PROMPT.md](https://assets.la.io/ai/lovable/LOVABLE_STARTER_PROMPT.md): Lovable starter prompt. The first message that builds the LA.IO starter template.
- [ai/lovable/LOVABLE_STARTER_TEMPLATE_SPEC.md](https://assets.la.io/ai/lovable/LOVABLE_STARTER_TEMPLATE_SPEC.md): Lovable starter template spec. What the starter template contains and how it is wired.

## Color

- [colors/laio-tokens.json](https://assets.la.io/colors/laio-tokens.json): All five color families as JSON. Hex, RGB, brand names.
- [colors/laio-colors.css](https://assets.la.io/colors/laio-colors.css): The same values as CSS custom properties.
- [colors/laio-cmyk.json](https://assets.la.io/colors/laio-cmyk.json): CMYK builds for print. GRACoL 2013 coated and SNAP 2007 newsprint, rich blacks, and the out-of-gamut notes.
- [colors/LA_IO_COLORS_RGB.ase](https://assets.la.io/colors/LA_IO_COLORS_RGB.ase): The RGB swatch master for Adobe apps.

## Type

Aktiv Grotesk, 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:

- [fonts/laio-fonts-inline.css](https://assets.la.io/fonts/laio-fonts-inline.css): Embedded. Paste the contents 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.
- [fonts/laio-fonts.css](https://assets.la.io/fonts/laio-fonts.css): 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

The individual woff2 files behind laio-fonts.css:

- [fonts/AktivGrotesk_Th.woff2](https://assets.la.io/fonts/AktivGrotesk_Th.woff2): Aktiv Grotesk Thin, weight 100.
- [fonts/AktivGrotesk_ThIt.woff2](https://assets.la.io/fonts/AktivGrotesk_ThIt.woff2): Aktiv Grotesk Thin Italic, weight 100.
- [fonts/AktivGrotesk_Lt.woff2](https://assets.la.io/fonts/AktivGrotesk_Lt.woff2): Aktiv Grotesk Light, weight 300.
- [fonts/AktivGrotesk_LtIt.woff2](https://assets.la.io/fonts/AktivGrotesk_LtIt.woff2): Aktiv Grotesk Light Italic, weight 300.
- [fonts/AktivGrotesk_Rg.woff2](https://assets.la.io/fonts/AktivGrotesk_Rg.woff2): Aktiv Grotesk Regular, weight 400.
- [fonts/AktivGrotesk_It.woff2](https://assets.la.io/fonts/AktivGrotesk_It.woff2): Aktiv Grotesk Italic, weight 400.
- [fonts/AktivGrotesk_SBd.woff2](https://assets.la.io/fonts/AktivGrotesk_SBd.woff2): Aktiv Grotesk Semibold, weight 600.
- [fonts/AktivGrotesk_Bd.woff2](https://assets.la.io/fonts/AktivGrotesk_Bd.woff2): Aktiv Grotesk Bold, weight 700.
- [fonts/AktivGrotesk_BdIt.woff2](https://assets.la.io/fonts/AktivGrotesk_BdIt.woff2): Aktiv Grotesk Bold Italic, weight 700.
- [fonts/AktivGrotesk_XBd.woff2](https://assets.la.io/fonts/AktivGrotesk_XBd.woff2): Aktiv Grotesk XBold, weight 800.
- [fonts/AktivGrotesk_XBdIt.woff2](https://assets.la.io/fonts/AktivGrotesk_XBdIt.woff2): Aktiv Grotesk XBold Italic, weight 800.
- [fonts/AktivGrotesk_Blk.woff2](https://assets.la.io/fonts/AktivGrotesk_Blk.woff2): Aktiv Grotesk Black, weight 900.
- [fonts/AktivGrotesk_BlkIt.woff2](https://assets.la.io/fonts/AktivGrotesk_BlkIt.woff2): Aktiv Grotesk Black Italic, weight 900.

JetBrains Mono for 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

## Logos

All artwork ships black (#231F20) on transparent. Recolor with CSS. Do not edit the artwork.

- [logos/LAIO-COMPLETE.svg](https://assets.la.io/logos/LAIO-COMPLETE.svg): The default, everywhere. Use this unless a rule below says otherwise.
- [logos/LAIO-ICON.svg](https://assets.la.io/logos/LAIO-ICON.svg): The stacked LA/IO monogram. Favicons, app icons, avatars, any square slot. Never in place of the lockup in layout.
- [logos/LAIO-BASE.svg](https://assets.la.io/logos/LAIO-BASE.svg): Only when the mark is under about 120px wide and the subtext would be illegible.
- [logos/LAIO-HORZ.svg](https://assets.la.io/logos/LAIO-HORZ.svg): Only in a header or nav bar.
- [logos/LOUISIANA-INNOVATION-A.svg](https://assets.la.io/logos/LOUISIANA-INNOVATION-A.svg): Secondary mark, stacked. Under or beside the primary, never alone.
- [logos/LOUISIANA-INNOVATION-B.svg](https://assets.la.io/logos/LOUISIANA-INNOVATION-B.svg): Secondary mark, condensed. Under or beside the primary, never alone.
- [logos/DIVISION-LINE.svg](https://assets.la.io/logos/DIVISION-LINE.svg): Secondary mark. Sits under the primary, never alone.
- [logos/LED-WHITE.svg](https://assets.la.io/logos/LED-WHITE.svg): Louisiana Economic Development. The default, on dark grounds.
- [logos/LED-BLACK.svg](https://assets.la.io/logos/LED-BLACK.svg): On light grounds. Recolor to the family dark.
- [logos/LED-SMALL-WHITE.svg](https://assets.la.io/logos/LED-SMALL-WHITE.svg): The compact LED lockup, on dark grounds.
- [logos/LED-SMALL-BLACK.svg](https://assets.la.io/logos/LED-SMALL-BLACK.svg): The compact LED lockup, on light grounds.

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.

## Motifs

- [motifs/LAIO-PLUS.svg](https://assets.la.io/motifs/LAIO-PLUS.svg): Plus motif.
- [motifs/LAIO-X.svg](https://assets.la.io/motifs/LAIO-X.svg): X motif.
- [motifs/LAIO-DIAMOND.svg](https://assets.la.io/motifs/LAIO-DIAMOND.svg): Diamond motif.
- [motifs/LAIO-DIAMOND-EMPTY.svg](https://assets.la.io/motifs/LAIO-DIAMOND-EMPTY.svg): Diamond outline motif.
- [motifs/LAIO-LEFT-BRACKET.svg](https://assets.la.io/motifs/LAIO-LEFT-BRACKET.svg): Left bracket motif.
- [motifs/LAIO-RIGHT-BRACKET.svg](https://assets.la.io/motifs/LAIO-RIGHT-BRACKET.svg): Right bracket motif.
- [motifs/LAIO-UP-BRACKET.svg](https://assets.la.io/motifs/LAIO-UP-BRACKET.svg): Up bracket motif.
- [motifs/LAIO-DOWN-BRACKET.svg](https://assets.la.io/motifs/LAIO-DOWN-BRACKET.svg): Down bracket motif.
- [motifs/LAIO-BRACKET-CORNER-1.svg](https://assets.la.io/motifs/LAIO-BRACKET-CORNER-1.svg): Corner 1 motif.
- [motifs/LAIO-BRACKET-CORNER-2.svg](https://assets.la.io/motifs/LAIO-BRACKET-CORNER-2.svg): Corner 2 motif.
- [motifs/LAIO-CORNER-L.svg](https://assets.la.io/motifs/LAIO-CORNER-L.svg): L-corner motif.
- [motifs/LAIO-SQUARE.svg](https://assets.la.io/motifs/LAIO-SQUARE.svg): Square motif.
- [motifs/LAIO-SQUARE-EMPTY.svg](https://assets.la.io/motifs/LAIO-SQUARE-EMPTY.svg): Square outline motif.
- [motifs/LAIO-FIELD-DIAGONAL.svg](https://assets.la.io/motifs/LAIO-FIELD-DIAGONAL.svg): Diagonal field motif.
- [motifs/LAIO-HATCH.svg](https://assets.la.io/motifs/LAIO-HATCH.svg): Hatch tile motif.
- [motifs/LAIO-WIRE-NODE.svg](https://assets.la.io/motifs/LAIO-WIRE-NODE.svg): Wire node motif.

## Pages

- [ai](https://assets.la.io/ai): Brand Kit for AI. Setup for Claude, Claude Design, Claude Code, Cowork, Lovable, and any other AI, plus every asset with a copy button.
- [labs](https://assets.la.io/labs): Louisiana Innovation Labs sub-brand identity assets.
- [illustrator](https://assets.la.io/illustrator): Generates original illustration in the LA.IO system.

## Rules that apply to all LA.IO work

- Bullets are always `+`. Never a bullet character, hyphen, or asterisk. In markdown, escape it as `\+ ` so it renders as a plus instead of becoming a list bullet.
- Never use em dashes.
- Never write "resilient", "Silicon Bayou", or "it's not X, it's Y".
- One color family per project. Do not mix families.
- Border radius is 0 on structural elements.