Switch between the rendered Visual preview and the Raw DESIGN.md.
DesignMD's design system embodies a modern, tech-forward aesthetic built for productivity and clarity. The interface features a sophisticated dark theme with vibrant blue accents that draw focus to primary actions and interactive elements. The overall mood is professional yet approachable, combining deep neutral backgrounds with high-contrast typography and purposeful use of subtle elevation and micro-interactions. This design language prioritizes content hierarchy, accessibility, and the seamless flow of information—reflecting the product's core value of turning design extraction into an instant, effortless process.
Key Characteristics
#3B82F6): Primary buttons, CTAs, links, focus states, and interactive highlights; the system's signature accent#2563EB): Darker blue applied on hover states and active interactions for tactile feedback#60A5FA): Lighter blue tint for secondary accent states and subtle highlights#93BBFD): Even lighter blue used for background overlays and preview states#BFDBFE): Pale blue for very light backgrounds or disabled states#7F1D1D): Reserved for error, warning, or destructive actions (minimal usage)#1C1C1C): Dark background for input and interactive container states#333333): Primary border color for inputs, cards, and container outlines#A3A3A3): Secondary border for less prominent divisions#171717): Darkest neutral, used sparingly for emphasis or deep backgrounds#333333): Primary text and border color on light backgrounds (most used)#A3A3A3): Secondary text, labels, and disabled states#FAFAFA): Light neutral used in text and subtle backgrounds#1C1C1C): Primary dark surface and container background#1C1C1C): Secondary dark surface overlay#333333): Standard border stroke for containers and components#E5E5E5): Subtle borders on light backgrounds#F0F0F0): Optional light background for secondary surfaces#FFFFFF): Pure white for maximum contrast or light mode surfaces| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Inter | 48px | 700 | 48px | 0px | Hero headings, page titles |
| Heading / H2 | Inter | 32px | 700 | 40px | 0px | Section headings (inferred) |
| Heading / H3 | Inter | 24px | 600 | 32px | 0px | Subsection headings (inferred) |
| Body Text | Inter | 16px | 400 | 26px | 0px | Primary body copy, descriptions |
| Body Emphasis | Inter | 18px | 600 | 28px | 0px | Emphasized text, strong copy |
| Button / CTA | Inter | 14px | 500 | 20px | 0px | Button labels and calls-to-action |
| Input Text | Inter | 14px | 400 | 20px | 0px | Form inputs and placeholder text |
| Small / Caption | Inter | 12px | 400 | 16px | 0px | Captions, labels, small text (inferred) |
| Link | Inter | 14px–16px | 400 | 20px–24px | 0px | Text links (size varies by context) |
#3B82F6#FFFFFF14px60014px 32px14pxrgba(59, 130, 246, 0.3) 0px 0px 20px 0px48px20px#2563EB, shadow intensifies#1D4ED8, shadow reduces#60A5FA with reduced opacity 0.6rgba(0, 0, 0, 0) (transparent)#FAFAFA16px40016px 16px14px1px solid #33333348px (adaptive)24px#3B82F6, text brightens slightlyrgba(59, 130, 246, 0.1)rgba(0, 0, 0, 0) (transparent)#FAFAFA14px6008px 12px8pxautorgba(255, 255, 255, 0.1)rgba(59, 130, 246, 0.2)rgba(0, 0, 0, 0) (transparent)#FAFAFA36px36px50px (fully rounded)0pxrgba(255, 255, 255, 0.1)#1C1C1C#FAFAFA16px40024px14px1px solid #33333324px#555555, subtle background shiftrgba(26, 26, 26, 0.3) (semi-transparent dark)#FAFAFA14px4004px 10px 4px 40px (left padding for icon)10px1px solid #33333348px20px#A3A3A3#3B82F6, background lightens slightly, box shadow adds 0px 0px 20px rgba(59, 130, 246, 0.2)#1C1C1C#A3A3A312px5006px 14px50px (fully rounded)1px solid rgba(26, 26, 26, 0.5)30px16pxrgba(26, 26, 26, 0.3)#FAFAFA14px4004px 10px 4px 40px10px1px solid #33333348px20px#3B82F6, apply 0px 0px 20px rgba(59, 130, 246, 0.2) shadow#7F1D1D, background tints red at 0.05 opacity#A3A3A3 color, same font properties14px500#FAFAFA8px20pxrgba(0, 0, 0, 0) (transparent)#FAFAFA16px4000px (no padding on text-only links)0px#3B82F6, underline appears 1px solid #3B82F6#3B82F6, underline persistsrgba(0, 0, 0, 0) (transparent)#A3A3A314px4000px0px#FAFAFA, optional underline 1px solid #FAFAFA#3B82F6rgba(0, 0, 0, 0) (transparent)#3B82F612px4000px0px/ in #A3A3A3#2563EB, subtle underline optional8px8px, 12px, 16px, 24px, 40px, 48px, 64px, 80px8px: Micro-spacing between inline elements, icon-text pairs12px: Compact gaps between form elements, button groups16px: Padding within cards, input fields, small containers24px: Standard padding for medium cards and sections40px: Margin between major content blocks48px: Padding for larger sections, top/bottom of containers64px: Page section margins, hero spacing80px: Full-page top/bottom margins, hero padding1200px (standard content container)280px–320px if needed40px–80px vertical rhythm between sections24px on medium/large screens, 16px on small screens24px whitespace40px margins create predictable visual flow16px gap between them50px — badges, icon buttons, search pills14px — standard buttons, cards, input fields, most containers10px — input boxes, smaller card variants8px — inferred for smaller UI components, micro-interactions0px — links, lines, dividers, text-only elements| Level | Treatment | Use |
|---|---|---|
| Base (0) | No shadow, flat | Text, labels, backgrounds |
| Hover (1) | rgba(59, 130, 246, 0.2) 0px 0px 10px 0px | On-hover interactive elements |
| Raised (2) | rgba(59, 130, 246, 0.3) 0px 0px 20px 0px | Primary CTAs, focused inputs |
| Floating (3) | 0px 10px 15px -3px rgba(0, 0, 0, 0.2), 0px 4px 6px -4px rgba(0, 0, 0, 0.2) | Modals, dropdowns, floating panels |
Shadow Philosophy:
The design system employs a restrained shadow strategy aligned with the dark theme. Rather than heavy drop shadows, the system uses subtle blue-tinted shadows (rgba(59, 130, 246, 0.2–0.3)) for primary interactive elements, creating visual hierarchy while maintaining the sophisticated dark aesthetic. Dark modal shadows remain neutral (rgba(0, 0, 0, 0.2)) to avoid visual harshness. Depth is achieved primarily through layered container backgrounds and border treatment, with shadows serving as accent cues for interactive focus, not primary depth indicators.
#3B82F6 for all primary CTAs and interactive focus states to maintain a consistent, recognizable call-to-action language14px font weight 500 for all button labels for consistent visual weight and readability40px–80px vertical spacing to create predictable information hierarchy and visual breathing room#333333 borders to all cards and containers unless a focus or hover state is active#A3A3A3 for secondary text, labels, and disabled states to create clear visual separation without introducing new colors14px for the system's signature modern, approachable feel4px 10px 4px 40px to accommodate leading icons and prevent text overlap#1C1C1C) with light text (#FAFAFA) for maximum contrast and accessibility#A3A3A3 on dark backgrounds — accessibility and readability will sufferrgba(59, 130, 246, 0.3) 0px 0px 20px — the dark theme should remain sophisticated, not cluttered80px padding within single containers — maintain visual density and scan efficiency8px on interactive elements — the system's minimum is 8px0.3 on interactive backgrounds — interactions must remain visually distinct| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–767px | Single-column layout, full-width cards, 16px side padding, smaller buttons, stacked navigation |
| Tablet | 768px–1023px | Two-column layout, cards expand to fill space, 24px side padding, optional multi-line navigation |
| Desktop | 1024px–1439px | Three-column grid, max-width containers, standard spacing, full navigation bar |
| Large Desktop | 1440px+ | Four-column grid, centered max-width 1200px, generous margins, fixed sidebars if present |
44px for all interactive elements (buttons, inputs, links)44px for icon buttons and touch-only interactions12px gap to prevent accidental adjacent taps8px internal padding for comfortable tap zonesMobile (< 768px):
100% minus 16px side margins48px to 32px80px to 48pxTablet (768px–1023px):
64pxDesktop (> 1024px):
1200px, centered#3B82F6)#2563EB)#1C1C1C)#FAFAFA)#FAFAFA)#A3A3A3)#333333)#1C1C1C) at 0.3 opacity#3B82F6)#7F1D1D)Font Foundation: Use Inter exclusively across all text roles; no fallback typefaces. Weights are 400 (regular), 500 (medium), 600 (semibold), and 700 (bold). Button labels always use weight 500 at 14px.
Button Semantics: Primary buttons are solid blue (#3B82F6) with white text and 0px 0px 20px rgba(59, 130, 246, 0.3) glow shadow. Secondary buttons are transparent with 1px solid #333333 borders. Hover states shift primary buttons to #2563EB; secondary buttons add a blue border on hover.
Dark Theme Contrast: All text on dark backgrounds must meet WCAG AA 4.5:1 contrast minimum. Use #FAFAFA for primary text, #A3A3A3 for secondary. Never use text colors lighter than #A3A3A3 on #1C1C1C backgrounds.
Spacing Discipline: Base unit is 8px. Apply consistent multiples: 8, 12, 16, 24, 40, 48, 64, 80. Section vertical margins are 40px minimum; major content blocks use 64px–80px. Padding within containers is 16px–24px.
Interactive States: All interactive elements (buttons, inputs, links) must have distinct hover and active states. Inputs gain a blue focus shadow 0px 0px 20px rgba(59, 130, 246, 0.2) and border color #3B82F6 on focus. Buttons darken on hover and click.
Border Radius Consistency: Apply 14px to all primary buttons, cards, and standard containers. Use 10px for inputs and 50px for fully rounded pills (badges, icon buttons). Smaller components can use 8px.
Card & Container Styling: All cards have background #1C1C1C, border 1px solid #333333, padding 24px, and border radius 14px. Cards do not use shadows; depth comes from layered backgrounds and borders.
Form Inputs: Input fields are 48px tall, with padding 4px 10px 4px 40px (left padding for icons). Background is rgba(26, 26, 26, 0.3). Placeholder and label text is #A3A3A3 at 14px weight 400. Focus state adds blue border and glow shadow.
Typography Hierarchy: Use H1 at 48px/700 for page titles, body at 16px/400 for descriptions, and 14px/500 for button labels. Emphasized text (H2/H3) uses weight 600. Small captions are 12px/400. Line heights are generous (1.2–1.6×) for dark backgrounds.
Responsive Strategy: Mobile layouts stack single-column with 16px side padding. Tablet introduces two-column grids at 24px padding. Desktop uses flexible grids up to 4 columns with max-width 1200px and 80px section margins. Touch targets maintain 44px minimum; collapse navigation into hamburger below 768px.