Switch between the rendered Visual preview and the Raw DESIGN.md.
INSICHT's design system embodies a professional, modern aesthetic tailored for B2B communication and educational marketing solutions. The visual language combines authoritative neutrals with vibrant accent colors that convey energy, trust, and forward-thinking expertise. The design prioritizes clarity and accessibility while maintaining a contemporary corporate sensibility. Large, bold typography dominates hierarchical structures, creating confident visual anchors that guide users through content-rich environments. Clean whitespace, minimal ornamentation, and purposeful color deployment create a sophisticated yet approachable atmosphere—ideal for an agency communicating complex digital marketing and educational positioning services.
Key Characteristics
#15779B): Core interactive elements, links, and trust-building brand accent; primary CTA buttons and navigation highlights#A9C41A): Secondary call-to-action, accent highlights, and emphasis elements; draws attention to key information and conversion points#11607D): Deep, sophisticated secondary interactive state; used for hover states and nested navigation#65BC7B): Positive states, confirmations, and success messaging#212934): Premium, high-contrast accent for special emphasis and hero sections#15779B): Default link states and interactive text#15779B): Primary action buttons with white text#A9C41A): Secondary actions and alternative CTAs; transparent backgrounds with accent text#FFFFFF): Primary background, card surfaces, and high-contrast text backdrop#F2F3F5): Subtle background differentiation and secondary surfaces#E9EAEE): Dividers, borders, and subtle background sections#2B2B2B): Secondary body text and de-emphasized content#151515): Primary body text and high-contrast headings#131516): Darkest neutral for maximum contrast headings#E9EAEE): Subtle dividing lines and container bordersrgba(0, 0, 0, 0.1)): Shadow and depth definition for modals#FF4600): Error states, warnings, and critical alerts; high visibility danger indicatorPrimary: Roboto, sans-serif (fallback: Arial, system sans-serif) Secondary: Roboto, sans-serif (consistent throughout for brand coherence) Monospace: Roboto Mono, monospace (for code and technical content if needed)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display (H1) | Roboto | 48px | 700 | 57.6px | 0px | Hero and page title emphasis; maximum visual impact |
| Display (H2) | Roboto | 56px | 700 | 67.2px | 0px | Section overline and primary section headers |
| Heading (H3) | Roboto | 40px | 700 | 48px | 0px | Secondary section headers and subsection titles |
| Body | Roboto | 13px | 400 | 19.5px | 0px | Compact body copy for lists and secondary content |
| Body Large | Roboto | 16px | 400 | 22.4px | 0px | Primary body text and standard paragraph copy |
| Button | Roboto | 25px | 700 | normal | 0px | Large button labels for primary CTAs |
| Button Secondary | Roboto | 18px | 400 | 25.2px | 0px | Secondary and tertiary button labels |
| Button Tertiary | Roboto | 16px | 400 | 22.4px | 0px | Ghost and link-style button text |
| List Item | Roboto | 16px | 700 | 19.2px | 0px | Navigation items and bold list entries |
#151515, #131516) on white backgrounds meets WCAG AA standardsPrimary Button
#15779B#FFFFFF10px 10px 10px 10px5px#11607D (teal), maintain white text#0D4A5E, add subtle inset shadow inset 0 2px 4px rgba(0,0,0,0.2)2px solid #A9C41A offset 2pxSecondary Button (Ghost)
rgba(0, 0, 0, 0))#15779B5px 5px 5px 5px5px1px solid #15779Brgba(21, 119, 155, 0.1), border color remains #15779Brgba(21, 119, 155, 0.2), text color to #11607D2px solid #A9C41A offset 2pxTertiary Button (Text Only)
#15151532px 20px 32px 20px0px#15779B, maintain transparency#11607D2px solid #A9C41ADefault Card
#FFFFFF#15151524px0px1px solid #E9EAEE24px marginElevated Card
#FFFFFF#15151532px3pxrgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(255, 255, 255, 0.12) 0px 0px 0px 1px insetSection Container
#F2F3F5 (alternate) or #FFFFFF (default)60px 40px 60px 40px (vertical × horizontal)0pxText Input (Default)
#FFFFFF#2B2B2B12px 16px 12px 16px5px1px solid #E9EAEE#15779B, box shadow 0 0 0 3px rgba(21, 119, 155, 0.1)Text Input (Error)
#FFFFFF2px solid #FF46000 0 0 3px rgba(255, 70, 0, 0.1)Text Input (Success)
#FFFFFF1px solid #65BC7BLabel
#1515158pxNavigation Bar
#FFFFFF (context-dependent)0px0px1px solid #E9EAEE (bottom)Navigation Link
#FFFFFF or #151515 (context-dependent)12px 16px 12px 16px0pxrgba(21, 119, 155, 0.1), text color #15779B3px solid #15779B, text color #15779BMobile Navigation Trigger
#1515158px5pxrgba(0, 0, 0, 0.05)Text Link (Body)
#2B2B2B#15779B, underline 1px solid #15779B#11607DText Link (Navigation)
#7574740px 5px 0px 5px#15779B#15779B, border bottom 2px solid #15779BBase Unit: 4px
Scale and Usage:
4px: Micro spacing for icon padding and internal component spacing8px: Tight spacing between related inline elements and small button groups12px: Spacing within form fields and between label and input16px: Standard horizontal padding for containers and card spacing20px: Button horizontal padding and section edge spacing24px: Spacing between card groups and moderate section separation28px: Spacing between subsections within larger containers32px: Padding for elevated containers and major component spacing40px: Large section horizontal margins and grid gutters48px: Major vertical section separation and layout rhythm60px: Large vertical padding for full-width sectionsMax Width Strategy:
Section Patterns:
60px vertical padding40px left/right marginsINSICHT's design leverages generous whitespace to create breathing room and reduce cognitive load. Vertical rhythm follows the 4px base unit scaled to 8px, 12px, 16px progressions. Sections are clearly delineated through background color shifts (#FFFFFF to #F2F3F5) and spacing rather than borders. Content sits prominently within expansive margins, drawing focus to messaging. Negative space around typography, especially headings, enhances visual hierarchy and reading comprehension.
0px: Navigation bars, section containers, and flat component surfaces (default)3px: Modals and elevated card surfaces (subtle rounding for depth)5px: Buttons, inputs, and interactive elements (moderate rounding for approachability)| Level | Treatment | Use |
|---|---|---|
| Flat (L0) | No shadow, border: 1px solid #E9EAEE | Default cards, navigation, standard containers |
| Subtle (L1) | rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset | Modals, elevated cards, focused surfaces |
| Hover (L2) | 0 2px 8px rgba(0, 0, 0, 0.12) | Interactive component hover states, contextual popups |
| Focus (L3) | 0 0 0 3px rgba(21, 119, 155, 0.1) + outline ring | Focus states for accessibility |
Shadow Philosophy:
INSICHT's design system minimizes shadow usage to maintain a contemporary, flat aesthetic. Elevation is communicated primarily through subtle inset borders (rgba(255, 255, 255, 0.12) highlight) and background color shifts rather than traditional drop shadows. The inset border technique creates perceived depth while maintaining visual clarity. When depth is necessary (modals, elevated surfaces), a single-layer, low-opacity shadow applies. This restraint reinforces the professional, modern brand voice.
#15779B) for all primary CTAs and trust-building elements; it commands attention and aligns with brand authoritywidth: 100%, maintain 60px section padding)#A9C41A) sparingly for secondary CTAs and emphasis; reserve for 10–15% of interactive elements#FFFFFF backgrounds with #E9EAEE borders for card-based layouts; this achieves sufficient contrast with neutral text2px solid #A9C41A) on all interactive elements for keyboard navigation accessibility#FFFFFF → #F2F3F5) rather than borders to create visual rhythmL1 elevation) for modals and special states only5px to buttons and inputs; this deviates from the professional, geometric aesthetic#FF4600) for non-error messaging; its high saturation should signal only warnings, errors, or critical actions16px horizontally on containers; this compromises content breathing room#11607D) for primary actions; reserve it for secondary states and nested interactions only| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–599px | Single-column layout, full-width buttons (width: 100%), 16px padding, heading size reduced by 20%, body text 13px, navigation collapses to hamburger menu, section padding reduced to 32px vertical |
| Tablet | 600px–1023px | Two-column grid where applicable, button width 50% or flexible, 24px horizontal padding, heading sizes reduced by 10%, navigation expands to horizontal list (if space permits), spacing normalized to 40px–48px vertical |
| Desktop | 1024px+ | Full multi-column layouts (3–4 columns), 40px–60px horizontal and vertical padding, heading sizes at full scale, navigation fully expanded with hover interactions, max-width container enforced at 1200px |
Typography:
Spacing:
Layout:
width: 100%)Image Scaling:
aspect-ratio CSS or padding-bottom trickmax-width: 100%)#15779B) — solid background with white text#A9C41A) — use sparingly for ghost/outline buttons#151515) or Deep Charcoal (#131516) — maximum contrast on white#2B2B2B) on white backgrounds; adjust for sufficient contrast#FFFFFF)#F2F3F5) — use for section alternation and subtle differentiation#E9EAEE)#FF4600) — only for error states, warnings, and critical feedback#11607D) — secondary interactive states and nested actions only#65BC7B) — positive confirmations and approved actions#15779B) by default; darken to Teal (#11607D) on hoverTypography Foundation: Use Roboto exclusively; implement H1 (48px, 700), H2 (56px, 700), H3 (40px, 700), Body (13px or 16px, 400 weight). Enforce 1.5× line height for all body text. All heading weights must be 700 for authority.
Color Hierarchy: Primary Blue (#15779B) for primary CTAs and navigation highlights. Lime Green (#A9C41A) for secondary CTAs (maximum 2–3 per page). Maintain Charcoal (#151515) for text to ensure WCAG AA contrast on white backgrounds.
Button Styling: All buttons must use border-radius: 5px. Primary buttons: #15779B background, white text, 18px font, 10px padding. Secondary buttons: transparent background, #15779B text, 1px solid #15779B border. Tertiary buttons: transparent, 25px bold font, no border. Include focus rings (2px solid #A9C41A) on all interactive elements.
Spacing Consistency: Base all spacing on 4px grid. Use 24px–48px gaps between major sections. Container horizontal padding: 40px desktop, 24px tablet, 16px mobile. Margin top/bottom for sections: 48px–60px. Never use spacing below 8px except for icon padding.
Container & Card Design: Default card background: white with 1px solid #E9EAEE border, no shadow. Elevated cards (modals): apply subtle inset shadow rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset. Section containers alternate between white (#FFFFFF) and light gray (#F2F3F5). All containers use 0px border-radius except modals (3px).
Responsive Breakpoints: Implement three breakpoints: Mobile (320–599px), Tablet (600–1023px), Desktop (1024px+). Reduce heading sizes by 10–20% on mobile. Stack buttons vertically at width: 100%. Collapse navigation to hamburger menu below 1024px. Ensure all touch targets are ≥45px height.
Accessibility & Focus States: All interactive elements require :focus states with outline: 2px solid #A9C41A. Links must have underline on :hover. Text contrast minimum WCAG AA (4.5:1 for body, 3:1 for large text). Implement keyboard navigation for all interactive components.
Shadow & Elevation Restraint: Use shadows sparingly; default to flat design (no shadow, border: 1px solid #E9EAEE). Apply L1 shadow only to modals and elevated surfaces. Hover states for interactive elements: light background tint (rgba(21, 119, 155, 0.1)) rather than shadow. Active states: subtle inset shadow inset 0 2px 4px rgba(0, 0, 0, 0.2).
Section Rhythm: Establish visual rhythm through alternating background colors and consistent spacing. Start with white section, alternate to light gray for variety. Use 60px vertical padding on hero sections, 48px for content sections, 32px for mobile. Horizontal padding: 40px (desktop), 24px (tablet), 16px (mobile). Ensure all CTAs are visually distinct and positioned within natural reading flow.