MECH Design System - ds.themech.studio

Colors

Type

Space

Border

Buttons

Inputs

Radio

Cards

Badges

Data

Motion

Rules

The MECH Studio

MECH
Design
System

Scifi precision meets old-paper warmth. Square corners. Flat surfaces. Orange is a signal, not decoration. Import once, use everywhere.

<link rel="stylesheet" href="https://ds.themech.studio/tokens.css"> Copy

Version2.0.0

Updated2026-07-05

StackPortable HTML/CSS

ThemesLight + Dark

Geometryradius:0 default

Color Tokens

Core Palette

mech-orange#FF5B24Signal - CTA, active, data

mech-dark#1D1A19Text, headings, dark fills

mech-paper#F9F2EEBase bg - lighter cream

mech-paper-s#F1E7E2Cards, sidebar - warmer

Ink Scale

ink-80#3A3330Secondary text

ink-50#8C7D76Placeholder, disabled

ink-20#D4C8C2Borders, dividers

Semantic

signal-green#2ECC71Success states

signal-red#E74C3CError, destructive

Surface Hierarchy (light)

mech-paper #F9F2EE Page background

mech-paper-s #F1E7E2 Cards, sidebar

mech-dark #1D1A19 Fills, text

Dark Mode Tokens

paper
#1D1A19

paper-s
#252220

dark
#F1E7E2

ink-80
#C4B8B2

ink-20
#3A3330

orange
unchanged

Orange is the same in both modes.
Toggle above to see dark mode live.

Legacy Aliases

Alias	Maps To	Hex
cream	mech-paper	#F9F2EE
charcoal	mech-dark	#1D1A19
brand.orange	mech-orange	#FF5B24

Typography

Space Grotesk - UI, Buttons, Labels, Nav

display-2xl48px - 700

Build.

display-xl36px - 700

Page Heading

display-lg28px - 600

Section Title

display-md22px - 600

Card Title

label / btn13px - 500 - 0.01em

Form Label - Button Text - Nav Item

Poppins - Body & Descriptions

body-lg16px - 400 - 1.6lh

Primary body text. Warm and readable at length on paper.

body-md14px - 400 - 1.6lh

Secondary body - descriptions, sidebar content.

body-sm12px - 400 - 1.5lh

Caption and helper text at minimum size.

JetBrains Mono - All Numbers & Data

mono-lg15px - 400

MECH-0042 - 1,248 tasks - 99.4% - 2026-07-05

mono-sm / meta11px - 0.12em

MECH - STUDIO - DS - v2.0.0

Spacing Scale

space-14px

space-28px

space-312px

space-416px

space-520px

space-624px

space-832px

space-1040px

space-1248px

space-1664px

space-2080px

Borders & Radius

Sharp geometry - radius:0 everywhere

none0px

DEFAULT

sm2px

thumb only

full9999px

track only

Border weights

1px solid ink-20 - default

1px solid ink-80 - strong / table headers

2px solid mech-orange - active / focused

1px dashed ink-20 - section separators

Shadows - Flat System

Default - shadow:none

Signal - focus ring only

RuleNo drop shadows. No elevation. box-shadow permitted only as the focus ring: 0 0 0 2px rgba(255,91,36,0.30). All depth = border + bg contrast.

Buttons

Variants - square, Space Grotesk

Link buttons - underlined, no border

Use inside tables, card footers, "View all"

Sizes

Destructive & disabled

Inputs

Default

Project NameUsed across all MECH tools

Focus - 2px orange

Task IDOrange on focus

Error state

DeadlineInvalid date format

Select

Status

Radio & Checkbox

Square radio - click to select

Low

Medium

High

Square checkbox - click to toggle

System stability

Collaboration layer

Security compliance

Toggles - pill (standard) and square physical (MECH custom)

PILL TOGGLE

Auto-save enabled

Notifications off

SQUARE PHYSICAL TOGGLE (MECH)

Dark mode

Compact view

Geometry

radio

check

16x16px square. Square inner fill. Square linecap checkmark.

Cards

Content cards

Default

Border darkens on hover. No shadow, no lift.

Active

2px orange border. No glow.

Base surface

mech-paper fill for nested contexts.

Metric cards

Tasks Complete247+12% this sprint

Build Time4.2s-0.8s vs last

Coverage91%38 modules

Panel card

Panel Title

Header uses surface bg + border-bottom. Body uses base.

Badges

All variants - square, mono, uppercase

DEFAULTACTIVECLOSEDCOMPLETEFAILED

IN PROGRESSBACKLOGSHIPPINGARCHIVED

Data Display

Progress bars - square segments

SPRINT PROGRESS73%

CREDITS USED56.4M / 100M

COVERAGE91%

Table

Ref	Task	Status	Assignee	Credits
`MECH-001`	DS v2.0 tokens	COMPLETE	Ajai	2,400
`MECH-002`	Studio CRM schema	ACTIVE	Ajai	8,100
`MECH-003`	Investor demo build	BACKLOG	-	-
`MECH-004`	FANTOM coin system	PENDING	Vithuran	3,750

Breadcrumb

MECH->STUDIO->DS->v2.0.0

Navigation

PROJECTS

The MECH Studio

Studio CRM

Superapp UI

ACTIONS

All Tasks

Inbox

Active state

Active item: border-left: 2px solid mech-orange + base bg lift.Hover: background: ink-20. No border change on hover.

Dividers

Variants

Strong - 1px solid ink-80

Default - 1px solid ink-20

Dashed - section separator

Labeled

SECTION

Motion

Duration scale

instant80ms

fast150ms

base200ms

slow300ms

crawl500ms

Easing - flat, no spring

defaultcubic-bezier(0.4, 0, 0.2, 1)

sharpcubic-bezier(0.4, 0, 0.6, 1)

outcubic-bezier(0, 0, 0.2, 1)

Usage Rules

Sharp Geometry

radius:0 on all elements by default
Toggle track: only round exception
Rounded buttons or cards
radius-md, radius-lg anywhere

Flat Surface

Depth via border + bg contrast only
Hover: border or fill change
Active: 2px orange border
box-shadow on cards or buttons
drop-shadow or filter

The Orange Rule

One CTA per view maximum
Active borders and indicators
Progress fill and data signals
Large background fills
Decoration of any kind

Button Font

All buttons: Space Grotesk always
Link buttons: in-context secondary actions
Poppins on any button
Link buttons as primary CTAs

Monospace

All counts, IDs, percentages
Timestamps, durations, versions
Body text or headings

Uppercase

Status tags, section headers
Breadcrumbs, table headers
Form labels
Page titles, button labels, errors