Ahimsa · अहिंसा · v3.1.0

Nothing here is designed to grab you.

Ahimsa is a design system rooted in non-harm. It ships color, type, space and motion, ten primitives, and an explicit list of the things it refuses to build.

Foundations Read the principles

The premise

One sentence, and everything follows from it

If a design pattern requires the user to lose for the product to win, this system will not produce it.

Ahimsa (Sanskrit अहिंसा, ahiṃsā) is the ethical principle of causing no harm. Applied to design, it means refusing the whole vocabulary of extractive UX: no dark patterns, no manufactured urgency, no shame-based nudges, no red badge dots.

It is for any visual interface — phone apps, desktop apps, the web, wearables, kiosks — wherever the product's success genuinely correlates with the user's wellbeing. The decisions live in the tokens and the refusals, not in a platform; the CSS is the reference implementation, and tokens.json carries the same values to anything else.

Two aesthetics

Day and Night

Both are the same system. They share the spacing grid, the corner radii, the size scale and the easing curves exactly; what changes is color, the voice of the type, and how a surface establishes its edge. Night keeps every hue Day chose, one step lighter; and the type is the same in both.

Ahimsa Day

Paper, never white. Ink, never black.

The italic serif carries what is felt.

Editorial and unhurried. Wide-tracked small caps carry what is known, soft white clouds drift over a light gray sky, and depth is soft paper shadow.

Ahimsa Night

Midnight, never pure black. Frost, never pure white.

The same italic serif carries what is felt.

The same voice as Day, lit from the other side. A faint field of stars sits behind it, and depth is hairline and glow rather than shadow.

Switch the aesthetic with the control in the header. With no choice made, the site follows your operating system's appearance — see how.

Getting started

One stylesheet and a class on <html>

Put the theme class on <html> rather than <body>, so the page background resolves too.

<!-- one theme -->
<link rel="stylesheet" href="ahimsa-day.css">
<html lang="en" class="ahimsa-day">

<!-- both, switchable at runtime -->
<link rel="stylesheet" href="ahimsa.css">
<html lang="en" class="ahimsa-night">

Copy fonts/ alongside it, license texts included. Nothing is ever fetched from a CDN: a remote font stops working on a plane and tells a third party who is using your app.

The short version

What this system will not build

No red. There is no danger token in either aesthetic. Errors are warm clay or warm copper, because a person who hit a problem has not done something wrong.
Nothing appears unasked. No banners, no modals on load, no notification badges, no floating "update available" bar. Version news lives in Settings, behind a control you press.
No numbers as pressure. No streaks, no scores, no counts framed as scarcity.
Leaving weighs the same as continuing. Every escape hatch is a real control at equal metrics, never gray text.
No emoji, no icon set. Type and space carry the meaning.

The full list, with the reasoning →