UIX
Sign in Start free

Presets Downbeat Anthem

Downbeat Anthem

High-contrast music product UI: one cobalt primary, oversized Archivo display type on a 1.4 scale, and neutrals tinted toward the brand blue.

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

brand50eef6ff100d9ebff200b5d8ff30085bdfb40055a0f25002b82e66001466cc7000d4fa38000b3b7a9000a2b58950061a38
neutral50f5f8fb100e9eef4200d5dde7300b7c2d0400949fb0500737e8e6005c67777004a5464800343d4b900222a36950131922
success50e9fbf1100c9f5da2009fe9bd3006fd79a4003fbd7850022a06360018844f70015703f8000f56309000a3d2295005261a
warning50fff8e6100ffefc2200fbd98a300f3c05a400e5a72e500c98b12600a6700a70083560a800623f08900442b059502b1a02
danger50fff1f4100ffdfe6200ffc0cf300ff93a9400f5657f500e03a62600c4224f700a01a408007c15329005a0f2595038081a

Semantic tokens

Light and dark

Light
background#f5f8fb
foreground#131922
card#ffffff
card-foreground#131922
popover#ffffff
popover-foreground#131922
primary#1466cc
primary-foreground#ffffff
secondary#e9eef4
secondary-foreground#222a36
muted#e9eef4
muted-foreground#4a5464
accent#d9ebff
accent-foreground#0a2b58
destructive#c4224f
destructive-foreground#ffffff
success#15703f
success-foreground#ffffff
warning#fbd98a
warning-foreground#442b05
border#d5dde7
input#949fb0
ring#2b82e6
Dark
background#131922
foreground#f5f8fb
card#222a36
card-foreground#f5f8fb
popover#222a36
popover-foreground#f5f8fb
primary#55a0f2
primary-foreground#061a38
secondary#343d4b
secondary-foreground#e9eef4
muted#343d4b
muted-foreground#b7c2d0
accent#0a2b58
accent-foreground#d9ebff
destructive#f5657f
destructive-foreground#38081a
success#3fbd78
success-foreground#05261a
warning#e5a72e
warning-foreground#2b1a02
border#343d4b
input#5c6777
ring#55a0f2

Typography

Archivo, Archivo and Space Mono

Grow what matters

display-lg · 56/1.04 · 800 · -0.03em
Archivo

Grow what matters

display-md · 40/1.1 · 700 · -0.02em
Archivo

A calmer way to work

heading-lg · 28/1.2 · 700 · -0.015em
Archivo

A calmer way to work

heading-md · 20/1.3 · 600 · -0.005em
Archivo

A calmer way to work

heading-sm · 16/1.4 · 600
Archivo

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

body-lg · 18/1.6 · 400
Archivo

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

body-md · 16/1.6 · 400
Archivo

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

body-sm · 14/1.5 · 400
Archivo

Save changes

label · 14/1.25 · 600 · 0.005em
Archivo

Updated 2 minutes ago

caption · 12/1.4 · 500 · 0.01em
Archivo

const theme = preset("downbeat-anthem")

code · 14/1.5 · 400
Space Mono

Spacing · radius · shadow

The quiet rules

0.52px
14px
1.56px
28px
312px
416px
520px
624px
832px
1040px
1248px
1664px
2080px
2496px
sm
6px
md
10px
lg
16px
xl
24px
full
full
sm
md
lg

Components

Every part, every state

Buttons

DefaultHoverFocusDisabledPrimarySecondaryOutlineGhostDestructive

Inputs

Placeholder
Focused
Use at least 8 characters
Team
Design
Opens a menu
Disabled

Navigation

ProductPricingCustomersDocs

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.
NJ
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
IJ
Israt Jahan

Product designer

CustomerDateStatusAmount
MRMd Rakib ShekhMar 12Paid2,400.00
NJNusrat JahanMar 11Pending860.00
IJIsrat JahanMar 09Failed1,120.00
Showing 1–3 of 36
Q3 launch24 files, edited today
Delete project?

“Q3 launch” and its 24 files will be removed for everyone. You can’t undo this.

No messages yet

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

Screens

Downbeat Anthem as a real product

Landing page

downbeat-anthem.com
ProductPricingCustomersDocs
New · music

Downbeat Anthem

High-contrast music product UI: one cobalt primary, oversized Archivo display type on a 1.4 scale, and neutrals tinted toward the brand blue.

MRNJIJLoved by 2,000+ teams
This week

+24.6%

Dashboard

Good morning, Rakib

Overview

Revenue

48,210

+12.4%
Customers

2,318

+4.1%
Churn

1.8%

-0.3%
Revenue
CustomerDateStatusAmount
MRMd Rakib ShekhMar 12Paid2,400.00
NJNusrat JahanMar 11Pending860.00
IJIsrat JahanMar 09Failed1,120.00

Phone app

9:41●●● 100%

Welcome back

Md Rakib Shekh
MR
Balance

12,480

MR
Md Rakib ShekhPaid
2,400
NJ
Nusrat JahanPending
860
IJ
Israt JahanFailed
1,120
9:41●●● 100%

Q3 launch

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.

Sign in

Welcome back

Sign in to continue to your workspace.

or

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

NJNusrat Jahan
Head of operations

Settings

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#1466cc
  • Accent#d9ebff
  • Background#f5f8fb
  • Foreground#131922
  • Muted#e9eef4

Dark

  • Primary#55a0f2
  • Accent#0a2b58
  • Background#131922
  • Foreground#f5f8fb
  • Muted#343d4b
  • DisplayArchivo
  • BodyArchivo
  • MonoSpace Mono

High-contrast music product UI: one cobalt primary, oversized Archivo display type on a 1.4 scale, and neutrals tinted toward the brand blue.

Downbeat Anthem 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, entertainment, creator tools
Mood
bold, energetic, disciplined, confident
Display font
Archivo
Body font
Archivo
Mono font
Space Mono
Density
Comfortable
Contrast
Standard
Corner radius
10px

Use Downbeat Anthem

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 “Downbeat Anthem”. 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 Downbeat Anthem preset”.

Get your MCP link

Similar presets

All 251 presets →