UIX

Presets Courtside Buzzer

Courtside Buzzer

High-energy sports UI: cyan-teal actions, oversized Archivo display type and cool green-grey neutrals on a strict 4px structure.

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

Color

Five ramps, 50 to 950

brand50e8fbfc100c7f4f720097e8ef3005dd5e040027bccb5000b9cad600067a8970008626d8000b4d569000e3c43950072529
neutral50f2f7f7100e4eded200cddada300b0c2c24008da3a45006e8687600566c6d7004255568002e3d3e9001d292a950111a1b
success50e7faf0100c6f3da20098e6bd30063d29c40033b87b500179b5f6000f7e4b7000c633c8000a4d2f900083823950042316
warning50fff8e6100ffedbf200fbd97a300f0c043400e0a516500c089006009c6e007007b56008005d4100900422f009502a1d00
danger50fff3f4100ffe1e3200ffc3c7300ff939b400f9626d500e43848600c71f33700a3152a8007f0e209005c08169503a030c

Semantic tokens

Light and dark

Light
background#f2f7f7
foreground#111a1b
card#ffffff
card-foreground#111a1b
popover#ffffff
popover-foreground#111a1b
primary#067a89
primary-foreground#ffffff
secondary#e4eded
secondary-foreground#1d292a
muted#e4eded
muted-foreground#425556
accent#c7f4f7
accent-foreground#0e3c43
destructive#c71f33
destructive-foreground#ffffff
success#0c633c
success-foreground#ffffff
warning#fbd97a
warning-foreground#422f00
border#cddada
input#b0c2c2
ring#067a89
Dark
background#111a1b
foreground#f2f7f7
card#1d292a
card-foreground#f2f7f7
popover#1d292a
popover-foreground#f2f7f7
primary#27bccb
primary-foreground#072529
secondary#2e3d3e
secondary-foreground#e4eded
muted#2e3d3e
muted-foreground#b0c2c2
accent#0e3c43
accent-foreground#c7f4f7
destructive#f9626d
destructive-foreground#3a030c
success#33b87b
success-foreground#042316
warning#e0a516
warning-foreground#2a1d00
border#2e3d3e
input#425556
ring#27bccb

Typography

Archivo, Archivo and Space Mono

Grow what matters

display-lg · 76/1 · 800 · -0.035em
Archivo

Grow what matters

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

A calmer way to work

heading-lg · 32/1.15 · 700 · -0.02em
Archivo

A calmer way to work

heading-md · 24/1.25 · 700 · -0.015em
Archivo

A calmer way to work

heading-sm · 18/1.35 · 600 · -0.01em
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.01em
Archivo

Updated 2 minutes ago

caption · 12/1.4 · 500 · 0.02em
Archivo

const theme = preset("courtside-buzzer")

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
4px
md
6px
lg
10px
xl
14px
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 sports 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

Courtside Buzzer as a real product

Landing page

courtside-buzzer.com
ProductPricingCustomersDocs
New · sports

Courtside Buzzer

High-energy sports UI: cyan-teal actions, oversized Archivo display type and cool green-grey neutrals on a strict 4px structure.

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#067a89
  • Accent#c7f4f7
  • Background#f2f7f7
  • Foreground#111a1b
  • Muted#e4eded

Dark

  • Primary#27bccb
  • Accent#0e3c43
  • Background#111a1b
  • Foreground#f2f7f7
  • Muted#2e3d3e
  • DisplayArchivo
  • BodyArchivo
  • MonoSpace Mono

High-energy sports UI: cyan-teal actions, oversized Archivo display type and cool green-grey neutrals on a strict 4px structure.

Courtside Buzzer 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
sports, fitness, media
Mood
bold, energetic, confident, disciplined
Display font
Archivo
Body font
Archivo
Mono font
Space Mono
Density
Comfortable
Contrast
High
Corner radius
6px

Use Courtside Buzzer

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 “Courtside Buzzer”. 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 Courtside Buzzer preset”.

Get your MCP link