Presets Undertow Cassette

Undertow Cassette

Dark-first music UI: midnight-teal surfaces, one aqua accent for play and focus, poster-style display type for late-night listening and mixing.

Pro Use this preset Use in Figma Get the files

A live preview of a Pro preset. Its files, Figma sync and MCP come with UIX Pro.Unlock

Color

Five ramps, 50 to 950

brand50edfcf8100d0f8ee200a4efdf3006be0c940033cbb250015ad98600079180700057669800085e559000a4b4595005302d

neutral50f4f7f9100e7edf1200d2dbe2300b3bfca4008492a450056647a6003e4a5e7002b35478001d2637900131a289500a1019

success50edfcf3100d2f9e0200a8efc430073e0a24004cc77d5002ba8656001e8c5370015733a800105a2f9000b4224950052a15

warning50fff9eb100feefc7200fcd98a300fbc24f400f5ab2a500dd8a0d600b86a067008f4f058006e3d069004a29069502a1603

danger50fff1f4100ffe0e7200ffc2d0300ff92aa400f8577e500e02e5e600c81e4a700a8133b80085102f900640b229503d0415

Semantic tokens

Light and dark

Light

background#f4f7f9

foreground#0a1019

card#ffffff

card-foreground#0a1019

popover#ffffff

popover-foreground#0a1019

primary#057669

primary-foreground#ffffff

secondary#e7edf1

secondary-foreground#131a28

muted#e7edf1

muted-foreground#56647a

accent#d0f8ee

accent-foreground#0a4b45

destructive#c81e4a

destructive-foreground#ffffff

success#15733a

success-foreground#ffffff

warning#fcd98a

warning-foreground#4a2906

border#d2dbe2

input#b3bfca

ring#057669

Dark

background#0a1019

foreground#f4f7f9

card#131a28

card-foreground#f4f7f9

popover#1d2637

popover-foreground#f4f7f9

primary#33cbb2

primary-foreground#05302d

secondary#1d2637

secondary-foreground#e7edf1

muted#1d2637

muted-foreground#b3bfca

accent#0a4b45

accent-foreground#d0f8ee

destructive#f8577e

destructive-foreground#3d0415

success#4cc77d

success-foreground#052a15

warning#f5ab2a

warning-foreground#2a1603

border#1d2637

input#2b3547

ring#33cbb2

Typography

Schibsted Grotesk, Hanken Grotesk and Geist Mono

Grow what matters

display-lg · 56/1.04 · 700 · -0.035em
Schibsted Grotesk

Grow what matters

display-md · 40/1.1 · 700 · -0.025em
Schibsted Grotesk

A calmer way to work

heading-lg · 28/1.2 · 600 · -0.015em
Schibsted Grotesk

A calmer way to work

heading-md · 20/1.3 · 600 · -0.01em
Hanken Grotesk

A calmer way to work

heading-sm · 16/1.4 · 600
Hanken Grotesk

Good systems disappear. People notice the product, not the parts.

body-lg · 18/1.6 · 400
Hanken Grotesk

Good systems disappear. People notice the product, not the parts.

body-md · 16/1.6 · 400
Hanken Grotesk

Good systems disappear. People notice the product, not the parts.

body-sm · 14/1.5 · 400
Hanken Grotesk

Save changes

label · 14/1.3 · 500 · 0.005em
Hanken Grotesk

Updated 2 minutes ago

caption · 12/1.4 · 500 · 0.02em
Hanken Grotesk

const theme = preset("undertow-cassette")

code · 13/1.5 · 400
Geist Mono

Spacing · radius · shadow

The quiet rules

0.52px

14px

1.56px

28px

312px

416px

520px

624px

832px

1040px

1248px

1664px

2080px

2496px

sm
4px

md
8px

lg
12px

xl
16px

full
full

Components

Every part, every state

Buttons

DefaultHoverFocusDisabledPrimarySecondaryOutlineGhostDestructive

Inputs

Full namePlaceholder

EmailFocused

PasswordUse at least 8 characters

Team

Design

Opens a menu

WorkspaceDisabled

Message

Navigation

Undertow CassetteProductPricingCustomersDocs

12 projects, 3 due this week.

Home / Projects / Q3 launch

Feedback

New version availableReload to get the latest features.

Payment received2,400 from Md Rakib Shekh.

Card expires soonUpdate it before Friday.

Sync failedWe will try again in 30 seconds.

Nusrat JahanCommented on Q3 launch

Invoice sent to Israt Jahan

