A CSS Design Framework
for AI and Humans

Lightweight and build-free. Works on any site.
You never have to worry about CSS architecture again.

FEATURES

A Sophisticated Design Theory

Layout Primitives

Common layout patterns like Stack, Flex, Grid, and Columns are provided as layout primitives. Combine them to build your site structure in no time.

Harmonic Scale

Spacing, font sizes, and line heights designed with harmonic ratios. A typography system that creates a natural, pleasing rhythm.

Design Tokens

Colors, font sizes, spacing, border radius, shadows and more — all managed as stepped CSS variables for site-wide consistency.

Property Class

Style quickly with intuitive class names like -fz:l and -p:20. A clear, concise notation that even AI can understand without confusion.

CSS Layer Architecture

A strict CSS layer design powered by @layer. Prevents specificity conflicts while maintaining both extensibility and maintainability.

Responsive

A unique responsive approach combining CSS variables and classes. Lightweight yet flexible enough for a wide range of layouts.

ECOSYSTEM

Skills

Implementation guide skills for AI agents. AI understands Lism CSS design principles and generates code following best practices.

MCP Server

Provides Lism CSS specifications to AI coding tools like Claude Code and Cursor. Build sites efficiently with AI collaboration.

UI Components

Interactive UI components like Accordion, Modal, Tabs, and Button for React and Astro. Add them to your project with a single CLI command.

Templates

Ready-to-use page templates. Copy practical layout parts for landing pages, blogs, and more to get started right away.

Lism CSS can be adopted by simply loading a single CSS file.