Back to DesignMD
Marketking Agency
Generated Jun 9, 2026
W
Marketking Agency
Generated Jun 9, 2026
Switch between the rendered Visual preview and the Raw DESIGN.md.
The Women of Whitehorse design system embodies a professional yet approachable aesthetic designed to foster community and connection among business-minded women. The palette combines bold, confident primary colors with warm, energetic accents that convey inclusivity, celebration, and forward momentum. The visual identity emphasizes clarity and accessibility through generous whitespace, strong typography hierarchy, and clean component structures. Warm metallics (gold) and vibrant reds create moments of visual delight against cool navy anchors, reflecting both professionalism and the vibrant energy of community gatherings. The design prioritizes ease of navigation and clear calls-to-action while maintaining an elevated, sophisticated tone appropriate for membership-driven networking organizations.
Key Characteristics
#004C97): Primary brand color used for headings, navigation backgrounds, footer anchors, and strategic UI elements. Conveys trust, professionalism, and stability within the community platform.#E03C31): High-visibility accent for primary call-to-action buttons, membership prompts, and urgent messaging. Draws attention and encourages immediate action.#FEDD00): Secondary accent for featured buttons, highlights, and positive reinforcement elements. Represents celebration, warmth, and special occasions within the community.#E03C31 with #FFFFFF text): Login and join buttons that command user attention with strong contrast and warmth.#FEDD00 with #004C97 text): Event and engagement buttons that balance emphasis with navigation elements.#000000): Primary text color for body copy, labels, and standard interface text across the platform.#333333): Secondary text for subtle hierarchy shifts and de-emphasized content sections.#888888): Tertiary text for helper text, captions, and reduced-importance labels.#FFFFFF): Primary background for all surfaces, cards, and content areas ensuring maximum legibility.#FFFFFF): Default background for all interactive content and card surfaces.rgba(0, 0, 0, 0)): Applied to card and navigation containers to create seamless layering with background imagery.#004C97): Applied to footer sections and navigation bar for strong brand anchoring.#E03C31): Alerts, validation errors, and destructive actions requiring immediate user awareness.#FEDD00): Featured calls-to-action, special events, and positive engagement prompts that don't require urgency but deserve visibility.Primary Font: Martel (serif)
'Martel', 'Georgia', 'Times New Roman', serifSecondary Font: Josefin Sans (sans-serif)
'Josefin Sans', 'Segoe UI', 'Helvetica Neue', sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Martel | 32px | 600 | 35.2px | 0px | Page hero headings and primary section titles |
| Heading / H3 | Martel | 25.6px | 600 | 28.16px | 0px | Section subheadings and secondary title emphasis |
| Body / Paragraph | Josefin Sans | 16px | 400 | 22.4px | 0px | Primary content text for articles, descriptions, and narrative copy |
| Button / Label | Josefin Sans | 16px | 400 | 22.86px | 0px | Interactive element text and action labels |
| Caption / Small | Josefin Sans | 14px | 400 | 19.6px | 0px | Footer text, metadata, helper text, and secondary information |
| Navigation Link | Josefin Sans | 16px | 400 | 22.4px | 0px | Primary navigation menu items and link structures |
#E03C31#FFFFFF16px, 400 weight6px 12px4px0px)22.86px34.84px (auto-calculated from padding + font)#C73025, maintain white text, cursor pointer#A82620, add subtle inset shadow inset 0px 2px 4px rgba(0, 0, 0, 0.2)0.5, remove hover effects, cursor not-allowed#FEDD00#004C9716px, 400 weight6px 12px4px0px)22.86px34.84px#E8C700, maintain navy text#D4B000, add inset shadow inset 0px 2px 4px rgba(0, 0, 0, 0.15)0.5, remove hover effectsrgba(0, 0, 0, 0))#00000016px, 400 weight9px 10px4px1px solid rgba(0, 0, 0, 0) (transparent, reserved for focus state)22.4pxrgba(0, 0, 0, 0.04), border remains transparent1px solid #004C97, background remains transparentrgba(0, 0, 0, 0.08)rgba(0, 0, 0, 0) (transparent for layering over hero images)#00000016px, 400 weight0px0px22.4px#FFFFFF#00000016px, 400 weight15px 0px (vertical rhythm, horizontal padding managed by parent grid)0px22.4px#FFFFFF#00000024px0px (maintains clean aesthetic; only used for specific overlays)rgba(0, 0, 0, 0.176) 0px 6px 12px 0px#E03C31 (primary action red maintains energy)#FFFFFF16px, 400 weight50px0px 24px (horizontal padding for content alignment)0px16px, underline removed by defaultrgba(255, 255, 255, 0.1)2px solid #FFFFFF#FFFFFF (within red navigation bar)16px, 400 weight16px 12pxrgba(255, 255, 255, 0.1)2px solid rgba(255, 255, 255, 0.5)#FFFFFF16px, 400 weight#004C97 footer section8px 4px2px solid rgba(255, 255, 255, 0.5)#FFFFFF#0000001px solid #CCCCCC4px8px 12px16px, 400 weight36px22.4px#004C97, add box shadow 0px 0px 0px 3px rgba(0, 76, 151, 0.1)#E03C31, add error helper text in red below input#888888, style italic16px, 400 weight#0000008px* (#E03C31) with margin-left 4px14px, 400 weight#8888884px#004C9716px, 400 weight0px#00356F, underline remains2px solid #004C97, outline-offset 2px#663D97 (standard web convention)#FEDD00 (for attention) or #E03C31 (for alert)#004C97 (on gold) or #FFFFFF (on red)12px, 700 weight4px 8px12px (pill-shaped for compact display)20px20pxBase Unit: 4px
Spacing Scale:
4px: Micro spacing within components (icon-to-text margins, tight button padding)8px: Compact spacing within form groups, small element gaps12px: Default padding within small components (badges, small buttons)16px: Standard padding for button interiors, link spacing, navigation gaps20px: Comfortable spacing between form fields and sections24px: Section internal padding, card padding, generous whitespace32px: Major section separation, significant visual breaks52px: Large section padding for featured content areas112px: Hero section vertical spacing, major layout sections136px: Footer spacing, page bottom breathing roomUsage Context:
4px, 8px): Component interior, icon alignment, tight groupings12px, 16px): Primary button/form/navigation padding20px, 24px): Section spacing, standard card padding32px, 52px): Feature sections, hero areas112px, 136px): Page-level structure, major visual separation1440px for primary navigation bar and full-width sections1110px for primary content containers (measured from extracted card width)= (content-width - gutters) / 1216px between columns (standard spacing unit)24px horizontal padding on smaller screens; 32px on tablet; 52px on desktopmargin: 0 autoThe design system embraces generous whitespace as a core principle. Spacing is not merely empty space but active design element that creates visual rhythm, guides attention, and improves cognitive load. Key sections receive breathing room (52px to 112px vertical separation) to prevent visual clutter and allow content to be consumed without cognitive friction. Micro-spacing within components (4px, 8px) ensures internal cohesion, while standard spacing (16px to 24px) provides comfortable interaction zones. Navigation and hero sections leverage full-width spacing to create immersive, uncluttered presentation of community connection.
0px: Primary radius for cards, containers, and navigation (maintains clean, professional aesthetic)4px: Small components (buttons, text inputs, badges with rectangular form)12px: Pill-shaped badges and accent elements requiring softer appearance12px within system (avoids excessive softness)| Level | Treatment | Use |
|---|---|---|
| Ground (No Elevation) | No shadow, background-color opaque | Primary surfaces, navigation bar, footer, card containers |
| Overlay (Dropdown/Modal) | rgba(0, 0, 0, 0.176) 0px 6px 12px 0px | Dropdown menus, modal overlays, floating content requiring subtle separation |
| Focus State | 0px 0px 0px 3px rgba(0, 76, 151, 0.1) (focus ring) | Active form fields and keyboard-navigated interactive elements |
| Inset (Button Active) | inset 0px 2px 4px rgba(0, 0, 0, 0.2) or inset 0px 2px 4px rgba(0, 0, 0, 0.15) | Pressed button states, active toggle switches |
Shadow Philosophy:
The design system employs a minimal elevation strategy consistent with modern web design. Ground-level elements (navigation, cards, body content) carry no shadow, relying on color and border treatment for distinction. A single, subtle overlay shadow (rgba(0, 0, 0, 0.176) 0px 6px 12px 0px) is reserved for elements requiring visual separation from background (dropdowns, modals). This restrained approach maintains visual clarity while avoiding cluttered, "shadowy" aesthetics. Focus states use transparent navy outlines rather than shadows to maintain accessibility and keyboard navigation visibility. Active button states employ inset shadows to convey pressing interaction without lifting elements off the canvas.
#004C97) for anchoring trust and professionalism — Apply to footer, headings, and key navigation elements to reinforce brand identity and stability#E03C31) for primary calls-to-action — Use exclusively for high-priority actions (Join, Login) to maintain attention hierarchy and urgency#FEDD00) strategically for secondary emphasis — Feature events, celebrations, and secondary actions without competing with primary red buttons2px solid #004C97 consistently24px–52px) between major sections — Creates visual rhythm and prevents cognitive overload in community platform navigationrgba(0, 0, 0, 0.176) 0px 6px 12px 0px) to maintain visual hierarchy and depth consistency#000000) on navy background — Insufficient contrast (approximately 3:1); use white (#FFFFFF) or light gray for text over navy12px — Excessive rounding contradicts the clean, professional brand aestheticoutline: 2px solid #004C97 meets accessibility standards#004C97 or darken red below #C73025 in hover states — Maintains sufficient contrast and visual distinction between states| Breakpoint Name | Width | Primary Changes |
|---|---|---|
| Mobile | 320px–639px | Single-column layout, navigation collapses to hamburger menu, hero height reduced to 300px, padding 16px horizontal, font sizes reduce 2–4px, buttons full-width |
| Tablet | 640px–1023px | Two-column layout possible, navigation transitions to horizontal menu at 768px, padding 24px horizontal, container max-width 100% with gutters, hero height 400px |
| Desktop | 1024px–1439px | Three–four-column layouts enabled, full navigation bar visible, padding 32px–52px horizontal, container max-width 1110px, hero height 500px |
| Large Desktop | 1440px+ | Max container width enforced (1440px for navigation, 1110px for content), maximum hero height and image quality leveraged, full-width sections maintain edge padding |
44px × 44px for buttons, links, and form controls (ensures accurate touch targeting on mobile devices)48px × 48px preferred for primary actions and frequently-used controls8px between adjacent interactive elements to prevent accidental mis-taps6px 12px (desktop) to 9px 14px (mobile) to achieve 44px minimum height while maintaining visual proportionsrgba(0, 76, 151, 0.1)) to enhance visibility and touch accuracy< 640px, replace horizontal menu with hamburger icon (☰, 24px); open sidebar menu with slide-in animation (250ms ease-out) from left edge, width 280px or 85vw (whichever is smaller)500px (desktop) to 300px (mobile), maintain background image with background-size: cover and background-position: center52px (desktop) to 24px (tablet) to 16px (mobile) while maintaining vertical spacing hierarchy32px → 24px (H1), 25.6px → 18px (H3); maintain 16px body for readability< 480px; expand to full width with bottom margin 12px between buttons<img> elements with srcset for efficient delivery; maintain aspect ratio with aspect-ratio CSS property or padding-bottom hack#E03C31) — Join buttons, login prompts, urgent actions#FEDD00) — Events, featured content, secondary actions#004C97) — Footer, headings, strategic UI anchors#000000) — Primary paragraph text, labels, standard copy#FFFFFF) — Card backgrounds, content surfaces#333333) — De-emphasized content, secondary labels#888888) — Footer metadata, form helpers, tertiary information#E03C31) — Validation errors, alerts, destructive warnings#FEDD00) — Positive events, highlighted sections, celebrations#004C97) as trust anchor — Apply to footer footer sections, primary headings, and navigation text to establish professional brand identity; reserve navy for elements requiring authority#E03C31) exclusively for primary buttons and urgent actions — Never apply red to non-interactive surfaces; maintain scarcity to preserve attention hierarchy and user expectation#000000) with 16px minimum in Josefin Sans — Ensure 22.4px line-height for comfortable reading; never reduce below 14px without explicit mobile justificationH1 (32px) and H3 (25.6px) levels — Avoid serif on body text or utility copy; use serif sparingly for maximum visual impact6px–24px scale — Buttons: 6px 12px, Cards: 24px, Navigation: 16px 12px; never exceed 52px internal component padding32px–112px vertical rhythm — Separate major content blocks with 52px minimum; use 112px–136px for hero and footer areas2px solid #004C97 outline — Never remove focus indicators; maintain keyboard accessibility via consistent, high-contrast outline stylingrgba(0, 0, 0, 0.176) 0px 6px 12px 0px exclusively; no shadows on primary surfaces> 12px; keep design clean and professional without excessive rounding320px constraints; expand padding and font size as breakpoints increase; never force desktop layouts on mobile#FEDD00) on navy background requires verification — Test contrast carefully; use white or light text on navy, avoid yellow-on-blue due to accessibility concerns