Switch between the rendered Visual preview and the Raw DESIGN.md.
The Browserless design system embodies a modern, tech-forward aesthetic grounded in clean minimalism and developer-centric pragmatism. The visual language emphasizes clarity and efficiency, with a sophisticated palette anchored by deep slate tones paired with vibrant indigo accents. The system eschews excessive decoration in favor of purposeful hierarchy, generous whitespace, and purposeful color contrast. Soft shadows and subtle borders create depth without visual clutter, supporting a professional SaaS platform that appeals equally to enterprise clients and technical developers. The atmosphere is one of reliability, innovation, and accessibility—conveying both power and ease of use.
Key Characteristics
#6366F1): Core interactive elements, CTAs, accent text, and primary actions; the main driver of visual hierarchy and brand recognition#1E293B): Primary text, headings, and foundational UI elements; the most-used color providing stability and readability#D60590): Rare, high-emphasis alerts or special highlight states; reserved for critical or premium features#3B4B68): Secondary accent for layered hierarchy and subtle emphasis#111827): Enhanced text and interactive states at maximum contrast; used for hover and active states#F8FAFC): Lightest background tint for subtle sectioning#F3F4F6): Secondary background for subtle differentiation#9CA3AF): Mid-range text for secondary or tertiary content#6B7280): Tertiary text, disabled states, and placeholder content#404040): Darkened text for enhanced legibility in specific contexts#FFFFFF): Primary background for cards, containers, and main content areas#E5E7EB): Primary border color used 471 times; the system's backbone for subtle visual separation#D1D5DB): Secondary borders for enhanced contrast or secondary divisions#D4D4D4): Minimal borders for very subtle container edges#0000): Transparent overlay and shadow base (used with opacity)#171717): Rare use for maximum contrast scenariosPrimary: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif
Secondary / Code: Monospace fonts; fallback to Consolas, "Courier New", monospace for inline code
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Inter | 72px | 700 | 72px | 0px | Hero headlines; used once per page |
| Heading 2 | Inter | 48px | 700 | 48px | 0px | Major section breaks and feature titles |
| Heading 4 | Inter | 18px | 600 | 28px | 0px | Subsection headers and card titles |
| Body Large | Inter | 20px | 400 | 28px | 0px | Primary body text, feature descriptions |
| Body | Inter | 16px | 400 | 24px | 0px | General content, navigation items |
| Body Small | Inter | 14px | 400 | 20px | 0px | Form inputs, secondary labels, metadata |
| Span / Overline | Inter | 16px | 400 | 24px | 0px | Inline spans and decorative text |
| Code Block | Consolas | 14px | 400 | 21px | 0px | Multi-line code snippets |
| Code Inline | Monospace | 12px | 400 | 16px | 0px | Inline code references |
font-weight: 700) sparingly—only for H1/H2 to establish clear hierarchyfont-weight: 600) for H4 and card titles to signal secondary importancefont-weight: 400) for all body text and UI labels to maintain readability#6366F1#FFFFFF14px5008px 16px6px0px solid #E5E7EBrgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px36px20px#4F46E5; increase shadow opacity#4338CA; reduce shadow#F3F4F6#1E293B14px5008px 16px6px1px solid #D1D5DBrgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px36px20px#E5E7EB; enhance border to #9CA3AF#D1D5DBrgba(0, 0, 0, 0) (transparent)#1E293B16px4008px 0px0px0px solid #E5E7EBnone40px24px1px solid #6366F1; text color remains #1E293B#6366F1#FFFFFF#1E293B16px40024px (inferred; adjust per content needs)8px1px solid #D1D5DBrgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px24px#FFFFFF#1E293B32px16px1px solid #E5E7EBrgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px24px#F8FAFC#1E293B48px 32px0px0pxnone#FFFFFF#1E293B14px4008px 12px6px1px solid #D1D5DBrgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px40px20px#6366F1; box shadow intensifies with blue tint#9CA3AF#F3F4F6; text color #6B7280; border #E5E7EB14px500#1E293B8pxrgba(0, 0, 0, 0)#6B728014px4000px0px0pxnone20px#1E293B; optional subtle underline 1px solid #6366F1#6366F1; bold weight#6366F1#FFFFFF14px5008px 16px6px0pxrgba(0, 0, 0, 0.1) 0px 4px 6px -1px36px#E0E7FF#6366F112px5004px 8px6px0px#F3F4F6#6B728012px5004px 8px6px1px solid #D1D5DBBase unit: 4px
Spacing Scale:
4px — Micro spacing between adjacent inline elements8px — Small padding within compact components (buttons, badges)12px — Gap between form controls16px — Standard padding within cards and containers20px — Gap between grid items24px — Margin between sections and card stacks32px — Large padding; spacing between major layout blocks36px — Extra-large gap for breathing room40px — Margin between full-width sections48px — Significant vertical space between hero and features64px — Large gap for feature sections80px — Maximum padding for hero areas and top-level containersUsage Context:
8px 16px16px to 32px40px to 80px vertical20px to 48px depending on densityMax Width: 1280px (inferred; adjust based on full page measurement)
Column Strategy:
20px gutters16px gutters12px guttersSection Patterns:
1024px for text24px gap between cards64px; items center-aligned with 12px spacingWhitespace is a first-class design element. The system prioritizes breathing room around text and components, preventing visual clutter. Large margins between sections (40px minimum) create clear cognitive breaks. Cards and containers have consistent internal padding (16px to 32px) that respects the base unit. Vertical rhythm is maintained across all breakpoints through proportional scaling of margins and gaps. Whitespace increases with viewport size to maintain visual comfort.
0px — Hard edges for ghost buttons, navigation, and full-width sections6px — Compact components: buttons, small cards, input fields, and badges8px — Standard cards and containers with subtle rounding12px — Larger cards, feature blocks, and hero sections with more visual softness16px — Elevated cards, hero backgrounds, and premium component states20px — Extra-large containers and full-width featured sections (inferred)| Level | Treatment | Use |
|---|---|---|
| None | No shadow; flat design | Ghost buttons, text links, navigation items, divider lines |
| Subtle (md) | rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px | Input fields, secondary buttons, light cards, form containers |
| Standard (lg) | rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px | Standard cards, navigation dropdowns, hover states |
| Medium (sm) | rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px | Elevated cards, featured components, interactive hover lift |
| Elevated (xl) | rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px | Primary buttons, modal overlays, floating action elements |
Shadow Philosophy:
The elevation system uses layered, multi-component shadows to create nuanced depth without harshness. Shadows increase in spread and blur as elements gain prominence, but remain soft and natural. The use of multiple shadow layers (outer glow + inner highlight) creates dimensional realism. All shadows use transparent black (rgba(0, 0, 0, ...)) with opacity values between 0.05 and 0.1, avoiding harsh or oversaturated drop shadows. This approach maintains visual clarity on all backgrounds while signaling interactive or elevated states.
#6366F1 (Primary Brand) for all primary CTAs, links, and interactive highlights40px of vertical margin between major sections for visual breathing room8px border radius to all compact UI components (buttons, inputs, badges)#1E293B (Primary Dark) for all body text and foundational headings to ensure readability#D60590 (Accent Magenta) for rare, high-emphasis alerts or premium feature callouts only36px height for optimal touch and click targets14px font weight 500 for button and form labels to establish clear visual hierarchy#F8FAFC, #F3F4F6) with #1E293B text for maximum contrast1024px max) for text legibility#6B7280, #9CA3AF) in the same component0px, 6px, 8px, 12px, 16px)#D60590) as a primary color; reserve for critical status onlyrgba(0, 0, 0, 0.3) minimum)36px or button height below 36px for desktop interfaces200ms to interactive states; keep interactions snappy| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 0px–640px | 4-column grid; 12px gaps; font sizes reduce by ~10%; padding 12px 16px in containers; single-column card layouts; navigation becomes vertical/hamburger |
| Tablet | 641px–1024px | 8-column grid; 16px gaps; 2-column card layouts; navigation remains horizontal; increased padding 16px 24px; font sizes scale to 14px base |
| Desktop | 1025px+ | 12-column grid; 20px gaps; 3-column card layouts; full navigation with all links visible; maximum padding 32px in containers; font sizes at full 16px base |
| Large Desktop | 1441px+ | Max width constraint at 1280px for main content; increased section margins to 80px vertical; generous whitespace around features |
44px × 44px (buttons, links, clickable areas)48px × 48px for mobile navigation and primary actions12px minimum between adjacent touch targets to prevent accidental overlap8px padding around text for expanded touch area36px on desktop; 44px on mobile for easier interactionHero Section:
64px gap40px gap; font scale to 48px heading36px; visual scales to full viewport widthFeature Cards:
24px gaps20px gaps16px gaps; full viewport width with 16px marginsNavigation:
12px between links8px8px padding; stack verticalTypography Scaling:
72px (desktop) → 48px (tablet) → 36px (mobile)48px (desktop) → 36px (tablet) → 28px (mobile)16px (desktop) → 15px (tablet) → 14px (mobile)14px (desktop) → 13px (tablet) → 12px (mobile)Padding & Margin Scaling:
80px (desktop) → 48px (tablet) → 24px (mobile) vertical32px (desktop) → 24px (tablet) → 16px (mobile)24px (desktop) → 16px (tablet) → 12px (mobile)#6366F1)#1E293B)#FFFFFF)#F8FAFC)#E5E7EB)#6B7280)#F3F4F6)#D60590)#111827)#0000 with opacity)All buttons default to Primary Indigo (#6366F1) with white text; Secondary variants use Light Gray background (#F3F4F6) with Dark Slate text (#1E293B); Ghost buttons are transparent with no border and Dark Slate text.
Typography always uses Inter font family (or system fallback). H1 is 72px bold; H2 is 48px bold; H4 is 18px semi-bold; Body is 16px regular; inputs and labels are 14px regular.
All cards have rounded corners (8px for standard, 16px for elevated), white background (#FFFFFF), Light Gray border (1px solid #E5E7EB), and soft shadow (md or sm level).
Spacing follows the 4px base unit scale: buttons are 8px 16px; cards/containers are 16px to 32px padding; sections have 40px to 80px vertical margins; gaps between items are 12px, 20px, or 24px.
All form inputs are 36px height, white background, Light Gray border, 8px 12px padding, and Subtle shadow; focus state changes border to Indigo (#6366F1) and enhances shadow.
Interactive states: hover increases shadow depth and/or changes text to Indigo; active/pressed states use darker background (#4338CA for primary buttons) or add underline (for links); disabled states use Medium Gray text (#6B7280) and pale background (#F3F4F6).
Elevation system has four levels: None (flat), Subtle (md shadow for inputs/secondary), Standard (lg shadow for cards), and Elevated (xl shadow for primary buttons/modals); never create custom shadows.
Responsive design: mobile layout is 1-column with 12px gaps; tablet is 2-column with 16px gaps; desktop is 3-column with 20px gaps; all text and padding scales proportionally; minimum touch target is 44px × 44px.
Alignment and hierarchy: use Dark Slate (#1E293B) for all headings and primary text; Light Gray (#6B7280) for secondary/disabled; Indigo (#6366F1) for links, CTAs, and highlights; always maintain consistent whitespace rhythm across breakpoints.
Colors are semantic: never hardcode custom hex values; use the defined palette (Indigo, Slate, Gray, White) and map them to semantic roles (primary text, background, border, accent, interactive) based on component function.