UIX

Presets Mapmaker Bearing

Mapmaker Bearing

Conservative, high-readability logistics UI: ochre actions on ochre-tinted neutrals, Newsreader headlines and tabular Public Sans data.

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

Color

Five ramps, 50 to 950

brand50fbf8ec100f4edd2200e8dba6300d8c477400c6a94f500a68a2f6008368187006a5313800523f0f9003a2c09950241a05
neutral50f9f8f2100f1efe6200e2dfd3300cdc9bb400aeaa9c5008f8b7e6006d6a5c70058554a8003a373090024221c95017150f
success50f0f8ef100dcf0d8200b8e0b13008bc98540063ad6250044914a600337a3c7002764318001d4e2690015391c9500b2310
warning50fff8eb100feecc8200fbd58f300f3b655400e6992e500c97b17600a6600e70084490b80063360a9004a28079502c1703
danger50fff3f5100ffe3e8200fcc4cf300f597a9400e8687f500d1435f600b52742700931d3480074162a90055101f950370a14

Semantic tokens

Light and dark

Light
background#f9f8f2
foreground#17150f
card#fefdf9
card-foreground#17150f
popover#fefdf9
popover-foreground#17150f
primary#836818
primary-foreground#ffffff
secondary#f1efe6
secondary-foreground#24221c
muted#f1efe6
muted-foreground#58554a
accent#f4edd2
accent-foreground#3a2c09
destructive#b52742
destructive-foreground#ffffff
success#276431
success-foreground#ffffff
warning#fbd58f
warning-foreground#4a2807
border#e2dfd3
input#cdc9bb
ring#836818
Dark
background#17150f
foreground#f9f8f2
card#24221c
card-foreground#f9f8f2
popover#24221c
popover-foreground#f9f8f2
primary#c6a94f
primary-foreground#241a05
secondary#3a3730
secondary-foreground#f1efe6
muted#3a3730
muted-foreground#cdc9bb
accent#3a2c09
accent-foreground#f4edd2
destructive#e8687f
destructive-foreground#370a14
success#63ad62
success-foreground#0b2310
warning#e6992e
warning-foreground#2c1703
border#3a3730
input#58554a
ring#c6a94f

Typography

Newsreader, Public Sans and IBM Plex Mono

Grow what matters

display-lg · 40/1.1 · 600 · -0.02em
Newsreader

Grow what matters

display-md · 32/1.15 · 600 · -0.015em
Newsreader

A calmer way to work

heading-lg · 24/1.25 · 500 · -0.01em
Newsreader

A calmer way to work

heading-md · 20/1.3 · 600 · -0.005em
Public Sans

A calmer way to work

heading-sm · 16/1.4 · 600
Public Sans

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

body-lg · 18/1.6 · 400
Public Sans

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

body-md · 16/1.55 · 400
Public Sans

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

body-sm · 14/1.5 · 400
Public Sans

Save changes

label · 14/1.3 · 500 · 0.005em
Public Sans

Updated 2 minutes ago

caption · 12/1.4 · 500 · 0.01em
Public Sans

const theme = preset("mapmaker-bearing")

code · 14/1.5 · 400
IBM Plex 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
6px
xl
8px
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 logistics 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

Mapmaker Bearing as a real product

Landing page

mapmaker-bearing.com
ProductPricingCustomersDocs
New · logistics

Mapmaker Bearing

Conservative, high-readability logistics UI: ochre actions on ochre-tinted neutrals, Newsreader headlines and tabular Public Sans data.

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#836818
  • Accent#f4edd2
  • Background#f9f8f2
  • Foreground#17150f
  • Muted#f1efe6

Dark

  • Primary#c6a94f
  • Accent#3a2c09
  • Background#17150f
  • Foreground#f9f8f2
  • Muted#3a3730
  • DisplayNewsreader
  • BodyPublic Sans
  • MonoIBM Plex Mono

Conservative, high-readability logistics UI: ochre actions on ochre-tinted neutrals, Newsreader headlines and tabular Public Sans data.

Mapmaker Bearing 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
logistics, supply chain, freight
Mood
institutional, stable, precise, calm
Display font
Newsreader
Body font
Public Sans
Mono font
IBM Plex Mono
Density
Comfortable
Contrast
High
Corner radius
4px

Use Mapmaker Bearing

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 “Mapmaker Bearing”. 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 Mapmaker Bearing preset”.

Get your MCP link