Switch between the rendered Visual preview and the Raw DESIGN.md.
The Exceptionless design system embodies a clean, professional, and approachable aesthetic tailored for developers and technical teams. The visual language emphasizes clarity and trust through a refined balance of vibrant accent colors against neutral, minimalist foundations. The design conveys competence and reliability—critical for an error-reporting platform—while maintaining warmth through an energetic green accent that signals actionability and progress. The system favors generous whitespace, straightforward typography, and purposeful visual hierarchy to make complex data digestible and navigation intuitive. This is a design language built for focus: every element serves the goal of helping developers identify, understand, and resolve application exceptions with confidence.
Key Characteristics
#598E0E): Primary call-to-action buttons, key interactive elements, and the main brand accent driving user engagement and conversion#78B001): Secondary primary buttons, highlights in dashboards, metric badges, and components signaling positive states or completed actions#0088CC): Hyperlinks, secondary navigation elements, and interactive text that requires distinction from primary actions#578F01): Tertiary accent for hover states, layered buttons, and visual depth without overwhelming primary hierarchy#6B991C): Subtle accent for supporting UI elements, tag backgrounds, or muted highlight states#4C7701): Deep green for borders around primary elements or darkened button states#F27F1E): Alert states, warnings, or cautionary interface elements requiring attention without critical urgency#0E0E0E): Secondary buttons, outlined button backgrounds, and alternative interactive containers with strong contrast#333333): Primary body text, headings, and all content requiring maximum readability and contrast#555555): Secondary text, labels, and supporting content hierarchy#666666): Tertiary text, disabled states, and subtle supporting information#777777): Placeholder text, hints, and deeply secondary information#999999): Disabled button text, muted metadata, and lowest-priority content#A7A7A7): Borderlines, faint dividers, and minimal visual separation#FFFFFF): Primary background, card surfaces, and all primary content containers#D5D5D5): Subtle borders around cards, inputs, and section dividers providing visual structure without harshnessPrimary: Open Sans, with fallback stack: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
Monospace (Code): "Courier New", Courier, monospace
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display/H1 | Open Sans | 31.5px | 300 | 40px | 0px | Hero headlines, major page titles, largest visual emphasis |
| Heading 3 | Open Sans | 18px | 400 | 40px | 0px | Section headers, subsection titles, medium emphasis |
| Heading 4 | Open Sans | 17.5px | 400 | 20px | 0px | Subheadings, button text, component headers |
| Body | Open Sans | 16px | 400 | 28px | 0px | Primary paragraph text, standard content, descriptions |
| Label/Link | Open Sans | 14px | 400 | 20px | 0px | Navigation links, labels, smaller content text |
| Caption/Small | Open Sans | 12px | 400 | 18px | 0px | Metadata, timestamps, helper text, captions |
| Icon Glyph | FontAwesome | 14px | 400 | 12.6px | 0px | Icon font glyphs, symbol rendering |
#598E0E#FFFFFF17.5px40011px 19px6px1px solid rgba(0, 0, 0, 0.1)rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px20px#578F01, increase inset shadow intensity#4C7701#999999, reduce opacity to 0.6#0E0E0E#FFFFFF14px40015px 15px4px1px solid rgba(0, 0, 0, 0.1)rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.075) 0px 1px 0px 0px20px#2A2A2A#0E0E0Etransparent or rgba(0, 0, 0, 0)#0088CC14px4008px 12px4pxnonenonergba(0, 136, 204, 0.08), text darkens to #0066AA1px#FFFFFF1px solid #D5D5D56px20pxrgba(0, 0, 0, 0.05) 0px 1px 3px 0px#333333rgba(0, 0, 0, 0.1) 0px 2px 6px 0px#A7A7A7#FFFFFFnone6px16px 20pxrgba(0, 0, 0, 0.08) 0px 2px 4px 0px#78B001, font size 24px, weight 600#666666, font size 12px, weight 400#FFFFFF1px solid #D5D5D54px10px 12px14px#333333#9999991px solid #598E0Ergba(89, 142, 14, 0.1) 0px 0px 0px 3px#F27F1Ergba(242, 127, 30, 0.1) 0px 0px 0px 3px#F27F1E, font size 12px#F0F0F0#D5D5D5#999999not-allowed#FFFFFF1px solid #D5D5D54px12px14px"Courier New", Courier, monospace (for code inputs)120pxrgba(0, 0, 0, 0) (transparent) or #0E0E0E (dark container)60px minimum12px 20px#333333 (on light backgrounds) or #FFFFFF (on dark backgrounds)13px400#598E0E#33333313px40010px 15px0pxtransparent#598E0E2px solid #598E0E/ in #999999#333333, weight 600#0088CC, clickable12px4px around separator#598E0E#FFFFFF4px 8px3px11px600#F27F1E#FFFFFF4px 8px3px11px600#D5D5D5#3333334px 8px3px11px600Base Unit: 4px
Scale:
4px: Minimal micro-spacing (icon padding, tight component gaps)8px: Small spacing (internal component padding, tight margins)12px: Small-medium spacing (label to input, list item gaps)16px: Standard spacing (card padding, consistent gutters)20px: Medium spacing (section padding, component boundaries)24px: Medium-large spacing (between sections, block margins)28px: Large spacing (major section separation)32px: Large spacing (section dividers)36px: Large spacing (major layout breaks)40px: Extra-large spacing (hero sections, top/bottom padding)116px: Extra-large vertical spacing (major layout breathing room)120px: Maximum vertical spacing (hero-to-content transitions)Usage Contexts:
16px–20px20px–24px32px–40px40px–120px1170px20px per side20px on tablet/mobile, 40px on desktop40px 0px standard, 120px 0px for hero sectionsGenerous whitespace is fundamental to the design. Sections are clearly separated with significant vertical breathing room (32px–120px depending on visual weight). Cards and components use internal padding of at least 16px to avoid visual cramping. Navigation elements and text blocks are well-separated to guide eye flow. This creates a calm, focused interface that does not overwhelm users with information density.
0px: Navigation items, large containers, full-bleed sections3px: Badges, small tags, minimal rounding4px: Secondary buttons, text inputs, minimal rounding for functional elements5px: Image thumbnails, subtle rounding6px: Primary buttons, cards, standard component rounding| Level | Treatment | Use |
|---|---|---|
| Ground (Flat) | box-shadow: none | Flat sections, backgrounds, minimal elevation |
| Raised (Small) | box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px 0px | Input fields, standard cards, default component elevation |
| Elevated (Medium) | box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 4px 0px | Metric cards, hovered cards, modal overlays |
| Floating (Large) | box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px 0px | Dropdowns, floating panels, tooltips |
| Modal (Maximum) | box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px 0px | Modal dialogs, full overlays, z-index > 100 |
Shadow Philosophy: Shadows are subtle and restrained, conveying depth without dominance. The system uses inset highlights on buttons (white highlights on dark backgrounds) to create a refined, layered appearance. Ambient shadows are minimal, relying instead on border contrast and color shifts to define surfaces. This maintains the clean, professional aesthetic while preserving visual hierarchy through careful elevation use rather than heavy shadow application.
Inset Highlights:
rgba(255, 255, 255, 0.2) 0px 1px 0px 0px insetrgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset#598E0E) for all primary call-to-action buttons to establish consistent conversion focus16px within cards and containers to preserve breathing room and readability20px–24px margins for clear visual hierarchy and scanning#333333 for body text and #0088CC for links to ensure maximum contrast and legibility4px for inputs and 6px for buttons for visual coherence:hover, :active, and :disabled states to provide clear feedback17.5px for primary button text to create visual prominence1px solid rgba(0, 0, 0, 0.1) borders to all buttons for definition against backgrounds#578F01) for primary buttons—reserve it for hover states and depth only8px in any component; this creates a cramped, unprofessional appearancergba(0, 0, 0, 0.15); excessive depth contradicts the clean aesthetic#F27F1E) with green accents in adjacent UI elements; separate them by at least one component layer#A7A7A7) for body text—reserve for secondary or disabled states only32px+ margin between them:focus state on any input or button; accessibility requires clear focus indicators12px or larger than 31.5px without explicit design approvalwidth: 100% on buttons without a max-width container; buttons should size to content or explicit width bounds| Name | Width | Key Changes |
|---|---|---|
| Mobile (XS) | 320px–479px | Single column, 16px padding, 12px spacing, font size –2px reduction for body text |
| Mobile (S) | 480px–767px | Single column, 16px padding, 16px spacing, standard font sizes |
| Tablet (M) | 768px–1023px | 1–2 columns contextual, 20px padding, 20px spacing, standard typography |
| Desktop (L) | 1024px–1279px | 2–3 columns, 24px–40px padding, 24px spacing, standard typography |
| Desktop (XL) | 1280px+ | 3–4 columns, 40px padding, 32px spacing, full layout width 1170px |
44px × 44px (buttons, links, form controls)48px × 48px for frequently-used buttons8px horizontal, 12px vertical18px–24px, centered within 44px+ touch target14px font size with 4px padding for touch extension16px; increase margin between sections to 24px–32px for mobile scanning24px; preserve 20px horizontal padding1170px; restore section margins to 32px–40px; maintain 40px padding on hero sections768px; sidebar transforms to overlay with dark background rgba(0, 0, 0, 0.5) and 100% width on mobile100%) on mobile with 16px margin; fixed width or auto on desktoph1 to 24px on mobile, maintain at 31.5px on desktop; reduce body text to 14px on mobile, 16px on desktop#598E0E)#0E0E0E)#0088CC)#78B001)#F27F1E)#FFFFFF)#333333)#555555)#666666)#D5D5D5)#999999)All primary action buttons must be #598E0E with white text (#FFFFFF), 17.5px font size, 11px 19px padding, and 6px border radius. Hover state darkens to #578F01. Disabled state grays to #999999 with 0.6 opacity.
Text inputs and form controls must have #FFFFFF background, 1px solid #D5D5D5 border, 4px border radius, and 10px 12px padding. Focus state adds rgba(89, 142, 14, 0.1) shadow. Error state changes border to #F27F1E.
All body text must be #333333 at 16px weight 400 with 28px line height. Links within body text must be #0088CC, clickable, and underline on hover. Secondary text must be #666666 at 14px.
Cards and containers must have #FFFFFF background, 1px solid #D5D5D5 border, 6px border radius, 20px padding, and rgba(0, 0, 0, 0.05) 0px 1px 3px 0px box shadow. Hover state increases shadow to rgba(0, 0, 0, 0.1) 0px 2px 6px 0px.
Navigation links must be #333333 at 13px, change to #598E0E on hover, and show 2px solid #598E0E bottom border when active. Spacing between nav items must be 15px padding per item.
All spacing must follow the 4px base unit scale: 8px, 12px, 16px, 20px, 24px, 32px, 40px, 120px. Sections use 32px–40px margins; cards use 16px–20px padding; hero sections use 120px vertical padding.
Badges must have 4px 8px padding, 3px border radius, 11px font size, weight 600. Success badges use #598E0E background with #FFFFFF text. Warning badges use #F27F1E with #FFFFFF text. Neutral use #D5D5D5 with #333333 text.
All interactive elements must include :hover, :active, :focus, and :disabled states. Focus states must always include visible focus indicator (shadow or outline) for accessibility. Disabled state reduces opacity to 0.6 and changes cursor to not-allowed.
Typography hierarchy uses Open Sans with weights 300 (headings only) and 400 (body, labels). Font sizes: H1 31.5px (line 40px), H3 18px (line 40px), H4 17.5px (line 20px), Body 16px (line 28px), Label 14px (line 20px), Caption 12px (line 18px).
Never use shadows heavier than rgba(0, 0, 0, 0.15) 0px 8px 16px 0px. Apply inset highlights to primary buttons: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset. Ambient shadows stay minimal; rely on borders and color contrast for definition.