UIX

Presets Seafoam Underwriter

Seafoam Underwriter

Dark-first insurance UI: deep teal-tinted night surfaces, one luminous mint accent and a calm Outfit voice for claims at night.

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

Color

Five ramps, 50 to 950

brand50ecfdf8100d1faee200a6f2dd3006ee5c840034d3b050014b8986000a967c7000a77658000b5d519000a4740950052b26
neutral50f1f6f6100e2ebeb200c6d4d5300a1b3b54007a8f925005d7175600495b5f70039484c8002633379001721249500b1315
success50effcf1100d7f8dd200aeefb93007ae08d4004cc96a5002cac4f6001f8c3f700187234800135a2b9000e4221950062a14
warning50fff9ec100fff0ca200ffe08a300ffcb4d400f5b529500dc9a10600b87c05700935f008006f47009004d30009502e1c00
danger50fff1f3100ffe1e6200ffc7d0300ff9aab400f76d85500e5405f600c52b4a700a11f3b8007d162d9005c0f219503d0715

Semantic tokens

Light and dark

Light
background#f1f6f6
foreground#0b1315
card#ffffff
card-foreground#0b1315
popover#ffffff
popover-foreground#0b1315
primary#0a7765
primary-foreground#ffffff
secondary#e2ebeb
secondary-foreground#172124
muted#e2ebeb
muted-foreground#495b5f
accent#d1faee
accent-foreground#0a4740
destructive#c52b4a
destructive-foreground#ffffff
success#187234
success-foreground#ffffff
warning#ffe08a
warning-foreground#4d3000
border#c6d4d5
input#a1b3b5
ring#0a7765
Dark
background#0b1315
foreground#f1f6f6
card#172124
card-foreground#f1f6f6
popover#172124
popover-foreground#f1f6f6
primary#34d3b0
primary-foreground#052b26
secondary#263337
secondary-foreground#e2ebeb
muted#263337
muted-foreground#a1b3b5
accent#0a4740
accent-foreground#d1faee
destructive#f76d85
destructive-foreground#3d0715
success#4cc96a
success-foreground#062a14
warning#f5b529
warning-foreground#2e1c00
border#263337
input#39484c
ring#34d3b0

Typography

Outfit, Outfit and Geist Mono

Grow what matters

display-lg · 56/1.05 · 600 · -0.03em
Outfit

Grow what matters

display-md · 40/1.1 · 600 · -0.025em
Outfit

A calmer way to work

heading-lg · 28/1.2 · 600 · -0.02em
Outfit

A calmer way to work

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

A calmer way to work

heading-sm · 16/1.4 · 600
Outfit

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

body-lg · 18/1.6 · 400
Outfit

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

body-md · 16/1.6 · 400
Outfit

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

body-sm · 14/1.5 · 400 · 0.005em
Outfit

Save changes

label · 14/1.3 · 500 · 0.01em
Outfit

Updated 2 minutes ago

caption · 12/1.4 · 500 · 0.02em
Outfit

const theme = preset("seafoam-underwriter")

code · 14/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
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 insurance 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

Seafoam Underwriter as a real product

Landing page

seafoam-underwriter.com
ProductPricingCustomersDocs
New · insurance

Seafoam Underwriter

Dark-first insurance UI: deep teal-tinted night surfaces, one luminous mint accent and a calm Outfit voice for claims at night.

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#0a7765
  • Accent#d1faee
  • Background#f1f6f6
  • Foreground#0b1315
  • Muted#e2ebeb

Dark

  • Primary#34d3b0
  • Accent#0a4740
  • Background#0b1315
  • Foreground#f1f6f6
  • Muted#263337
  • DisplayOutfit
  • BodyOutfit
  • MonoGeist Mono

Dark-first insurance UI: deep teal-tinted night surfaces, one luminous mint accent and a calm Outfit voice for claims at night.

Seafoam Underwriter 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
insurance, fintech, claims
Mood
nocturnal, cinematic, reassuring, focused
Display font
Outfit
Body font
Outfit
Mono font
Geist Mono
Density
Comfortable
Contrast
Standard
Corner radius
10px

Use Seafoam Underwriter

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 “Seafoam Underwriter”. 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 Seafoam Underwriter preset”.

Get your MCP link