# LA.IO Components Copy-paste building blocks for LA.IO projects. Each block has a **React** version (for Claude Code / app projects) and, where useful, a **plain HTML/CSS** version (for Claude Design, artifacts, emails, decks). All follow the brand: angular, one color family, `+` bullets, Aktiv Grotesk + JetBrains Mono. Pick one color family per project (see `SKILL.md`). Examples below use the **Magenta** family (`#101948` / `#E385FE` / `#F629CB`) — swap the three hexes to re-skin. --- ## 1. Setup — fonts, tokens, Tailwind **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: + **Embedded:** paste the contents of `laio-fonts-inline.css` into a ` ``` **Base CSS:** ```css :root { --font-laio: 'Aktiv Grotesk', 'Roboto', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius-laio: 2px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-laio); font-weight: 400; -webkit-font-smoothing: antialiased; } ``` **`tailwind.config.js`:** ```js /** @type {import('tailwindcss').Config} */ export default { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: { extend: { 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', 'white': '#FFFFFF', }, }, fontFamily: { laio: ['Aktiv Grotesk', 'Roboto', 'system-ui', 'sans-serif'], 'laio-mono': ['JetBrains Mono', 'monospace'], }, borderRadius: { laio: '2px', 'laio-tag': '3px' }, }, }, plugins: [], } ``` **`src/lib/laio-colors.js`:** ```js export const LAIO_COLORS = { 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' }, }; ``` --- ## 2. Logo React: use the bundled `assets/LaioLogo.jsx` (inline SVG, `fill` + `width` props). ```jsx import LaioLogo from './LaioLogo'; // Easy magenta on dark // white on dark ``` On a real site or app: ```html LA.IO — Louisiana Innovation ``` Inside an artifact, preview, or anything sandboxed: ```html
``` Set color on the parent. External URLs do not load in sandboxed previews. --- ## 3. Eyebrow (mono label) Always all caps, accent color, JetBrains Mono. Never white/gray as standalone text. Never body copy. ```jsx function Eyebrow({ children, color = '#E385FE' }) { return ( {children} ); } ``` ```html Louisiana Innovation ``` --- ## 4. `+` List (the brand bullet) Never `•`, `-`, or `*`. ```jsx function LaioList({ items, accent = '#E385FE' }) { return ( ); } // The three pillars: ``` ```css ul.laio-list { list-style: none; padding: 0; } ul.laio-list li { display: flex; gap: 8px; margin-bottom: 8px; } ul.laio-list li::before { content: '+'; font-weight: 700; color: #E385FE; } ``` --- ## 5. Button Flat, angular (2px radius max), no gradients, no shadows. Aktiv Grotesk Bold, slight tracking. ```jsx function Button({ variant = 'primary', color = '#E385FE', children, onClick }) { const base = { padding: '10px 24px', borderRadius: '2px', cursor: 'pointer', fontFamily: 'var(--font-laio)', fontWeight: 700, letterSpacing: '0.04em', }; const styles = { primary: { ...base, background: color, color: '#101948', border: 'none' }, outline: { ...base, background: 'transparent', color, border: `1.5px solid ${color}` }, ghost: { ...base, background: 'transparent', color, border: 'none' }, }; return ; } ``` --- ## 6. Hero Full-bleed, dark, min 70vh. Eyebrow (mono, accent) → headline (Aktiv Bold/Light, clamp 48–96px, white) → optional subhead (Regular, white) → CTA. Optional cropped bracket supergraphic. ```jsx function Hero({ eyebrow, headline, subhead, cta, bg = '#101948', accent = '#E385FE' }) { return (
{eyebrow && {eyebrow}}

{headline}

{subhead &&

{subhead}

} {cta &&
{cta}
}
); } ``` --- ## 7. Stat card Accent left-border (3px), no radius, no shadow. Mono label, bold value. ```jsx function StatCard({ label, value, unit, accent = '#E385FE' }) { return (
{label}
{value}{unit}
); } ``` --- ## 8. Nav Horizontal, spare, no gradients. Dark: dark-family bg, white logo, links go accent on hover. ```jsx function Nav({ links = [], cta, bg = '#101948', accent = '#E385FE' }) { return ( ); } ``` --- ## 9. Footer Minimal: logo, optional descriptor, optional links. No multi-column dump unless the project needs it. ```jsx function Footer({ bg = '#101948', descriptor = true }) { return ( ); } ```