Design System
v1.0
Canonical design system

DMM Growth Platform

A calm, data-dense internal-tool system that adapts the warm Digital Monk brand into a dark-default operational surface. One teal accent, scarce gold, Poppins throughout, and four semantic color systems — stage, score, stream, status — that make the product readable at a glance. Every value below is derived from the live build and documented in DESIGN.md.

Dark is the internal default · Light is the public Audit surface

Brand

The brand layer — logo lockups, the mark, and the geometry motif library. These aren't UI components; they carry the Digital Monk identity and follow strict usage rules.

Logo lockups

Digital Monk — white wordmark
Wordmark · on darkdm-wordmark-light.png
Digital Monk — dark wordmark
Wordmark · on lightdm-wordmark-dark.png
Digital Monk mark
Gold mark · standalonedm-mark.png

Logo do's & don'ts

Do
  • Keep clear-space ≥ the cap-height of "MONK" on all sides.
  • Pick the lockup that contrasts with the surface (white on dark, dark on light).
  • Scale the whole lockup proportionally.
Don't
  • Re-typeset "DIGITAL MONK" in Poppins — always use the asset.
  • Recolor the gold mark or the text, or add effects/shadows.
  • Stretch, rotate, or place the wordmark on a low-contrast background.

Geometry motifs decorative watermark only

Accent motifs & mascot

bullet
Moon bulletlist / feature bullets
mascot
Monk mascotsparingly · marketing only

Screen Index

Every prototype screen, grouped by module. Click to jump straight in — links set the route and open the live app.

Color

Dark palette is primary (internal app). The light palette drives the public Audit surface.

Brand & accent

Ink ladder

Surfaces & hairlines

Semantic · Stage lifecycle pills

Semantic · Score audit bands 0–39 / 40–69 / 70–100

Semantic · Stream email sending

Semantic · Status

Typography

Poppins, one family, weights 400–700. Hierarchy from size + weight, never family.

Shape, Spacing & Elevation

6-step radius scale, 4px spacing base, surface-ladder depth.

Radius

Spacing 4px base

Elevation

Flat · 0
Panel · sm
Float · md
Overlay · lg

Components

Rendered with the live app stylesheet — what you see is what ships.

Buttons

Inputs & controls

Enter a valid email.
Checkbox
Toggle

Badges, pills & chips

38 54 81 Prospect Audited Client Cold Transactional Healthy Action needed Dentist Stage Score 0–39

Metric cards

Prospects
11
↑ 18 this week
Open rate
41%
↑ 4.2%
Bounce rate
2.1%
↓ 0.3%

Data table + selection

Name Stage Score Owner
Acme Dental Clinic Audited 38 AK
Mountainview Dental Client 78 MA
Bright Smiles Dental Prospect

Banners

Tabs · Progress · Toast

Overview
Contacts
Audits 2
Emails
UndoLead archived

Wizard steps · Sequence step

Source
2Targeting
3Options
1
Step 1 · sends immediately
Cold outreach #1