CSS Design Framework
for AI and Humans

Build harmonious layouts with ease.
Refined CSS architecture starts here.

<h1 class="u--trim -fw:700 -fz -lh:xs -lts:s -ta:center" style="--fz: clamp(2rem, 0.6667rem + 5.3333vw, 4rem)">
  CSS Design Framework
  <br />
  for AI and Humans
</h1>
<p class="u--trim -fz:s -fz_sm -fz_md -lh:m -c:text-2 -ta:center -py:40" style="--fz_sm: var(--fz--m); --fz_md: var(--fz--l)">
  Build harmonious layouts with ease.
  <br />
  Refined CSS architecture starts here.
</p>
<div class="l--cluster -jc:center -g:15">
  <a class="l--flex -ai:center -p:10 -c:base -bdrs:20 -fw:500 -td:none -hl:s" href="/en/docs/installation/">
    <span class="-px:10">Get Started</span>
  </a>
  <button class="l--flex set--plain -ai:center -p:10 -bgc:base -bdrs:20 -bxsh:10 -hl:s" type="button" data-modal-open="search-modal">
    <span class="-px:10 -o:pp">Search documentation...</span>
    <span class="-px:10 -py:5 -c:text -bgc:base-2 -bdrs:10 -fz:s -lh:1 -lts:s -d:none -d_md -bd" style="--d_md: inline-block">
      ⌘K
    </span>
  </button>
</div>

The Tab key inserts indentation. To move focus out of the editor, press Escape and then Tab.

Features

A Sophisticated Design Theory

Lism CSS is a lightweight CSS framework for building pleasing layouts quickly and easily. We designed its CSS from the ground up to let a mathematically beautiful, harmonious rhythm emerge naturally in your designs.

Layout Primitives

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

Harmonic Scale

Spacing, font sizes, line heights, and more are designed with harmonic ratios. The included typography system naturally brings a pleasing rhythm to your designs.

Design Tokens

Values for colors, typography, spacing, border radius, shadows, and more are organized into scales and provided as CSS variables. They maintain consistency across your site and improve reusability.

Property Class

Each utility class corresponds to a single CSS property and is defined in the clear -prop:value format. This reduces confusion for AI and makes styling intuitive for people.

CSS Layer Architecture

A strict CSS layer design using @layer. It prevents specificity conflicts and helps you organize classes naturally by their roles, supporting both extensibility and maintainability.

Responsive

We developed a unique responsive approach combining classes (-prop_bp) and CSS variables (--prop_bp). It supports a wide range of layouts while keeping file sizes small.

Artificial Intelligence

AI Tool Integration

Lism CSS is designed with AI agents in mind. With an MCP server, Skills, and documentation that AI can easily read, AI coding agents like Claude Code, Codex, and Cursor can accurately understand the Lism system and generate code that matches your intent.

MCP Server

Connect the MCP server to let AI agents search and retrieve Lism CSS specifications. They can look up component usage, props, design tokens, and other information they need while coding.

Connect MCP →

Skills

Skills that teach AI agents how to use Lism CSS. By correctly understanding Lism CSS’s naming conventions and design principles, AI can generate accurate code that follows best practices.

Install Skills →

Templates