Moq — Design system

01 / THE MOQ SYSTEM

Make room for the work.

Moq is expressive around the edges and quiet where you create.

01

The work comes first.

Artwork keeps its colors. The interface steps back. No decorative surface competes with the canvas.

02

Motion has a reason.

A handoff, a selection, a change in state. Every movement explains what just happened.

03

Cobalt is a signature.

A little blue goes a long way. Use it to find your place, not to fill every surface.

04

Glass belongs above.

Floating navigation and tools can carry the material. Content, forms, and long text stay settled.

05

Familiar, with a twist.

Mac conventions make the tool feel obvious. Moq’s frames and motion make it feel like us.

06

Your Mac. Your work.

Say what is local, what connects, and what is still being built. The interface earns trust through specifics.

02 / THE MOQ SYSTEM

A frame. An open possibility.

The interlocking mark holds two ideas at once: your work, and what it can become.

Mark + wordmark / primary

Reversed / dark surfaces

App icon / a little depth

Give it space

Leave at least half the mark’s width clear on each side. Use the flat mark in navigation; save the dimensional icon for the app and brand moments.

Keep it intact

Use the approved SVG. No stretching, redrawing, or decorative effects on the flat mark. The icon keeps its supplied material and cobalt.

03 / THE MOQ SYSTEM

Mostly quiet. A little cobalt.

Neutral surfaces give your work the spotlight. Cobalt tells you where you are.

On the site

Cobalt is reserved for the icon, active states, and deliberate brand moments. Primary CTAs stay ink.

In the app

Use cobalt for selection and meaningful focus. Source media retains its own palette. Status colors always have a text label.

04 / THE MOQ SYSTEM

Editorial outside. Precise inside.

The site invites you in. The app helps you get things done.

MARKETING / GEORGIA

Put your work
in motion.

Regular · balanced lines · −0.035em

APP / SYSTEM UI + INTER

Find your frame.

Composition Orbit carouselCorner radius 24 pxExport 1080 · 30 fps

Clear labels · tabular figures · sentence case

Role	Marketing	App direction
Display	48–64 / 1.08 · Georgia	Brand moments only
Section heading	32–40 / 1.1 · Georgia	20–28 / 1.2 · UI 600
Body	16 / 1.5 · Inter	13 / 1.5 · UI
Control	14–15 / 1 · UI 500	13 / 1.3 · UI 500
Micro label	10–11 / 1.4 · tracked	11 / 1.4 · sentence case

05 / THE MOQ SYSTEM

A steady rhythm.

Build on four. Let related things sit together, and give new ideas room.

4

8

12

16

20

24

32

40

48

64

80

96

128

Marketing

1024px content container. 32px side padding, 24px on mobile. 96–128px between sections.

App direction

4–8px inside groups. 12–16px between groups. 24px for a distinct panel. Density serves the task.

06 / THE MOQ SYSTEM

Continuous, all the way around.

Nested frames share one family of corners. No unrelated radius hiding in a component.

Switch to see the difference.

8pxSmall control

14pxInner panel

16pxPanel / FAQ

24pxCard

40pxHero stage

PillPill

Cards use superellipse(1.25), pills 1.4. Browsers without corner-shape keep the same radius. No SVG masks.

07 / APP DIRECTION

A layer of possibility.

Liquid Glass gives controls a sense of place above the canvas. The work itself stays clear.

Reduce transparency

MOQ / MATERIAL STUDY

2.106.00

Content stays clear. Controls float.

Interactive web material studyHow this maps to the app

Glass: the control layer

Floating toolbar, transport, transient tools, and popovers. Use an edge highlight and controlled blur; group related controls in one surface.

Solid: the content layer

Canvas, artwork, long text, form fields, and dense inspector sections. Glass should clarify the hierarchy, not turn the whole app translucent.

Guided by Apple’s material guidance ↗. This is a web visual study; native app material behavior remains app-side work.

08 / THE MOQ SYSTEM

One clear next step.

Ink for the primary action. A lighter surface for everything beside it.

Variant	Geometry	Response
Marketing	42px · 15px / 500 · pill	1.04× lift · 350ms quint
Compact	32px · 14.5px · pill	Arrow reveal · 300ms
App direction	32px · 13px · UI	Glass for floating controls; solid in forms
Keyboard	2px outline · 3px offset	Always visible

09 / APP DIRECTION

Small controls. Clear decisions.

Familiar controls, grouped by what you’re trying to do.

Composition

Soft shadowMotion intensity 60%

Aspect ratio

Live control specimen / not an export

10 / THE MOQ SYSTEM

The frame does the organizing.

A calm container, a useful preview, and an unmistakable selected state.

Card

24px squircle. 16px nested panel. An inset selection ring, so the layout does not jump.

Preview

Artwork stays honest. Keep a poster visible while motion loads; reduced motion gets the still.

11 / THE MOQ SYSTEM

It moves because you did.

Fast enough to stay out of your way. Soft enough to feel considered.

cubic-bezier(.23, 1, .32, 1)

