Skip to content
Artmode

Soft Flat

soft-flat

Friendly flat color, soft corners, zero noise.

Calm, approachable and flat: warm off-white canvas, pastel tinted blocks (peach, mint, lavender, butter) instead of borders, chunky rounded corners, diffuse low shadows and a rounded display face. Motion is short with a gentle bounce. Made for productivity and consumer-friendly SaaS.

Fonts
Nunito · displayDM Sans · bodyDM Mono · mono
Demo product
Planta — A friendly task and project planner for small teams — boards, weekly plans and gentle reminders.
Palette

Use Soft Flat in your project

Installing any Soft Flat 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

Emoji Swap

Headline whose last word is a pastel pill (emoji + word) that pops out and swaps to the next one on an interval — teams, freelancers, students…

Text
Animated

Highlight Text

Marker highlight that draws itself behind a word or phrase — left to right, slightly tilted and rounded — when it scrolls into view; four pastel tones.

Text
Animated

Rolling Number

Odometer-style number: each digit rolls vertically to its value with a staggered bounce, on first view and whenever the value changes.

Text
Animated

Wave Text

Bouncy text where letters hop one after another in a wave — always, or on hover/focus of the text or a parent .group. Pure CSS.

Text

Set up Soft Flat in your project

Once per project. Installing any Soft Flat 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/soft-flat-theme.json

1. Import the tokens

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

3. Scope the area

any page or layout
<div data-da="soft-flat">
  {/* Soft Flat modules */}
</div>

2. Load the fonts

app/layout.tsx
import { Nunito, DM_Sans, DM_Mono } from "next/font/google";

const softFlatDisplay = Nunito({ subsets: ["latin"], variable: "--font-soft-flat-display" });
const softFlatBody = DM_Sans({ subsets: ["latin"], variable: "--font-soft-flat-body" });
const softFlatMono = DM_Mono({ subsets: ["latin"], variable: "--font-soft-flat-mono", weight: ["400","500"] });

// <html className={`${softFlatDisplay.variable} ${softFlatBody.variable} ${softFlatMono.variable}`}>