@nqmcreative/ui

Component preview

Flat surfaces, no shadows, no radius except pills. Brand teal is the primary tone — every component also takes a tone prop for the seven other hues.

Palette

brand
accent
violet
info
success
warning
danger
neutral

each tone ships base / hover / light / border steps

Buttons

Badges

brand accent violet info success warning danger neutral
Solid Outline Small

Forms

Shown on the invoice.

Numbers only.

Markdown supported.

Standard MSA.
Save 20%.
Email notifications Weekly digest only.

Feedback

Heads up

Rendering takes about two minutes.

Deployed

Live on production.

Quota at 85%

Upgrade before the end of the cycle.
Storage 72%
Render queue 38%

Data display

Revenue
1,2M up 12.4%
Churn
2.1% down 0.4%
Active projects
18
Across 9 clients
Status
Sundara RebrandSundara Live84.000.000
Nusantara CoffeeNC Group In review52.500.000
Kelana Travel AppKelana Draft120.000.000

selected: (none) · sort: (none)

NQ RA SM DP
NQ Press ⌘ K to search

Navigation

active: overview

Strategy, design and two rounds of revision per sprint.
Kick-off within five business days of the signed SOW.
Yes — with 14 days notice, once per quarter.

Overlay & empty states

nqmcreative.com (opens in a new tab) Accent link

No projects yet

Create your first project to see it listed here.

Archive this project?

It stays readable but stops accepting new work.

Archiving moves Sundara Rebrand out of the active list. You can restore it at any time.

Menus, popovers & drawers

Project settings

Applies to this project only.

Weekly digest Sent every Monday.
Render quality 65%
0100

Toasts

fired from a module-level store; one <Toaster /> is mounted at the bottom of this page

Advanced form controls

Toggled by the suffix button.

Type to filter, arrows to move.

Opacity 65%
050100
Delivery

File upload

Specialised fields

Runs 300ms after you stop typing.

https:// .com

Grouped on blur — the bound value stays a number.

brand motion
2/6

Enter or a comma commits. Six at most.

No file chosen

One file, 2 MB.

Paste all six at once.

nothing searched yet · 2 topics · 84.000.000 · 09:30 · #0f766e

Command, confirm & context menu

Right-click anywhere in this area
esc

Create

New project ⌘N
Invite a teammate

Navigate

Open settings
Billing & invoices

Danger

Archive project

Delete this project?

Everything in Sundara Rebrand goes with it. This cannot be undone.

Grouped choice controls

Included in the studio

Pick up to three.

Dates & multi select

Type it, or pick from the calendar.

Weekends are blocked out.

deadline: (empty) · kick-off: 2026-09-14

Brand identity Motion

Up to four.

September 2026
MonTueWedThuFriSatSun

Calendar stands alone, and DatePicker wraps it in a text field. Month and weekday names come from the browser; the field's part order is set by its format prop.

Cards

Outline

Default

Hairline border on white.

Filled

Alt surface

Sits on the alt surface.

Tinted

Accent

Uses the tone's light step.

With footer

Left rule in the tone colour.

updated 2 days ago