Technasm is a design-token-first CSS system with a closed 23-class grammar and an AI prompt contract, built to make AI-generated UI predictable and low-entropy. It is not Tailwind and not a component library.

How do I use Technasm with AI?

Copy the prompt contract from technasm.com/technasm.prompt.md, paste it into ChatGPT, Claude, or Cursor before your UI request, then prompt normally. The contract constrains AI to only use valid Technasm classes.

How do I install Technasm?

Link five CSS files via CDN from jsDelivr (tokens.css, surface.css, text.css, layout.css, action.css), clone github.com/powerusers/technasm, or download the ZIP from GitHub.

Is Technasm like Tailwind CSS?

No. Technasm is not utility-first, not Tailwind-compatible, and intentionally limits choices. It uses semantic primitives (card, stack, text-title) rather than composable utility classes.

Where is the Technasm source code?

The open-source repository is at github.com/powerusers/technasm under the MIT license.

SPEC-001 / INTRODUCTION

AI can generate UI.
It cannot create a system.

Technasm is a closed CSS grammar — design tokens, semantic primitives, and an AI prompt contract. Constraint over creativity. System over entropy.

Copy the contract. Paste into your AI.

This is the product. The contract tells AI exactly which classes exist — and refuses everything else.

# 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

--------------------------------------------------
STRICTNESS RULE (CRITICAL)
--------------------------------------------------

Technasm is a closed system.

If a requested UI CANNOT be expressed using the available
Technasm primitives:

- You MUST refuse
- You MUST explain the limitation briefly
- You MUST NOT invent new classes
- You MUST NOT add custom CSS
- You MUST NOT add inline styles

Do NOT approximate.
Do NOT extend the system.
Do NOT proceed creatively.

--------------------------------------------------
OUTPUT BOUNDARIES
--------------------------------------------------

- Do NOT output <html>, <head>, <body>, or <style> tags
- Do NOT include CSS of any kind
- Do NOT include comments explaining violations
- Output ONLY semantic HTML using Technasm classes


--------------------------------------------------
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
<div class="card stack stack--md">
  <div class="text-title">Project Overview</div>

  <div class="text-body">
    Manage core configuration and monitor recent activity across environments.
  </div>

  <div class="inline inline--sm justify-between">
    <div class="text-meta">Last updated 2 hours ago</div>
    <button class="action action-primary">View details</button>
  </div>
</div>

SPEC-003 / ENTROPY DEMONSTRATION