Duration	Use
150–200ms	Link and icon response
220ms	Image / usable-video crossfade
300ms	Accordion, controls, arrow reveal
350ms	CTA scale + shadow
Reduced motion	Immediate final states; no looping previews

12 / THE MOQ SYSTEM

A little more, when you need it.

The real homepage accordion. One answer open; both directions stay smooth.

A few things you might wonder.

13 / THE MOQ SYSTEM

Good company. Clear identities.

Use the real provider marks, with their own character. Connection status is separate from the logo.

CodexLocal MCP

ClaudeMCP client setup

CursorMCP client setup

GrokPlanned connection

Codex, Claude, Cursor, and Grok marks are third-party identities. Grok is a planned connection. No affiliation or endorsement implied.

14 / THE MOQ SYSTEM

Useful, at a glance.

Functional icons stay in one family. Brand marks stay true to their source.

Functional

Lucide, 1.75px stroke. 12px for supporting marks, 16px in controls, 20px in navigation.

Brand

Apple is the Apple logo, not a fruit icon. Provider marks are supplied SVG artwork, not redrawn with interface icons.

15 / THE MOQ SYSTEM

A little personality. No performance.

Speak like a thoughtful creative tool. Specific about the work, honest about what happens next.

Say

“Your export is ready.”
“Try another direction.”
“Saved on this Mac.”

Skip

“Your creativity, supercharged.”
“The ultimate AI-powered solution.”
“Something went wrong.”

Sentence case. Short labels. Name the error and the recovery step. A button says what it does.

16 / IMPLEMENTATION HANDOFF

One identity. Two working distances.

Carry the brand into the app without carrying over the marketing layout.

Layer	Marketing site	App direction
Type	Editorial serif + Inter	System UI / Inter; compact, precise
Surface	Paper, solid cards	Solid canvas + floating glass controls
Blue	Icon and brand moments	Selection, focus, active tools
Shape	8 / 14 / 16 / 24 / 40 / pill	Same family; nested by containment
Motion	CTA lift and guided discovery	State changes, transport, tool handoffs
Layout	Generous vertical rhythm	Dense, grouped, task-oriented
Fallback	Normal radius without corner-shape	Opaque surfaces when transparency is reduced

A direction the app can build from.

The current desktop app uses Electron and React. These glass studies specify the visual hierarchy; they do not install native Liquid Glass. Platform materials, OS availability, and accessibility fallbacks belong in the app implementation.

17 / THE MOQ SYSTEM

Comfort is part of the craft.

Clarity should survive a small screen, a keyboard, and a quieter motion setting.

Always readable

Keep text on stable surfaces. Target 4.5:1 for body copy. Glass gains a solid fallback when transparency is reduced.

Always reachable

Visible focus. Real buttons. Labelled controls. Closed accordion answers are inert. Hover never hides essential information.

Motion optional

Honor reduced motion. Pause looping previews. Keep still posters; the work never disappears with the animation.

Color is one signal

Pair a status with words or an icon. Cobalt selection has a ring; warning and error states explain what to do.

18 / THE MOQ SYSTEM

A source of truth you can use.

The page uses the same CSS tokens as the site. Download the primitives for the app handoff.

Download JSON

:root {
  --moq-cobalt: #064cff;
  --moq-cobalt-soft: #edf2ff;
  --moq-ink: #1d1d1b;
  --moq-button: #202020;
  --moq-button-foreground: #fdfcfc;
  --moq-paper: #f8f8f8;
  --moq-white: #ffffff;
  --moq-surface: #efefef;
  --moq-muted: #6e6e6b;
  --moq-line: rgba(29, 29, 27, .12);
  --moq-success: #3c7655;
  --moq-warning: #946521;
  --moq-danger: #b6463c;
  --moq-glass-light: rgba(255, 255, 255, .58);
  --moq-glass-dark: rgba(24, 28, 38, .64);
  --moq-glass-edge: rgba(255, 255, 255, .72);
  --moq-glass-blur: 24px;
  --moq-radius-control: 8px;
  --moq-radius-inner: 14px;
  --moq-radius-panel: 16px;
  --moq-radius-card: 24px;
  --moq-radius-stage: 40px;
  --moq-radius-pill: 9999px;
  --moq-squircle-pill: superellipse(1.4);
  --moq-squircle-card: superellipse(1.25);
  --moq-ease-quint: cubic-bezier(.23, 1, .32, 1);
  --moq-duration-interface: 300ms;
  --moq-duration-lift: 350ms;
  --moq-shadow-ring: 0 0 0 .5px rgba(10, 11, 13, .09);
  --moq-shadow-lift: 0 0 0 .5px rgba(10, 11, 13, .09), 0 2px 6px rgba(10, 11, 13, .08);
  --moq-shadow-glass: inset 0 1px 0 rgba(255, 255, 255, .7), 0 12px 32px rgba(12, 22, 48, .12);
}

Source: marketing/src/styles/brand-tokens.css. App material tokens are a proposal until implemented in the desktop app.

A little motion.A clear system.