Presets Mainframe Checklist

Mainframe Checklist

Dark-first project management UI with phosphor-green actions, Space Grotesk headlines and terminal-style mono details on a 4px grid.

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

brand50eefbf0100d6f5dc200aeeabb3007cdb934004cc56d50022a64c600158a3c7000f6d2f8000b5424900083c1995004240f

neutral50f3f6f4100e4e9e6200c9d1cc300a4aea84007e8983500616c666004b565070039433e80029312d9001b221e950111713

success50e6faf5100c2f2e520098e6d23006bd6bb4003cbf9c5001fa483600118a6c7000d6b5a8000a5246900073a3295004241f

warning50fff8e6100ffeec2200ffe08a300ffd050400f5b82e500d99a12600b57c007008f60008006b47009004a31009502e1e00

danger50fff4f5100ffe3e6200ffc6ce300ff9dac400f66e89500e1436b600c02d567009c2043800791231900580521950390011

Semantic tokens

Light and dark

Light

background#f3f6f4

foreground#111713

card#ffffff

card-foreground#111713

popover#ffffff

popover-foreground#111713

primary#0f6d2f

primary-foreground#ffffff

secondary#e4e9e6

secondary-foreground#1b221e

muted#e4e9e6

muted-foreground#4b5650

accent#d6f5dc

accent-foreground#083c19

destructive#c02d56

destructive-foreground#ffffff

success#0d6b5a

success-foreground#ffffff

warning#ffe08a

warning-foreground#4a3100

border#c9d1cc

input#a4aea8

ring#158a3c

Dark

background#111713

foreground#f3f6f4

card#1b221e

card-foreground#f3f6f4

popover#1b221e

popover-foreground#f3f6f4

primary#4cc56d

primary-foreground#04240f

secondary#29312d

secondary-foreground#e4e9e6

muted#29312d

muted-foreground#a4aea8

accent#083c19

accent-foreground#d6f5dc

destructive#f66e89

destructive-foreground#390011

success#3cbf9c

success-foreground#04241f

warning#f5b82e

warning-foreground#2e1e00

border#29312d

input#39433e

ring#4cc56d

Typography

Space Grotesk, Inter and Space Mono

Grow what matters

display-lg · 56/1.05 · 700 · -0.03em
Space Grotesk

Grow what matters

display-md · 40/1.1 · 700 · -0.02em
Space Grotesk

A calmer way to work

heading-lg · 28/1.2 · 500 · -0.015em
Space Grotesk

A calmer way to work

heading-md · 20/1.3 · 600 · -0.01em
Inter

A calmer way to work

heading-sm · 16/1.4 · 600 · -0.005em
Inter

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

body-lg · 18/1.6 · 400
Inter

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

body-md · 16/1.6 · 400
Inter

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

body-sm · 14/1.5 · 400
Inter

Save changes

label · 14/1.3 · 500 · 0.005em
Inter

Updated 2 minutes ago

caption · 12/1.4 · 500 · 0.02em
Inter

const theme = preset("mainframe-checklist")

code · 13/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
2px

md
4px

lg
8px

xl
12px

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

Mainframe ChecklistProductPricingCustomersDocs

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 project management 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

Mainframe Checklist as a real product

Landing page

mainframe-checklist.com

Mainframe ChecklistProductPricingCustomersDocs

New · project management

Mainframe Checklist

Dark-first project management UI with phosphor-green actions, Space Grotesk headlines and terminal-style mono details on a 4px grid.

MRNJIJLoved by 2,000+ teams

This week

+24.6%

Dashboard

Mainframe Checklist

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.

Mainframe Checklist

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#0f6d2f
Accent#d6f5dc
Background#f3f6f4
Foreground#111713
Muted#e4e9e6

Dark

Primary#4cc56d
Accent#083c19
Background#111713
Foreground#f3f6f4
Muted#29312d

DisplaySpace Grotesk
BodyInter
MonoSpace Mono

Dark-first project management UI with phosphor-green actions, Space Grotesk headlines and terminal-style mono details on a 4px grid.

Mainframe Checklist 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: project management, software, productivity
Mood: retro, confident, focused, playful
Display font: Space Grotesk
Body font: Inter
Mono font: Space Mono
Density: Comfortable
Contrast: High
Corner radius: 4px

Use Mainframe Checklist

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 “Mainframe Checklist”. 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 Mainframe Checklist preset”.

Get your MCP link

Similar presets

All 251 presets →