Skip to content
Artmode

Organic Soft

organic-soft

Warm, calm and grounded — made by hand, not by grid.

A natural, human look for wellness, sustainability and lifestyle products: warm cream paper, sage greens and terracotta, a soft optical serif for headlines, generously rounded and blob-shaped containers, hand-drawn curves and leaves, gentle ease-out motion. Quiet confidence instead of hype.

Fonts
Fraunces · displayOutfit · bodyFira Code · mono
Demo product
Grove — Carbon accounting and sustainability reporting for growing companies — measure, reduce and report your footprint without a consultant.
Palette

Use Organic Soft in your project

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

Drawn Underline

Hand-drawn underline that draws itself (SVG pathLength) beneath a word when it scrolls into view — a loose, slightly wavy pen stroke.

Text
Animated

Italic Swap

Headline with a rotating italic serif word: each word slides up out of a mask and the next rises in with a soft ease; the full sentence is available to screen readers.

Text
Animated

Letter Rise

Letters drift up from below with a gentle fade, one after another like seeds sprouting, when the text scrolls into view; words never break mid-letter.

Text
Animated

Marker Highlight

Highlighter-pen effect: a soft tinted band sweeps left-to-right behind the words when they scroll into view; works across line wraps (box-decoration-break) and text stays fully legible.

Text

Set up Organic Soft in your project

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

1. Import the tokens

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

3. Scope the area

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

2. Load the fonts

app/layout.tsx
import { Fraunces, Outfit, Fira_Code } from "next/font/google";

const organicSoftDisplay = Fraunces({ subsets: ["latin"], variable: "--font-organic-soft-display" });
const organicSoftBody = Outfit({ subsets: ["latin"], variable: "--font-organic-soft-body" });
const organicSoftMono = Fira_Code({ subsets: ["latin"], variable: "--font-organic-soft-mono" });

// <html className={`${organicSoftDisplay.variable} ${organicSoftBody.variable} ${organicSoftMono.variable}`}>