Skip to content
Artmode

Neo Corporate

neo-corporate

Trustworthy, structured, quietly modern.

The confident B2B look of Stripe, Notion or Ramp: white canvas, precise 1px slate borders, small radii, a single dependable blue, data-rich product mock-ups, trust signals (logos, compliance badges, numbers) and calm, no-bounce motion. Built for fintech, HR and enterprise SaaS.

Fonts
Manrope · displayIBM Plex Sans · bodyIBM Plex Mono · mono
Demo product
Ledgerly — Invoicing, payments and spend management for finance teams — close the books in days, not weeks.
Palette

Use Neo Corporate in your project

Installing any Neo Corporate 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 ease-out when scrolled into view, formatted with thousands separators (prefix/suffix, decimals); tabular figures prevent jitter. Final value for screen readers.

Text
Animated

Shimmer Text

Text filled with a primary→accent-fg gradient and a slow light sweep passing across it every few seconds — for a single highlighted phrase in a headline. Pure CSS.

Text
Animated

Typed Words

Headline with a rotating keyword typed and erased character by character in primary, with a blinking caret; reduced motion swaps whole words. Full sentence exposed to screen readers.

Text
Animated

Word Reveal

Headline whose words slide up from behind a mask one after another when scrolled into view — crisp, no blur or bounce. The element keeps its plain text for screen readers.

Text

Set up Neo Corporate in your project

Once per project. Installing any Neo Corporate 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/neo-corporate-theme.json

1. Import the tokens

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

3. Scope the area

any page or layout
<div data-da="neo-corporate">
  {/* Neo Corporate modules */}
</div>

2. Load the fonts

app/layout.tsx
import { Manrope, IBM_Plex_Sans, IBM_Plex_Mono } from "next/font/google";

const neoCorporateDisplay = Manrope({ subsets: ["latin"], variable: "--font-neo-corporate-display" });
const neoCorporateBody = IBM_Plex_Sans({ subsets: ["latin"], variable: "--font-neo-corporate-body", weight: ["400","500","600","700"] });
const neoCorporateMono = IBM_Plex_Mono({ subsets: ["latin"], variable: "--font-neo-corporate-mono", weight: ["400","500"] });

// <html className={`${neoCorporateDisplay.variable} ${neoCorporateBody.variable} ${neoCorporateMono.variable}`}>