Skip to content
Artmode

Minimal

minimal

Precise, quiet, fast — the Linear / Vercel school.

Hairline borders, small radii, near-invisible shadows and a single indigo accent. Dense, tightly-tracked Inter headlines, mono for data. Beautiful in dark mode first, equally crisp in light. Motion is short and expo-eased.

Fonts
Inter · bodyJetBrains Mono · mono
Demo product
Tracewise — Incident response for teams that ship fast — alert routing, on-call, status pages and postmortems in one place.
Palette

Use Minimal in your project

Installing any Minimal 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

Count Up

Number that counts up with an expo-out ease and tabular digits when scrolled into view; prefix, suffix, decimals and locale-aware thousands separators.

Text
Animated

Gradient Text

Inline text filled with a slowly flowing gradient built from the primary and accent tokens (bg-clip-text); animated or static. Pure CSS.

Text
Animated

Rotating Words

Headline with a static prefix and a highlighted word that slides up to the next one on an interval, inside a slot whose width animates to fit each word.

Text
Animated

Text Shimmer

Loading/live text effect: a light band sweeps across muted text using a clipped gradient. For "thinking…", "generating…" or live status labels. Pure CSS, server-safe.

Text

Set up Minimal in your project

Once per project. Installing any Minimal 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/minimal-theme.json

1. Import the tokens

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

3. Scope the area

any page or layout
<div data-da="minimal">
  {/* Minimal modules */}
</div>

2. Load the fonts

app/layout.tsx
import { Inter, JetBrains_Mono } from "next/font/google";

const minimalSans = Inter({ subsets: ["latin"], variable: "--font-minimal-sans" });
const minimalMono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-minimal-mono" });

// <html className={`${minimalSans.variable} ${minimalMono.variable}`}>