Skip to content
Artmode

Mono Clean

mono-clean

Black, white, one signal — and a lot of air.

A Swiss-inspired monochrome system for studios and portfolios: pure white and near-black, hairline rules, a strict grid, large tightly-tracked headlines, tiny mono labels and generous whitespace. One orange signal color is used sparingly (a dot, an underline, a hover). Motion is quick and precise. Nothing decorative that isn’t typographic.

Fonts
Instrument Sans · displayHanken Grotesk · bodyRed Hat Mono · mono
Demo product
Frame — The website builder for design studios — publish portfolios and case studies that look exactly like your work.
Palette

Use Mono Clean in your project

Installing any Mono Clean module brings its tokens. Then follow the one-time setup.

Setup guide

Sections 32

UI components 24

App layouts 12

Effects 16

Text4 variants

Animated

Digit Roll

Odometer-style number: each digit rolls vertically through 0–9 to its value (staggered from the left) when it enters the viewport, in tabular display figures.

Text
Animated

Outline Fill

Outlined display text (hairline stroke, transparent fill) that fills solid ink from bottom to top on hover/focus via a clipped duplicate layer — for big navigation links. Pure CSS.

Text
Animated

Scramble Text

Mono text that resolves from random glyphs to the real string left-to-right when it enters the viewport (and again on hover); final text is always exposed to assistive tech.

Text
Animated

Tracking In

Headline whose letter-spacing contracts from very wide to the tight display tracking while fading in — a calm, precise entrance for short words.

Text

Set up Mono Clean in your project

Once per project. Installing any Mono Clean module copies its tokens for you — or install them alone first. New to Artmode? Start with the getting started guide.

npx shadcn@latest add https://artmode.alpvisionweb.online/r/mono-clean-theme.json

1. Import the tokens

app/globals.css
@import "tailwindcss";
@import "../components/modules/_core/da-theme.css";
@import "../components/modules/mono-clean/tokens.css";

3. Scope the area

any page or layout
<div data-da="mono-clean">
  {/* Mono Clean modules */}
</div>

2. Load the fonts

app/layout.tsx
import { Instrument_Sans, Hanken_Grotesk, Red_Hat_Mono } from "next/font/google";

const monoCleanDisplay = Instrument_Sans({ subsets: ["latin"], variable: "--font-mono-clean-display" });
const monoCleanBody = Hanken_Grotesk({ subsets: ["latin"], variable: "--font-mono-clean-body" });
const monoCleanMono = Red_Hat_Mono({ subsets: ["latin"], variable: "--font-mono-clean-mono" });

// <html className={`${monoCleanDisplay.variable} ${monoCleanBody.variable} ${monoCleanMono.variable}`}>