DesignMD

Overview

DesignMD is a developer-centric design system extraction platform that embodies "Technical Minimalism" — a design philosophy that strips away visual noise while maintaining technical precision and clarity. The brand serves developers, designers, and AI coding agents who need to rapidly extract, document, and standardize design tokens from live websites. The aesthetic is deliberately austere: a near-black canvas (rgb(23, 23, 23)) with vibrant accent colors (primary blue #3b82f6, secondary violet #a78bfa, tertiary pink #f472b6) that punctuate the interface like neon highlights in a dark studio. The UI evokes the feeling of a high-precision instrument — every pixel intentional, every interaction responsive, every color choice purposeful.

The brand voice is direct, technical, and confident without being arrogant. DesignMD speaks to developers in their language: precise, outcome-focused, and free of marketing fluff. Vocabulary patterns favor action verbs (extract, generate, match, deploy) and concrete nouns (tokens, specs, agents). The tone is calm and assured, never breathless or hyperbolic. Example sentence: "Paste a URL — get a production-ready DESIGN.md and an interactive HTML preview with color palettes, typography, and component patterns."

Colors

The color system is built on a dark-first philosophy with strategic accent injection. The surface stack anchors the interface: surface (#171717) is the primary canvas, surface-container (#1c1c1c) elevates secondary content, and surface-container-highest (#313131) reserves the deepest interactive layers. On-surface (#fafafa) provides near-white text contrast (WCAG AAA compliant at 16.5:1 ratio). Primary (#3b82f6) is the signature accent — a medium blue used exclusively on CTAs, focus states, and key interactive elements; it appears on the "Generate" button, link hovers, and input focus rings. Secondary (#a78bfa) and tertiary (#f472b6) support the primary accent in badge states, status indicators, and decorative elements (visible in the logo's gradient circles). Error (#ff6b6b) signals destr

Typography

The type system uses Inter exclusively (Google Fonts: https://fonts.google.com/specimen/Inter), a geometric sans-serif that balances technical precision with human warmth. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; headline-lg (48px, 700 weight) is reserved for page titles and primary CTAs; headline-md (32px, 600 weight) breaks sections; title-lg (20px, 600 weight) labels cards and subsections; body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry narrative content; label-md (14px, 600 weight) and label-sm (12px, 500 weight) label buttons, badges, and form fields. The weight hierarchy is strict: 700 for display/headlines (visual dominance), 600 for titles and labels (hierarchy), 400 for body (readability). Letter-spacing is negativ

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. The gutter is 24px (md spacing), creating breathing room between sections without excessive whitespace. Container padding is 24px on desktop, 12px on mobile, maintaining the visual rhythm across breakpoints. The spacing scale is semantic: xs (4px) for micro-adjustments within components, sm (12px) for internal component padding, md (24px) for section separation and card padding, lg (40px) for major section breaks, xl (64px) for hero-to-content transitions. The hero section uses lg spacing above and below to create visual separation from the navigation and content sections. Input fields and buttons are 48px tall (height: 48px) with 12px vertical padding and 24px horizontal padding, following Materia

Elevation & Depth

Depth in DesignMD is achieved through a layered shadow system and subtle border treatments, not through color darkening. Level 1 (Base): the surface (#171717) with no shadow, representing the canvas. Level 2 (Standard Card): surface-container (#1c1c1c) with a 1px border at outline-variant (#505050) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), creating a soft lift. Level 3 (Elevated/Hover): surface-container-high (#262626) with a 1px border at primary (#3b82f6) and box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15), signaling interactive focus. Level 4 (Modals/Overlays): surface-container-highe

Shapes

The shape philosophy is "Precision Softness" — rounded corners are used strategically to soften technical interfaces without sacrificing clarity. Buttons use rounded.lg (1rem / 16px) for a balanced, approachable feel; inputs use rounded.md (0.75rem / 12px) to signal form-specific purpose; cards use rounded.xl (1.5rem / 24px) to create visual breathing room and reduce visual weight; badges and pills use rounded.full (9999px) to emphasize their secondary, non-critical nature. The rationale: larger radii (xl, full) on containers and secondary elements create a friendly, modern aesthetic; medium r

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses backgroundColor: {colors.primary} (#3b82f6), textColor: {colors.on-primary} (#fafafa), typography: {typography.label-md}, rounded: {rounded.lg}, padding: 12px 24px, and height: 48px. On hover, the background shifts to {colors.primary-fixed-dim} (#2563eb) and a soft shadow (0 4px 12px rgba(59, 130, 246, 0.3)) appears, creating a tactile lift. On active (click), the background darkens to {colors.primary-container} (#1e40af) and the button scales to 0.98 (transform: scale(0.98)) for haptic feedback. button-secondary uses a transparent background with a 1px border at {colors.outline-variant}, textColor: {colors.on-surface}, and the same padding and height. On hover, the background becomes {colors.surface-con

Do's and Don'ts

**Do**

• Do use primary (#3b82f6) exclusively on CTAs, focus states, and key interactive elements — never on body text or large surface areas.
• Do maintain the 48px button height and 12px/24px padding ratio across all button variants to ensure consistent touch targets and visual rhythm.
• Do apply transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) to all interactive state changes (hover, focus, active) for smooth, predictable feedback.
• Do use the rounded token scale (sm, DEFAULT, md, lg, xl, full) consistently — never hardcode border-radius values.
• Do apply box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) to elevated surfaces and box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15) to primary-focused elements for depth without visual heaviness.
• Do use Inter exclusively for all typography — never fall back to system fonts or serif typefaces.
• Do reserve label-sm (12px, 500 weight) for badges, form labels, and secondary text; never use it for body copy.
• Do use the full Material 3 color token stack (surface, surface-container, on-surface, primary, secondary, tertiary, error) in component definitions — never hardcode hex values inside component blocks.

**Don't**

• Don't use primary (#3b82f6) for backgrounds, body text, or non-interactive elements — it's an accent color, not a neutral.
• Don't mix rounded token values within a single component type (e.g., don't use rounded.md on one button and rounded.lg on another).
• Don't apply shadows to flat, non-interactive elements like badges or labels — shadows are reserved for elevated surfaces and hover states.
• Don't use transition durations shorter than 150ms or longer than 300ms for interactive state changes — the 200ms cubic-bezier(0.4, 0, 0.2, 1) is the standard.
• Don't hardcode hex colors inside component definitions — always use token references like {colors.primary} so the system remains wired and maintainable.
• Don't use secondary (#a78bfa) or tertiary (#f472b6) as primary CTAs — they're supporting accents only.
• Don't apply letter-spacing greater than 0.1em on body text — it reduces readability; use negative spacing (-0.04em) only on display and headline sizes.
• Don't use border-radius: 0px (sharp corners) anywhere in the system — the brand requires softness; minimum is rounded.sm (0.25rem / 4px).