Undo

PrimarySecondaryOutlineActivePendingFailedNew

Copied to clipboard72%

MRNJIJMRNJIJ+5

Cards, table and overlays

Monthly revenue12.4%

48,210

74% of the 65k goal

The music report

What changed this quarter, and what to do next.

MRMd Rakib Shekh4 min read

Israt Jahan

Product designer

Customer	Date	Status	Amount
MRMd Rakib Shekh	Mar 12	Paid	2,400.00
NJNusrat Jahan	Mar 11	Pending	860.00
IJIsrat Jahan	Mar 09	Failed	1,120.00

Showing 1–3 of 36

No messages yet

When customers write to you, their messages show up here.

Screens

Undertow Cassette as a real product

Landing page

undertow-cassette.com

Undertow CassetteProductPricingCustomersDocs

New · music

Undertow Cassette

Dark-first music UI: midnight-teal surfaces, one aqua accent for play and focus, poster-style display type for late-night listening and mixing.

MRNJIJLoved by 2,000+ teams

This week

+24.6%

Dashboard

Undertow Cassette

Good morning, Rakib

Overview

Revenue

48,210

+12.4%

Customers

2,318

+4.1%

Churn

1.8%

-0.3%

Revenue

Customer	Date	Status	Amount
MRMd Rakib Shekh	Mar 12	Paid	2,400.00
NJNusrat Jahan	Mar 11	Pending	860.00
IJIsrat Jahan	Mar 09	Failed	1,120.00

Phone app

9:41●●● 100%

Welcome back

Md Rakib Shekh

Balance

12,480

Md Rakib ShekhPaid

2,400

Nusrat JahanPending

860

Israt JahanFailed

1,120

9:41●●● 100%

Q3 launch

Write onboarding copyMd Rakib Shekh · TodayReview new pricingNusrat Jahan · TomorrowShip release notesIsrat Jahan · Friday

1 of 3 doneOn track for Friday.

Pricing

Starter

0 a month

For trying things out

1 project
Basic reports
Email support

ProPopular

24 a month

For growing teams

Unlimited projects
Team workspaces
Priority support
Advanced reports

Business

79 a month

For larger organisations

Everything in Pro
SSO and audit log
A dedicated manager

Can I change plans later?

Yes. Move up or down any time, and we work out the difference for you.

Is there a free trial?

Starter is free for as long as you like. Pro is free for the first 14 days.

Do teams get a discount?

Teams of 20 or more get 20% off. Write to us and we will set it up.

Undertow Cassette

Welcome back

Password

Remember me

“We set up our whole workspace in an afternoon.”

NJNusrat Jahan
Head of operations

Settings

MRMd Rakib Shekhrakib@studio.co

Email notificationsA summary every Monday.

Two-factor sign-inProtect your account with a code.

LanguageUsed across the app.

Delete accountThis removes all your data.

Palette and type

Light

Primary#057669
Accent#d0f8ee
Background#f4f7f9
Foreground#0a1019
Muted#e7edf1

Dark

Primary#33cbb2
Accent#0a4b45
Background#0a1019
Foreground#f4f7f9
Muted#1d2637

DisplaySchibsted Grotesk
BodyHanken Grotesk
MonoGeist Mono

Dark-first music UI: midnight-teal surfaces, one aqua accent for play and focus, poster-style display type for late-night listening and mixing.

Undertow Cassette is one of the Pro presets in UIX. Its tokens, theme files and DESIGN.md come with UIX Pro: in Figma, in code, and through the UIX MCP for AI coding agents.

Access: UIX Pro
Industries: music, streaming, audio production
Mood: nocturnal, cinematic, luminous, focused
Display font: Schibsted Grotesk
Body font: Hanken Grotesk
Mono font: Geist Mono
Density: Comfortable
Contrast: Standard
Corner radius: 8px

Use Undertow Cassette

On the web

Open it in Studio, change anything, then use it in your app with one CSS link, the CLI or your AI tool.

Use this preset

In Figma

Open UIX, go to Presets and search “Undertow Cassette”. Press Use this preset, then Sync to Figma.

Install UIX

In code

A Tailwind v4 and shadcn/ui theme, W3C tokens, Figma variables and a DESIGN.md. Included with UIX Pro.

Unlock with UIX Pro

Send to your AI agent

Connect the UIX MCP once, then ask Claude Code, Cursor or any MCP client: “Use the Undertow Cassette preset”.

Get your MCP link

Similar presets

All 251 presets →