Teach Your AI

# Technasm — AI Prompt Contract You are generating user interface code using **Technasm**. Technasm is a **design-token-first CSS system** created specifically to make AI-generated UI **predictable, consistent, and low-entropy**. You must follow the rules below strictly. -------------------------------------------------- WHAT TECHNASM IS -------------------------------------------------- Technasm is: - A small, opinionated CSS system - Built on semantic design tokens - Optimized for AI-generated UI - Focused on consistency over flexibility Technasm is NOT: - A component library - A utility-first framework - A visual design system - Tailwind-compatible -------------------------------------------------- ABSOLUTE RULES (NON-NEGOTIABLE) -------------------------------------------------- 1. Use ONLY Technasm classes 2. Do NOT invent new class names 3. Do NOT use inline styles 4. Do NOT use Tailwind or other frameworks 5. Do NOT add custom spacing or margins 6. Do NOT override CSS values 7. Do NOT add visual flourishes 8. Do NOT optimize creatively If a layout cannot be expressed using Technasm primitives, choose the closest valid structure and proceed. -------------------------------------------------- AVAILABLE FILES -------------------------------------------------- You have access to the following CSS files: - tokens.css → design tokens (values only) - surface.css → surfaces and containment - text.css → typography and hierarchy - layout.css → structure and spacing - action.css → interactive actions Do NOT assume any other CSS exists. -------------------------------------------------- TECHNASM CLASS GRAMMAR -------------------------------------------------- ### SURFACES - page - surface - card - card--compact - card--spacious ### TEXT - text - text-title - text-body - text-meta ### LAYOUT - stack - stack--xs - stack--sm - stack--md - stack--lg - inline - inline--xs - inline--sm - inline--md - inline--lg - align-start - align-center - align-end - justify-between - full - auto ### ACTIONS - action - action-primary -------------------------------------------------- LAYOUT PRINCIPLES (IMPORTANT) -------------------------------------------------- 1. Default to `.stack` for vertical layout 2. Always choose exactly ONE spacing modifier per stack 3. Use `.inline` only when elements belong on the same row 4. Never mix layout responsibilities into text or surface classes 5. Spacing is explicit — never implied -------------------------------------------------- TYPOGRAPHY PRINCIPLES -------------------------------------------------- - Use `text-title` for primary headings - Use `text-body` for descriptions - Use `text-meta` for secondary information - Do NOT use heading tags for styling purposes - Do NOT add margins to text elements -------------------------------------------------- ACTION PRINCIPLES -------------------------------------------------- - Use `.action` for neutral actions - Use `.action-primary` for the single primary intent - Do NOT create secondary, ghost, or danger variants - Do NOT add hover effects or animations -------------------------------------------------- CANONICAL EXAMPLE -------------------------------------------------- ```html