Nocturne

nocturne

Dark, fluid AI-chat interfaces lit from below.

A dark-first art direction for AI products and modern webchat: near-black canvas, softly raised graphite surfaces, hairline borders, pill-shaped bubbles and a periwinkle-to-pink glow that pools under the composer. Motion is liquid — messages rise and settle, text streams in, nothing snaps.

Fonts: Onest · displayFigtree · bodyFragment Mono · mono
Demo product: Nova — An AI assistant that remembers your team's context — chat, search and automate across every tool.
Palette: Custom

Use Nocturne in your project

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

Setup guide

Sections 8

Hero1 variant

Hero Chat

Centered dark hero: model badge, headline ending in a periwinkle→pink gradient, two CTAs, then a chat window mock-up (user pill, assistant answer with ‘Thought for 2 seconds’ row and source chips, composer) lit by the Nocturne glow.

Hero

Features1 variant

Features Grid

Six feature cards on graphite surfaces: mono eyebrow, headline, icon in a periwinkle-tinted chip, title and short copy; a soft corner glow lights up on hover.

Features

Pricing1 variant

Pricing Tiers

Three dark plan cards with a monthly/yearly segmented switch (light pill on the active option); the featured plan gets a periwinkle ring, a ‘Most popular’ chip and the glow along its top edge.

Pricing

Testimonials1 variant

Testimonials Chat

Customer quotes laid out as a group chat: alternating left (graphite, bordered) and right (secondary pill) message bubbles with tail corners, colored initials, names and roles.

Testimonials

FAQ1 variant

FAQ Thread

Two-column FAQ: heading + ‘Chat with the team’ button, then disclosure rows whose plus turns into a cross; answers open beneath like an assistant reply with a small avatar. Native <details>, no JavaScript.

FAQ

CTA1 variant

CTA Composer

Closing CTA shaped like a chat composer: big headline, a real form whose textarea asks the first question and round send button, prompt-suggestion chips (links carrying ?q=) and the glow pooling underneath.

CTA

Footer1 variant

Footer Status

Quiet dark footer: brand mark and tagline, three link columns with mono headings, and a bottom bar with a live system-status pill (pinging dot: ok / degraded / down) and copyright.

Footer

UI components 6

Button1 variant

Button

Pill button in 5 variants (periwinkle primary with a soft glow, light ‘send’ style, graphite secondary, ghost, danger), 4 sizes including round icon, icons, loading spinner and link mode; presses in slightly.

Button

Card1 variant

Chat Message

One chat turn: the user speaks in a graphite pill aligned right; the assistant answers without a bubble — face avatar, name, collapsible ‘Thought for Ns’ reasoning row, plain-text answer, streaming caret and hover actions (copy with confirmation, regenerate, thumbs up).

Card

Input1 variant

Chat Composer

Chat composer: auto-growing textarea in a rounded graphite panel, attach button and a round light send button that turns into a stop square while the assistant answers; Enter sends, Shift+Enter adds a line; glow above and disclaimer below.

Input

Badge1 variant

Badge

Small pill labels: neutral, mono ‘model’ chip, tinted primary / success / warning / danger with hairline rings, and outline; optional status dot that can breathe (typing, live).

Badge

Table1 variant

Usage Table

Agent usage table on a graphite panel: caption, mono model chips, right-aligned tabular numbers (compact token counts, costs), colored status dots and a highlighted totals row; scrolls horizontally on small screens.

Table

App layouts 4

Auth screen1 variant

Auth Glow

Centered sign-in on the dark canvas: glowing brand orb, title, Google/GitHub buttons, divider, email + magic-link form with a light submit pill and sign-up link, floating over the Nocturne glow.

Auth screen

Dashboard1 variant

Chat App

Full AI chat screen: conversation sidebar (drawer on mobile), agent header with model chip, a log where the user speaks in pills and the assistant answers in plain text, and a glowing composer. Sending shows a ‘Thinking…’ shimmer, then streams the reply word by word with a caret; send becomes stop meanwhile.

Dashboard

Effects 4

Background1 variant

Animated

Glow Background

Ambient Nocturne light: two heavily blurred periwinkle and pink orbs that slowly drift and breathe (anchored bottom, top or center) behind any content, over a faint masked star-dust grid. Pure CSS.

Background

Transition1 variant

Animated

Message Rise

Staggered entrance for chat logs and lists: each child rises 12px, un-blurs and fades in one after another with the long Nocturne settle, once when the group scrolls into view (or on mount).

Transition

Micro interaction1 variant

Animated

Thinking Indicator

The assistant's thinking state: a light sweep runs across ‘Thinking…’ while three periwinkle dots breathe and a mono timer counts; when done it settles into a quiet ‘Thought for Ns’ row. Controlled, or loops on its own.

Micro interaction

Text1 variant

Animated

Stream Text

Token-by-token streaming like an AI answer: words appear at a slightly jittery pace, each fading in from a blur, followed by a blinking caret that disappears when done; starts when scrolled into view.

Text

Set up Nocturne in your project

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

1. Import the tokens

app/globals.css

@import "tailwindcss";
@import "../components/modules/_core/da-theme.css";
@import "../components/modules/nocturne/tokens.css";

3. Scope the area

any page or layout

<div data-da="nocturne">
  {/* Nocturne modules */}
</div>

2. Load the fonts

app/layout.tsx

import { Onest, Figtree, Fragment_Mono } from "next/font/google";

const nocturneDisplay = Onest({ subsets: ["latin"], variable: "--font-nocturne-display" });
const nocturneBody = Figtree({ subsets: ["latin"], variable: "--font-nocturne-body" });
const nocturneMono = Fragment_Mono({ subsets: ["latin"], variable: "--font-nocturne-mono", weight: ["400"] });

// <html className={`${nocturneDisplay.variable} ${nocturneBody.variable} ${nocturneMono.variable}`}>

Nocturne

Sections 8

Navbar1 variant

Navbar Pill

Hero1 variant

Hero Chat

Features1 variant

Features Grid

Pricing1 variant

Pricing Tiers

Testimonials1 variant

Testimonials Chat

FAQ1 variant

FAQ Thread

CTA1 variant

CTA Composer

Footer1 variant

Footer Status

UI components 6

Button1 variant

Button

Card1 variant

Chat Message

Input1 variant

Chat Composer

Modal1 variant

Modal

Badge1 variant

Badge

Table1 variant

Usage Table

App layouts 4

Sidebar1 variant

Sidebar Conversations

App header1 variant

Chat Header

Auth screen1 variant

Auth Glow

Dashboard1 variant

Chat App

Effects 4

Background1 variant

Glow Background

Transition1 variant

Message Rise

Micro interaction1 variant

Thinking Indicator

Text1 variant

Stream Text

Set up Nocturne in your project

1. Import the tokens

3. Scope the area

2. Load the fonts