PRANIT DANDEWAR

Generated Oct 11, 2026

DESIGN.md for monkey.app

monkey.app12 colors5 components-apple-system

Remix

8 screenshots captured· monkey.app

1 / 8 · Monkey: Random Video Chat | Talk to Strangers Instantly · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Monkey
description: |
  Monkey's design system embodies a vibrant, youthful energy centered on
  connection and safety. The dominant purple gradient (#0000EE to #5940DF)
  creates an energetic, trustworthy backdrop that feels modern and approachable.
  The system balances playful brand elements—the iconic monkey mascot,
  lime-green accents—with serious undertones around protection and real human
  connection. Typography is bold and confident, using heavy weights (700–900) to
  command attention, while whitespace and card-based layouts maintain clarity.
  The overall atmosphere is social, safe, and contemporary: a platform where
  strangers can meet with confidence.
source:
  url: "https://monkey.app"
  pagesAnalyzed: 4
  extractedAt: 2026-10-11
  tokensMeasured: true
colors:
  primary: "#0000EE"
  accent: "#5940DF"
  link: "#FFFC01"
  surface: "#FFFFFF"
  surface-alt: "#000032"
  ink: "#FFFFFF"
  body: "#AAAAAA"
  muted: "#000000"
  hairline: "#00FF88"
  accent-1: "#38298C"
  accent-2: "#644AF1"
  accent-3: "#785AFF"
  neutral-1: "#0D0D0D"
typography:
  display-xl:
    fontFamily: "Helvetica Neue"
    fontSize: 60px
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: 0px
  display-lg:
    fontFamily: -apple-system
    fontSize: 50px
    fontWeight: 700
    letterSpacing: 0px
  display-lg-strong:
    fontFamily: -apple-system
    fontSize: 50px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0px
  display-md:
    fontFamily: "Helvetica Neue"
    fontSize: 44.8px
    fontWeight: 900
    letterSpacing: -1px
  display-sm:
    fontFamily: -apple-system
    fontSize: 42px
    fontWeight: 900
    letterSpacing: 0px
  display-xs:
    fontFamily: -apple-system
    fontSize: 40px
    fontWeight: 900
    letterSpacing: 0px
  heading-xl:
    fontFamily: -apple-system
    fontSize: 34px
    fontWeight: 800
    letterSpacing: -0.5px
  heading-lg:
    fontFamily: -apple-system
    fontSize: 32px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0px
  heading-md:
    fontFamily: -apple-system
    fontSize: 30px
    fontWeight: 700
    letterSpacing: 0px
  heading-sm:
    fontFamily: -apple-system
    fontSize: 24px
    fontWeight: 700
    letterSpacing: 0px
  heading-xs:
    fontFamily: -apple-system
    fontSize: 20px
    fontWeight: 700
    letterSpacing: 3px
  heading-xs-tight:
    fontFamily: -apple-system
    fontSize: 20px
    fontWeight: 700
    letterSpacing: 0px
  body-lg:
    fontFamily: -apple-system
    fontSize: 16px
    fontWeight: 400
    letterSpacing: 0px
  body-lg-strong:
    fontFamily: -apple-system
    fontSize: 16px
    fontWeight: 600
    letterSpacing: 0px
  body-lg-2:
    fontFamily: -apple-system
    fontSize: 16px
    fontWeight: 700
    letterSpacing: 0px
  body-md:
    fontFamily: -apple-system
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-sm:
    fontFamily: -apple-system
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.71
    letterSpacing: 0px
  body-xs:
    fontFamily: -apple-system
    fontSize: 13px
    fontWeight: 400
    letterSpacing: 0px
  label-lg:
    fontFamily: -apple-system
    fontSize: 19px
    fontWeight: 800
    letterSpacing: 0px
  label-md:
    fontFamily: -apple-system
    fontSize: 16px
    fontWeight: 500
    letterSpacing: 0px
  label-sm:
    fontFamily: -apple-system
    fontSize: 14px
    fontWeight: 700
    letterSpacing: 1px
    textTransform: uppercase
  caption:
    fontFamily: -apple-system
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 8px
  sm: 10px
  md: 20px
  lg: 28px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 32px
  section: 36px
  band: 40px
borderWidths:
  thin: 1px
shadows:
  sm: "rgba(0, 0, 0, 0.15) 0px 10px 40px 0px"
elevationStrategy: single-tier
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#F8F8FE"
    surface: "#EEEEF4"
    surfaceRaised: "#E7E7EC"
    text: "#10101C"
    textMuted: "#71717B"
    border: "#D5D5DA"
    accent: "#0000EE"
    accentFg: "#FFFFFF"
    focusRing: "#0000EE"
    elevation: shadow
  dark:
    bg: "#0F1011"
    surface: "#FFFFFF"
    surfaceRaised: "#FFFFFF"
    text: "#FFFFFF"
    textMuted: "#AAAAAA"
    border: "#00FF88"
    accent: "#4141FF"
    accentFg: "#FFFFFF"
    focusRing: "#0000EE"
    elevation: "border+surface"
  contrastFailures:
    - "dark: text on surface = 1:1 (needs 4.5:1)"
components:
  card:
    typography: "{typography.body-lg}"
    textColor: "rgb(255, 0, 0)"
  card-sm:
    typography: "{typography.body-lg}"
    textColor: "{colors.ink}"
    padding: "24px 20px 24px 20px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.accent-1}"
  footer:
    typography: "{typography.body-xs}"
    textColor: "rgba(255, 255, 255, 0.4)"
  link:
    typography: "{typography.caption}"
    textColor: "{colors.ink}"
  link-2:
    textColor: "{colors.ink}"
    padding: "0px 10px 0px 10px"
    fontSize: 14px
    fontFamily: -apple-system
    fontWeight: 500
    lineHeight: 3.29
  button-icon:
    textColor: "rgba(16, 16, 16, 0.3)"
    height: 36px
    fontSize: 13.3333px
    fontFamily: Arial
    fontWeight: 400
    rounded: "50%"
  button-icon-2:
    textColor: "{colors.muted}"
    height: 36px
    fontSize: 13.3333px
    fontFamily: Arial
    fontWeight: 400
    rounded: "50%"
  badge-filled:
    typography: "{typography.body-xs}"
    textColor: "rgba(255, 255, 255, 0.7)"
    height: 30px
    padding: "4px 10px 4px 4px"
    rounded: 18px
    backgroundColor: "{colors.accent-1}"
  badge-text:
    typography: "{typography.label-sm}"
    textColor: "rgba(255, 255, 255, 0.5)"
    height: 19px
  badge-filled-lg:
    textColor: "{colors.muted}"
    height: 32px
    fontSize: 16px
    fontFamily: "Helvetica Neue"
    fontWeight: 900
    rounded: "{rounded.sm}"
    backgroundColor: "rgb(255, 230, 0)"
states:
  button-hover:
    target: button
    state: hover
    opacity: 0.9
  button-focus:
    target: button
    state: focus
    outline: none
  other-active:
    target: other
    state: active
    opacity: 0.8
  other-disabled:
    target: other
    state: disabled
    opacity: 1
  button-active:
    target: button
    state: active
    opacity: 0.1
  other-hover:
    target: other
    state: hover
    opacity: 0.8
  card-hover:
    target: card
    state: hover
    transform: "translateY(-2px)"
    backgroundColor: "rgb(64, 41, 154)"
  button-disabled:
    target: button
    state: disabled
    opacity: 0.35
  link-hover:
    target: link
    state: hover
    textDecoration: none
breakpoints:
  - width: 375
    containerWidth: 351
    gridColumns: 1
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 28
    bodyPx: 16
    sectionPaddingX: 16
  - width: 768
    containerWidth: 744
    gridColumns: 1
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 57
    bodyPx: 16
    sectionPaddingX: 16
  - width: 1024
    containerWidth: 819
    gridColumns: 1
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 50
    bodyPx: 16
    sectionPaddingX: 80
  - width: 1280
    containerWidth: 1220
    gridColumns: 1
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 50
    bodyPx: 16
    sectionPaddingX: 80
  - width: 1440
    containerWidth: 1220
    gridColumns: 1
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 50
    bodyPx: 16
    sectionPaddingX: 80
coverage:
  statesFound: 43
  gradientsFound: 0
  rolesUnassigned: 4
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Monkey

1. Visual Theme & Atmosphere

Monkey's design system embodies a vibrant, youthful energy centered on connection and safety. The dominant purple gradient ({colors.primary} — #0000EE to {colors.accent} — #5940DF) creates an energetic, trustworthy backdrop that feels modern and approachable. The system balances playful brand elements—the iconic monkey mascot, lime-green accents—with serious undertones around protection and real human connection. Typography is bold and confident, using heavy weights (700–900) to command attention, while whitespace and card-based layouts maintain clarity. The overall atmosphere is social, safe, and contemporary: a platform where strangers can meet with confidence.

Key Characteristics

Bold purple gradient foundation with high contrast lime-green link accents
Strong, geometric typography (900-weight display faces) paired with clean sans-serif body text
Flat, color-blocked card layouts with minimal shadow depth
Rounded corners on interactive elements, sharp corners on image containers
High opacity variance for layered depth and visual hierarchy
Playful branding (monkey emoji, mascot) balanced with security messaging

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #0000EE): Primary CTAs, brand accent, active states, hero bands; the system's most prominent interactive colour
Accent Band ({colors.accent} — #5940DF): Secondary hero sections, decorative backgrounds, depth differentiation

Interactive

Link ({colors.link} — #FFFC01): Inline hyperlinks, callouts, safety warnings; high-contrast yellow-green for urgent messaging

Accent / Decorative

Accent Level 1 ({colors.accent-1} — #38298C): Decorative section backgrounds, no assigned semantic role
Accent Level 2 ({colors.accent-2} — #644AF1): Decorative accent, no assigned semantic role
Accent Level 3 ({colors.accent-3} — #785AFF): Decorative accent, no assigned semantic role

Neutral Scale

Surface / Primary Text ({colors.surface} — #FFFFFF): Card and panel backgrounds; headings and primary text on dark backgrounds
Surface Alt / Section Band ({colors.surface-alt} — #000032): Alternating section backgrounds, deep navy for contrast
Body Text ({colors.body} — #AAAAAA): Body copy, secondary descriptive text
Muted / Caption ({colors.muted} — #000000): Captions, tertiary text, minimal contrast usage
Neutral Dark ({colors.neutral-1} — #0D0D0D): Neutral base, minimal use

Surface & Borders

Hairline / Border Accent ({colors.hairline} — #00FF88): 1px borders, dividers, subtle accent lines

3. Typography Rules

Font Family

Primary: -apple-system (system font stack for optimized rendering across Apple and modern Linux platforms)
Secondary: Helvetica Neue, Inter, Arial (measured on specific components; fallback to system stack recommended)

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL	Helvetica Neue	60px	900	0.9	0px	Hero headline, max prominence
Display LG Strong	-apple-system	50px	900	1.4	0px	Strong hero accent text
Display LG	-apple-system	50px	700	—	0px	Primary hero heading
Display MD	Helvetica Neue	44.8px	900	—	-1px	Large secondary heading, negative tracking
Display SM	-apple-system	42px	900	—	0px	Tertiary display size
Display XS	-apple-system	40px	900	—	0px	Alternative display variant
Heading LG	-apple-system	32px	900	1.3	0px	Primary section heading
Heading XL	-apple-system	34px	800	—	-0.5px	Large heading, tight tracking
Heading MD	-apple-system	30px	700	—	0px	Section subheading
Heading SM	-apple-system	24px	700	—	0px	Card or component heading
Heading XS	-apple-system	20px	700	—	3px	Compact heading, wide spacing
Heading XS Tight	-apple-system	20px	700	—	0px	Compact heading, normal spacing
Label LG	-apple-system	19px	800	—	0px	Large label, bold accent
Label MD	-apple-system	16px	500	—	0px	Table header, form label
Label SM	-apple-system	14px	700	—	1px	Button label, all-caps emphasis
Body LG Strong	-apple-system	16px	600	—	0px	Bold body variant
Body LG (bold)	-apple-system	16px	700	—	0px	Heavy body accent
Body LG	-apple-system	16px	400	—	0px	Primary body text
Body MD	-apple-system	15px	400	1.6	0px	Alternate body size
Body SM	-apple-system	14px	400	1.71	0px	Secondary body copy
Body XS	-apple-system	13px	400	—	0px	Tertiary copy, fine print
Caption	-apple-system	10px	400	—	0px	Minimal text, metadata

Principles

Display faces use 900-weight (ultra-bold) for maximum impact and brand identity
Negative letter-spacing applied to larger display sizes (Display MD -1px, Heading XL -0.5px) for tighter, more premium feel
All body copy uses 400 weight except where explicitly bold (600, 700) for emphasis
Line height varies by role: display text compressed (0.9–1.3), body text generous (1.6–1.71) for readability
System font stack ensures pixel-perfect rendering across platforms without font loading delays

4. Component Stylings

Buttons

Primary Button (Icon)

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: rgba(16, 16, 16, 0.3)
Padding: 0px
Width / Height: 36px (square icon button)
Border Radius: 50% (circular)
Font: -apple-system, 13.3333px, 400 weight
Border: None
Hover State: opacity: 0.9
Active State: opacity: 0.1
Disabled State: opacity: 0.35

Icon Button (Dark Variant)

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: rgb(0, 0, 0)
Padding: 0px
Width / Height: 36px (square icon button)
Border Radius: 50% (circular)
Font: Arial, 13.3333px, 400 weight
Border: None

Cards & Containers

Card Default (Large Image)

Background: rgba(0, 0, 0, 0) (transparent, image-only)
Text Color: rgb(255, 0, 0)
Padding: 0px
Width: 580px
Height: 232.906px (responsive aspect)
Border Radius: 0px (sharp corners for images)
Border: None
Shadow: None
Font: -apple-system, 16px, 400 weight

Card Container (Accent Background)

Background: rgb(56, 41, 140) ({colors.accent-1})
Text Color: rgb(255, 255, 255)
Padding: 24px 20px ({spacing.xl} vertical, {spacing.lg} horizontal)
Width: 1152px
Height: 148px (flexible)
Border Radius: 8px ({rounded.xs})
Border: None
Shadow: None
Font: -apple-system, 16px, 400 weight
Hover State: transform: translateY(-2px), borderColor: var(--yellow), backgroundColor: rgb(64, 41, 154)

Inputs & Forms

Form Input (Search / Select)

Background: rgb(56, 41, 140) (dark accent container)
Text Color: rgb(255, 255, 255)
Padding: 24px 20px (generous spacing)
Border Radius: {rounded.xs} (8px, soft corners)
Border: None (flush background)
Font: -apple-system, 16px, 400 weight

Disabled Input State

Color: var(--van-field-input-disabled-text-color)
Opacity: 1

Navigation

Footer Link

Text Color: rgba(255, 255, 255, 0.4) (muted white)
Padding: 0px
Font: -apple-system, 13px, 400 weight
Border: None
Background: Transparent
Hover State: textDecoration: underline, color: var(--yellow)

Header Link (Default)

Text Color: rgb(255, 255, 255)
Padding: 0px 10px ({spacing.xs} horizontal)
Font: -apple-system, 14px, 500 weight
Line Height: 46px (vertical alignment)
Border: None
Background: Transparent

Link Hover State

Color: rgb(255, 255, 255)
Background: rgb(0, 0, 0) (invert on hover)
Text Decoration: None

Badges

Badge Filled (Standard)

Background: rgb(56, 41, 140) ({colors.accent-1})
Text Color: rgba(255, 255, 255, 0.7) (muted white)
Padding: 4px 10px ({spacing.xxs} / {spacing.xs})
Border Radius: 18px (pill shape, soft)
Height: 30px
Font: -apple-system, 13px, 400 weight
Border: None

Badge Text (Label)

Background: Transparent
Text Color: rgba(255, 255, 255, 0.5) (highly muted)
Padding: 0px
Border Radius: 0px (no rounding)
Font: -apple-system, 14px, 700 weight
Border: None

Badge Filled Large (Yellow)

Background: rgb(255, 230, 0) (bright yellow, semantic accent)
Text Color: rgb(0, 0, 0) (dark text for contrast)
Padding: 0px
Border Radius: 10px ({rounded.sm})
Width / Height: 32px (compact square)
Font: Helvetica Neue, 16px, 900 weight
Border: None

5. Layout Principles

Spacing System

Base unit: {spacing.xs} = 8px

Scale (all multiples of 4px for grid alignment):

{spacing.xxs} = 4px (micro spacing between tight elements)
{spacing.xs} = 8px (compact spacing, icons with labels)
{spacing.sm} = 12px (small gaps, nested containers)
{spacing.md} = 16px (standard spacing, component padding)
{spacing.lg} = 20px (generous spacing, card internals)
{spacing.xl} = 24px (large spacing, section separation)
{spacing.xxl} = 28px (extra-large spacing)
{spacing.xxxl} = 32px (major spacing, layout blocks)
{spacing.section} = 36px (section break spacing)
{spacing.band} = 40px (large band spacing, hero sections)

Usage Context:

Padding: Use {spacing.md} for standard button/card padding; {spacing.lg} for larger containers
Margins: Use {spacing.xl} for section separation; {spacing.band} for major layout breaks
Gaps: Use {spacing.xs} for compact lists; {spacing.md} for flexible grids

Grid & Container

Max Width: 1220px (locked at 1280px+ viewport)
Column Strategy: Single-column layout maintained across all measured breakpoints (375px, 768px, 1024px, 1280px, 1440px); content reorganizes vertically rather than horizontally
Section Patterns: Full-width hero sections with constrained content gutters; card-based content zones at 1152px (subset of max width)

Whitespace Philosophy

Aggressive whitespace and breathing room define the layout. Large vertical spacing ({spacing.band} = 40px) separates major sections. Horizontal padding remains generous (80px at desktop, 16px at mobile) to prevent edge-hugging. Cards and containers use consistent internal padding ({spacing.lg} to {spacing.xl}) to feel premium and uncluttered. No cramped layouts; every element has clear visual separation.

Border Radius Scale

{rounded.none} = 0px (image containers, sharp photographs)
{rounded.xs} = 8px (card containers, form inputs, primary UI surfaces)
{rounded.sm} = 10px (badge containers, accent elements)
{rounded.md} = 20px (larger cards, prominent containers)
{rounded.lg} = 28px (oversized rounded containers, decorative elements)
{rounded.full} = 9999px (circular badge pills, icon buttons)

Component Application:

Buttons (icon): {rounded.full} (36px circular)
Cards: {rounded.xs} (8px soft corner)
Form inputs: {rounded.xs} (8px soft corner)
Badges: {rounded.full} (pill shape) or {rounded.sm} (10px for variants)
Images: {rounded.none} (sharp, photographic)

Border Widths

Thin: 1px (table borders, subtle dividers)

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow, solid color, `box-shadow: none`	Card backgrounds, primary surfaces
Lifted	`rgba(0, 0, 0, 0.15) 0px 10px 40px 0px`	Card hover state, minor elevation

Shadow Philosophy:

The system relies on color blocking and opacity shifts rather than aggressive shadow depth. A single subtle shadow (rgba(0, 0, 0, 0.15) at 10px offset, 40px blur) appears only on card hover, creating a micro-lift effect. Most surfaces remain flat, using background color and border treatments to define depth. This approach prioritizes clarity and speed over realistic 3D rendering.

Opacity Levels

Full (1.0 / 100%): Standard opaque elements, primary text
High (0.80 / 80%): Hover states, interactive feedback
Medium (0.70 / 70%): Secondary text, muted badges
Medium-Low (0.50 / 50%): Disabled states, overlays
Low (0.35 / 35%): Disabled buttons, tertiary text

Z-index / Layering

Base: z-index: 2 (standard stacking context)

(Note: Only one z-index value was explicitly extracted. Additional layering for modals, toasts, and dropdowns may exist but were not measured in the captured stylesheets.)

7. Do's and Don'ts

Do

Use bold, 900-weight typography for all display and headline text; this is core to Monkey's confident brand voice
Apply full-width hero sections with centered, constrained content (max 1220px) for hierarchy
Maintain single-column layouts on mobile (375–768px); avoid multi-column grid until desktop (1024px+)
Use {colors.primary} (#0000EE) for primary CTAs and interactive elements; it is the system's anchor
Leverage the purple gradient ({colors.primary} to {colors.accent}) as a hero band backdrop
Apply {colors.link} (#FFFC01) to inline links, warnings, and safety callouts; the yellow pops against dark backgrounds
Use generous padding ({spacing.lg} to {spacing.xl}) on cards and containers; don't cram content
Round button corners to full circles ({rounded.full}) for icon-only actions; use {rounded.xs} (8px) for text buttons
Keep shadows minimal; prefer color and opacity shifts for depth
Test all body copy at {spacing.md} (16px) or larger for readability
Use card containers with {rounded.xs} (8px) and consistent internal padding for a polished, modular feel

Don't

Do NOT use thin sans-serif fonts for headlines; always use 700–900 weights
Do NOT create multi-column layouts on mobile; Monkey uses single-column all the way up
Do NOT apply heavy shadows; rely on color blocking and opacity instead
Do NOT mix typefaces excessively; stick to -apple-system for body and control text
Do NOT forget negative letter-spacing on display sizes (Display MD: -1px, Heading XL: -0.5px); it defines the premium feel
Do NOT overuse the secondary accent colors ({colors.accent-1}, {colors.accent-2}, {colors.accent-3}); they are decorative, not semantic
Do NOT reduce padding below {spacing.md} (16px) on card containers; the system breathes through space
Do NOT apply rounding to image containers; they must be sharp ({rounded.none})
Do NOT disable or hide the link color underline; {colors.link} must stand out
Do NOT attempt a dark/light mode flip; this system is designed for one theme (purple gradient primary)
Do NOT invent status colors (error red, success green); the site does not declare semantic states

8. Responsive Behavior

Breakpoints

Viewport	Content Width	Grid Columns	Key Changes	Section Padding X
375px (Mobile)	351px	1	Single-column layout; tight horizontal spacing; display text reduced to ~28px	16px
768px (Tablet)	744px	1	Still single-column; display text expands to ~57px; content column widens	16px
1024px (Desktop Small)	819px	1	Layout remains single-column; content max-width locks; section padding expands to 80px	80px
1280px (Desktop)	1220px	1	Max width reached; remains locked at 1220px through 1440px; no multi-column conversion	80px
1440px (Desktop Large)	1220px	1	Max width locked; section padding stable at 80px	80px

Touch Targets

Minimum interactive element size: 36px × 36px (icon buttons, measured)

All text links and buttons must have padding sufficient to reach at least 44px tall on mobile for thumb-friendly tapping. Cards and container tap areas should never be smaller than 36px in height.

Collapsing Strategy

Mobile (375px): Hero headlines compress to {typography.heading-sm} (24px); body text locks to {typography.body-lg} (16px); section padding halves to {spacing.md} (16px) horizontal; cards stack vertically with full-width layout
Tablet (768px): Headlines expand toward {typography.display-lg} (50px); single-column maintained; card widths adapt to viewport; section padding remains 16px
Desktop (1024px+): Full display typography ({typography.display-xl} 60px+); section padding expands to 80px; max-width container locks at 1220px; whitespace and breathing room maximize

No hidden elements between breakpoints; all content flows and reflows vertically. Horizontal grid never expands beyond one logical column per the extracted data.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA / Brand Accent: Primary (#0000EE) — use for buttons, active states, hero bands
Secondary Accent / Band: Accent (#5940DF) — decorative sections, depth layers
Link / Safety Alert: Link (#FFFC01) — inline hyperlinks, urgent messaging, high contrast
Card / Container Surface: Accent-1 (#38298C) — dark card backgrounds, form inputs
Text on Dark (Primary): Surface (#FFFFFF) — all headings and body on dark backgrounds
Text on Light (Secondary): Body (#AAAAAA) — secondary descriptive text
Muted / Caption: Muted (#000000) — minimal use, captions, tertiary text
Border / Hairline: Hairline (#00FF88) — 1px dividers, subtle accents

Iteration Guide

Always use 900-weight fonts for display and headlines — this is Monkey's defining typographic trait; never default to 400 or 600 weight on headings
Apply negative letter-spacing to large display sizes — Display MD at -1px, Heading XL at -0.5px creates a premium, tight feel
Maintain single-column layout on all breakpoints — Monkey does not use multi-column grids; content always stacks vertically
Lock max content width at 1220px — above 1024px, no layout scaling; constrain with horizontal padding (80px desktop, 16px mobile)
Use {colors.primary} for all primary CTAs — it is the visual anchor; do not substitute with accent colors
Apply card padding consistently — {spacing.lg} (20px) to {spacing.xl} (24px) inside card containers; never compact below {spacing.md} (16px)
Round icon buttons to circles ({rounded.full}) and text buttons to soft corners ({rounded.xs} 8px) — this differentiates button roles
Use opacity for depth instead of shadows — hover states at 0.8–0.9 opacity; disabled at 0.35; no aggressive drop shadows except on card lift
Apply {colors.link} (#FFFC01) to all inline links — it must stand out against dark backgrounds; always underline on hover
Test responsive at 375px, 768px, 1024px — these are the key breakpoints; no intermediate responsive tweaks needed

10. Known Gaps

Interaction States (Partial): The extraction captured button hover (opacity: 0.9), focus (outline: none), active (opacity: 0.1), and disabled (opacity: 0.35) states, but many components may have additional states (focus-ring color, pressed, aria-current) not present in the measured stylesheets
Semantic Status Colors: The site does not declare or use error, success, warning, or info colors in its extracted markup; a semantic status ramp does not exist in this system
Dark / Light Mode: This system was extracted from a single visual theme (light text on purple gradient). No dark-mode or adaptive theme variants were measured or are documented
Gradients & Decorative Meshes: The extraction did not capture gradient fills, mesh backgrounds, or animated effects beyond opacity shifts; all documented colors are solid
Unassigned Accent Colors: Four colours have no measured semantic role—{colors.accent-1} (#38298C), {colors.accent-2} (#644AF1), {colors.accent-3} (#785AFF)—and are used only decoratively; do not assign them new roles without design review
Advanced Component States: Popovers, modals, tooltips, and dismissible alerts were not captured; their styling and layering exist but are not documented here
Z-index Layers Beyond Base: Only one z-index value (z-index: 2 as base) was measured; modal, dropdown, sticky, and toast layering (if any) are not documented
Cross-Origin Stylesheets: Some external CSS files may not have been parsed, leaving interaction details or component variants unmeasured
Authentication / Gated Content: Pages requiring login were not visited; design tokens behind authentication walls are not included
Font Weights Beyond Measured: Only the weights 400, 500, 600, 700, 800, 900 were captured; intermediate weights (e.g., 550) may exist but are not documented
Custom Properties / CSS Variables: The extraction references some var() declarations (e.g., var(--yellow), var(--van-*)) that were not fully resolved; their underlying values may differ from context to context

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from monkey.app

Primary

#0000EE

Primary CTA, brand accent, active state

#5940DF

Secondary accent / hero band

#FFFC01

Inline link colour

#38298C

Accent / decorative

#644AF1

Accent / decorative

#785AFF

Accent / decorative

Neutral

#FFFFFF

Card / panel background; Headings / primary text

#000032

Alternating section band

#AAAAAA

Body copy

#000000

Captions, secondary text

#00FF88

1px borders and dividers

#0D0D0D

Neutral

Typography · -apple-system

body16px · 400

body15px · 400 · 24px

body16px · 600

body16px · 700

body13px · 400

caption10px · 400

body14px · 400 · 24px

h142px · 900

h250px · 700

h330px · 700

body20px · 400

link14px · 500 · 46px

table-header16px · 500

display50px · 900 · 70px

body18px · 400

body20px · 600

heading34px · 800

heading24px · 700

body18px · 700

label14px · 700

label19px · 800

body13px · 700

h132px · 900 · 41.6px

h220px · 700

h320px · 700

h414px · 700

link15px · 600

heading18px · 900

heading18px · 700

display40px · 900

body22px · 700

Typography · Inter

body14px · 400 · 17.5px

h132px · 900 · 41.6px

body16px · 400 · 24px

link21px · 600 · 21px

input16px · 400

body23px · 800 · 25.3px

body21px · 600 · 21px

Typography · Helvetica Neue

h160px · 900 · 54px

h244.8px · 900

h364px · 700 · 89.6px

link24px · 700

body16.8px · 400 · 28.56px

heading22.4px · 800 · 26.88px

heading28px · 900

body24px · 500

heading20px · 600

body14px · 500 · 46px

body20px · 400

body19px · 500 · 48px

Typography · Arial

body18px · 400 · 30.6px

heading30px · 700 · 51px

body18px · 700 · 30.6px

Spacing

12px

20px

28px

40px

24px

16px

36px

8px

Elevation

rgba(0, 0, 0, 0.15) 0px 10px 40px 0px

Components · 5

Remixes of monkey.app

Latest remixes

No public remixes yet. Be the first to make one.

Remix it