What is Lism CSS?
Lism CSS is a lightweight CSS design framework for building beautiful, well-structured websites with rhythm and precision. At its core is a single CSS file organized around design theory, with no build step or configuration required.
It brings together typography with a pleasant rhythm, layout primitives that let you assemble wireframes quickly, and responsive utilities powered by CSS variables. Inspired by Every Layout and Tailwind CSS, it is built as an original CSS design system.
From base styling to @layer structure, tokens, and naming conventions, it takes care of the CSS design of your entire site. Since all you need is a single CSS file, it works on plain HTML sites too.
Alongside the core lism-css, we offer the UI component library @lism-css/ui, the lism-cli CLI, and the @lism-css/mcp MCP server — all free and open source (MIT). This page is a showcase of representative sections you can build with Lism CSS.
Core Capabilities
Layout Design Support
Stack, Flex, Grid, and other layout-focused primitives are ready to use. Build the skeleton first, just like sketching a wireframe, and end up with markup that holds together at any screen width.
Design Token Architecture
Typography and spacing are built on CSS variables based on a harmonic modular scale. With Property Classes, each mapped to a single CSS property, you can apply the same tokens directly with short class names.
AI-Integrated Workflow
AI-coding Skills and @lism-css/mcp, an MCP server, are included. Your AI can write code while referencing the Lism CSS design rules and documentation, so the coding style stays consistent.
UI Kit & Template Setup
@lism-css/ui offers accordions, tabs, modals, and more. With lism-cli, you can create a project from a template, or copy UI components into your project and customize them.
Selected Projects
The following are fictional project examples, written as if built with Lism CSS layout primitives and design tokens.
Documentation Site Redesign
A documentation site restructured to explain setup steps and design concepts clearly upfront. Navigation is organized so readers can jump straight to the guides on primitives and tokens.
Design System Landing Page
An LP that turns three selling points — lightweight, layout, and React/Astro support — directly into its headings. Scroll effects are implemented with CSS dedicated to this page alone.
Blog Template Implementation
A blog template built by stacking article layouts with Stack. Images are lazy-loaded, and body text is kept to a comfortable line length.
UI Component Gallery
A gallery that presents @lism-css/ui accordions and modals side by side with usage notes. Each component can be tried out right on the page.
Corporate Site Rebuild
A corporate site with its layout rebuilt using Stack and Grid. Colors are set with semantic tokens, so brand color changes are quick to apply.
Developer Onboarding Hub
An onboarding page that walks through everything from installation to Skills and MCP setup on a single page. Detailed specs link to the relevant chapters of the official docs.
Latest Updates
Ecosystem Spotlight: @lism-css/ui
An overview of the UI components available in @lism-css/ui, including accordions, tabs, and modals. They work with both React and Astro. See also the Changelog for details.
Ecosystem Spotlight: @lism-css/mcp
@lism-css/mcp is an MCP server for AI coding tools. Setup instructions are covered in the "MCP Server" chapter of the official docs.
Getting Started: No Build Step Required
Lism CSS works as soon as you load a single CSS file. This guide walks through each stage, from installing via npm to customizing with SCSS overrides and lism.config.js. See also the Changelog for details.
Key Takeaways from "Why Lism CSS?"
A fresh look at the Lism CSS philosophy: taking care of the CSS design of your entire site, from naming conventions and design tokens to @layer structure.
Common Questions
Lism CSS is a lightweight CSS design framework for building beautiful, well-structured websites with rhythm and precision. It provides typography, layout primitives, and utilities built on CSS variables. You can get started by loading a single CSS file.
It handles the CSS design of your entire site, from typography to layout and utilities, with one set of rules. It draws inspiration from the layout primitives and harmonic modular scaling of Every Layout, the per-property utilities of Tailwind CSS, and the component ergonomics of Chakra UI and MUI.
Yes. The lism-css package includes dedicated components for React and Astro, letting you set layouts and responsive styles through props. You can also use the UI components from @lism-css/ui.
Yes. All packages are free and open source under the MIT license. For full terms, please check the license in each repository.
You can customize Lism CSS by overriding SCSS settings or using lism.config.js. For details, see "Customization Basics" in the official docs.
Please report them via Issues in the GitHub repository of each package. This page is a demo showcase and does not accept inquiries.
What Users Say
Fewer review comments, smaller diffs
Our team aligned on naming conventions and how to use @layer, and inconsistencies in how we write code disappeared. Review comments have dropped, and diffs have gotten smaller too.
Tokyo / 30s / Frontend Engineer
Design and implementation finally speak the same language
The typography and spacing tokens we define in design can be applied as-is in code with Property Classes. Spacing instructions are far more consistent now.
Osaka / 40s / UI Designer
No more spec-check loops with MCP
With @lism-css/mcp, the AI checks the specs on the spot, so I switch between the docs and my editor much less often.
Fukuoka / 20s / Independent Developer
From template to launch in record time
Starting from a template, I could build pages just by combining primitives. Once the layout approach clicked, getting to launch took no time at all.
Aichi / 30s / Markup Engineer
Fewer dead ends on Astro projects too
Dedicated components for Astro let me get hands-on from day one. Being able to set layouts through props is really convenient.
Hokkaido / 30s / Full-Stack Engineer
Started small, scaled incrementally
We started by simply loading the CSS, then brought in SCSS overrides and lism.config.js as we needed them. Since @lism-css/ui can be added later too, it was easy to pitch to other teams.
Okinawa / 40s / Tech Lead
Company Overview
- Organization
- LismInc (a fictional company for demo purposes)
- Address
- 1-1-1 Marunouchi, Chiyoda-ku, Tokyo (map is a sample Google Maps embed)
- Packages
- lism-css, @lism-css/ui, lism-cli, and @lism-css/mcp. For the latest information, check the official documentation and each GitHub repository.
- Contact
- Please get in touch through the channels listed in each repository. The address and organization name in this section are fictional.
- Activities
- Development and distribution of the CSS design framework "Lism CSS" and related packages — all free and open source (MIT).
Get in Touch
This section is for demo purposes. Lism CSS can be adopted by loading a single CSS file, and dedicated components for React and Astro are also available. See the official documentation for details.