Design System Inspired by The Links Group
1. Visual Theme & Atmosphere
The Links Group design system embodies a mission-driven, professional aesthetic centered on trust, compassion, and protective authority. The visual language combines deep, authoritative teal and forest greens with warm neutral tones, creating an environment that feels both serious and approachable. The system prioritizes clarity and accessibility for sensitive subject matter while maintaining visual warmth through generous whitespace and rounded forms. Typography is modern yet grounded, with Montserrat as the primary typeface delivering confident messaging, paired with supportive sans-serif weights. The overall atmosphere is one of quiet strength—conveying expertise and stability for an organization dedicated to protecting vulnerable populations. Emotional warmth is balanced with professional restraint, ensuring content about animal and human welfare is presented with appropriate gravity without appearing cold or clinical.
Key Characteristics
- Deep teal and forest green primary palette suggesting trust, protection, and natural harmony
- Warm neutral grays bridging the gap between cool and warm tones
- Clean, modern sans-serif typography with consistent weight hierarchy
- Ample whitespace and breathing room around content
- Rounded button corners (6px–48px) softening authority with approachability
- Subtle shadows adding depth without distraction
- High contrast for readability, especially in long-form mission and vision content
- Accessibility-first design supporting navigation of complex organizational information
2. Color Palette & Roles
Primary
- Teal Primary (
#249188): Core brand color for primary CTAs, headers, and key interactive elements; conveys trust and environmental protection
- Deep Teal (
#289088): Slightly darker variant for hover states and emphasis; maintains cohesion with primary
Accent Colors
- Sky Teal (
#AADDDD): Soft accent for secondary backgrounds, callouts, and supporting visual elements
- Light Mint (
#CDE6E3): Lightest teal variant for subtle backgrounds and low-emphasis surfaces
- Ocean Blue (
#0073AA): Supporting accent for links and secondary interactive elements
- Bright Blue (
#2266FF): Highlight and emphasis color, used sparingly for maximum impact
- Royal Blue (
#3858E9): Alternative accent for special interactive states
Interactive
- Accent Green (
#008000): Strong action color for critical CTAs and positive confirmations
Neutral Scale
- Dark Charcoal (
#222222): Darkest text color for high-contrast body copy
- Charcoal (
#333333): Primary text color for readability; warm dark gray
- Mid Gray (
#444444): Secondary text, muted labels, and less prominent UI elements
- Light Gray (
#BFBFBF): Disabled states, placeholder text, and subtle borders
- Very Light Gray (
#F2F2F2): Neutral hover backgrounds for secondary buttons
- Off-White (
#E8EEF6): Page backgrounds and light surface layers; maintains warmth
Surface & Borders
- White (
#FFFFFF): Primary surface for cards, modals, input fields, and main content areas
- Black (
#000000): Rare utility color for maximum contrast borders or high-emphasis overlays
Semantic / Status
- Error Red (
#CF2E2E): Error messages and critical warnings
- Danger Red (
#FF0000): Emergency alerts and destructive actions
- Warning Yellow (
#FCB900): Cautionary states and non-critical warnings
3. Typography Rules
Font Family
- Primary: Montserrat (Google Fonts), fallback stack:
Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
- Secondary (small caps/supporting): Open Sans (Google Fonts), fallback stack:
'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|
| Display / H1 | Montserrat | 60px | 600 | 69px | Normal | Page hero, main headlines |
| Heading / H2 | Montserrat | 30px | 700 | 30px | Normal | Section headers, major divisions |
| Subheading / H3 | Montserrat | 20px | 600 | 20px | Normal | Subsection titles, card headers |
| Subheading / H4 | Montserrat | 18px | 700 | 21.6px | Normal | Minor section breaks, emphasis text |
| Body Text | Montserrat | 18px | 400 | 32.4px | Normal | Long-form content, mission statements |
| Body Emphasis | Montserrat | 18px | 500 | 30.6px | Normal | Highlighted paragraphs, callouts |
| Button Text | Montserrat | 15px | 500 | 20px | Normal | All button labels |
| Link Text | Montserrat | 12px | 500 | 30.6px | Normal | Inline and standalone links |
| Small Text | Open Sans | 14px | 600 | 18.2px | Normal | Footer, captions, legal text |
| Input Text | Montserrat | 13.33px | 400 | Normal | Normal | Form input fields |
Principles
- Montserrat is the primary typeface system-wide, providing modern credibility and consistent personality
- Line heights are generous (32.4px for body) to ensure accessibility and reduce cognitive load on sensitive content
- Weight hierarchy is strict: 400 for body, 500 for emphasis and buttons, 600–700 for headings
- Display type (H1) uses lighter weight (600) despite large size to maintain visual elegance and hierarchy distinction
- All links use 12px with 500 weight to signal interactivity subtly without visual aggression
- Button text is slightly smaller (15px) than body to create visual distinction and focus
- Small supporting text (Open Sans, 14px, 600) differentiates metadata from content
4. Component Stylings
Buttons
Primary Button (Teal CTA)
- Background:
#249188
- Text Color:
#FFFFFF
- Font: Montserrat, 15px, weight 500
- Padding:
10px 10px
- Height:
45px
- Border Radius:
6px
- Border:
1px solid #249188
- Box Shadow: None
- Hover State: Background
#289088, text #FFFFFF
- Active State: Background
#1A7570, box-shadow: rgba(36, 145, 136, 0.4) 0px 0px 8px 2px
- Disabled State: Background
#BFBFBF, text #444444
Secondary Button (Light Gray)
- Background:
#F9F9F9
- Text Color:
#333333
- Font: Montserrat, 15px, weight 500
- Padding:
10px 10px
- Height:
45px
- Border Radius:
6px
- Border:
1px solid #F2F2F2
- Box Shadow: None
- Hover State: Background
#EEEEEE, text #222222
- Active State: Background
#E8E8E8, text #222222
- Disabled State: Background
#F2F2F2, text #BFBFBF
Ghost Button (Transparent)
- Background:
rgba(0, 0, 0, 0)
- Text Color:
#333333
- Font: Montserrat, 15px, weight 500
- Padding:
10px 10px
- Height:
45px
- Border Radius:
6px
- Border:
1px solid #F2F2F2
- Box Shadow: None
- Hover State: Background
#F9F9F9, text #333333, border #BFBFBF
- Active State: Background
#E8E8E8, text #222222
Full-Width Button
- Background:
#F9F9F9
- Text Color:
#333333
- Font: Montserrat, 15px, weight 500
- Padding:
10px 10px
- Height:
45px
- Border Radius:
6px
- Border:
1px solid #F2F2F2
- Width:
100%
- Box Shadow: None
- Hover State: Background
#EEEEEE
Cards & Containers
Standard Card
- Background:
#FFFFFF
- Text Color:
#333333
- Font: Montserrat, 18px, weight 500
- Padding:
24px or 40px depending on content density
- Border Radius:
0px (cards often flush) or 6px (for inset cards)
- Border: None or
1px solid #E8EEF6
- Box Shadow:
rgba(0, 0, 0, 0.12) 10px 10px 0px 0px (optional elevation)
- Line Height: 30.6px
Light Background Card
- Background:
#E8EEF6
- Text Color:
#333333
- Padding:
24px or 36px
- Border Radius:
6px
- Border: None
- Box Shadow: None
Impact Statistic Container
- Background:
rgba(0, 0, 0, 0) (transparent over image or solid background)
- Text Color:
#289088
- Font: Montserrat, 30px, weight 700
- Padding:
24px
- Border Radius:
50% (circular badges) or 6px (rectangular)
- Border:
2px solid #289088
Inputs & Forms
Text Input (Default)
- Background:
#FFFFFF
- Text Color:
#666666
- Font: Montserrat, 16px, weight 400
- Padding:
14px 20.84px
- Height:
47px
- Border Radius:
3px
- Border:
0px solid #BBBBBB (appears borderless but has internal structure)
- Box Shadow:
rgba(0, 0, 0, 0.3) 0px 2px 18px 0px
- Placeholder Color:
#999999
- Focus State: Box-shadow
rgba(36, 145, 136, 0.4) 0px 0px 8px 2px, border-color #249188
Select Dropdown
- Background:
#FFFFFF
- Text Color:
#666666
- Font: Montserrat, 16px, weight 400
- Padding:
14px 20.84px
- Height:
47px
- Border Radius:
3px
- Border:
0px solid #BBBBBB
- Box Shadow:
rgba(0, 0, 0, 0.07) 0px 0px 7px 0px inset (subtle internal shadow)
- Chevron Icon Color:
#249188
Checkbox / Toggle
- Background (Checked):
#249188
- Background (Unchecked):
#FFFFFF
- Border:
2px solid #249188
- Border Radius:
3px (checkbox) or 21px (toggle)
- Size:
18px × 18px minimum
Navigation
Header Navigation
- Background: Transparent (overlaid on dark teal or semi-transparent overlay)
- Text Color:
#BFBFBF or #FFFFFF (depending on context)
- Font: Montserrat, 18px, weight 500
- Padding:
0px (text only) or 16px 24px (with background)
- Line Height: 30.6px
- Active Link:
#249188 or #FFFFFF (bold underline or background highlight)
- Hover State: Text color transitions to lighter variant, optional underline appears
Breadcrumb Navigation
- Text Color:
#BFBFBF
- Font: Montserrat, 12px, weight 500
- Separator:
/ in #BFBFBF
- Active Item:
#333333 or #249188
- Padding:
8px 0px
Footer Links
- Text Color:
#BFBFBF
- Font: Montserrat, 12px, weight 500
- Hover State:
#FFFFFF
- Padding:
0px 0px 4px 0px
Modals & Dialogs
Modal Container
- Background:
#FFFFFF
- Border Radius:
6px
- Box Shadow:
rgba(0, 0, 0, 0.75) 0px 5px 5px 0px
- Padding:
36px
- Max Width:
520px
- Overlay:
rgba(0, 0, 0, 0.5)
Modal Title
- Font: Montserrat, 20px, weight 600
- Text Color:
#333333
- Margin Bottom:
20px
Modal Body Text
- Font: Montserrat, 16px, weight 400
- Text Color:
#444444
- Line Height: 28px
- Margin Bottom:
24px
Close Button (X)
- Background: Transparent
- Text Color:
#CF2E2E
- Font: Montserrat, 18px, weight 600
- Padding:
4px 8px
- Hover State: Color
#FF0000
Badges & Tags
Status Badge (Active)
- Background:
#CDE6E3
- Text Color:
#249188
- Font: Montserrat, 12px, weight 600
- Padding:
6px 12px
- Border Radius:
48px
Status Badge (Warning)
- Background:
#FCB900
- Text Color:
#333333
- Font: Montserrat, 12px, weight 600
- Padding:
6px 12px
- Border Radius:
48px
Status Badge (Error)
- Background:
#CF2E2E
- Text Color:
#FFFFFF
- Font: Montserrat, 12px, weight 600
- Padding:
6px 12px
- Border Radius:
48px
5. Layout Principles
Spacing System
- Base Unit: 4px
- Scale: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px, 44px, 52px
- Margin (block): 16px (compact), 24px (standard), 32px (spacious), 44px (section breaks)
- Padding (inline): 16px (compact), 20px (standard), 24px (comfortable), 40px (generous)
- Gap (flex): 12px (tight), 16px (standard), 24px (relaxed)
Grid & Container
- Max Container Width: 1440px (full layout width observed)
- Standard Column Layout: 12-column grid with 24px gutters
- Content Container: 1200px max-width for text-heavy sections
- Narrow Container: 800px max-width for forms and focused content
- Margin Left/Right: 40px minimum on desktop, 20px on tablet, 16px on mobile
Whitespace Philosophy
The design system prioritizes generous whitespace around content blocks to reduce cognitive load when presenting sensitive topics. Section breaks use 44–52px vertical spacing. Visual breathing room within cards uses 24–40px padding. Dense information (tables, lists) reduces line-height slightly (28px) but increases margin-bottom (16px) between items. Whitespace is treated as an active design element communicating hierarchy and emphasis rather than wasted space.
Border Radius Scale
- Sharp Corners:
0px (cards on flush backgrounds, full-width sections)
- Subtle:
3px (inputs, small controls)
- Standard:
6px (buttons, small cards, modals)
- Relaxed:
21px (split buttons, toggle switches)
- Full Circular:
50% (avatar images, circular badges, circular impact meters)
6. Depth & Elevation
| Level | Treatment | Use |
|---|
| None | No shadow, flat appearance | Default cards, text fields on white backgrounds |
| Small Inset | rgba(0, 0, 0, 0.07) 0px 0px 7px 0px inset | Dropdown menus, subtle form field depth |
| Medium Glow | rgba(36, 145, 136, 0.4) 0px 0px 8px 2px | Button hover/focus state, active form elements |
| Large Drop | rgba(0, 0, 0, 0.75) 0px 5px 5px 0px | Modals, overlays, floating panels |
| Offset Lift | rgba(0, 0, 0, 0.12) 10px 10px 0px 0px | Impact cards, statistical callouts (optional) |
Shadow Philosophy: Shadows are minimal and purposeful. Small inset shadows on inputs create tactile depth without distraction. The primary glow shadow (medium) uses the teal accent color to reinforce brand identity during interaction. Large drop shadows on modals establish clear hierarchy separating overlay content from background. Offset shadows are reserved for special statistical cards, creating visual lift and emphasis. The system avoids stacked shadows; each element uses one shadow value maximum, reducing visual clutter in mission-critical interfaces.
7. Do's and Don'ts
Do
- Use Montserrat consistently across all UI text—it provides the system's cohesive identity
- Apply generous whitespace (24–44px margins) around content blocks to create breathing room
- Use the primary teal (
#249188) for all main CTAs and interactive emphasis
- Ensure minimum contrast ratio of 4.5:1 for body text against all backgrounds
- Use Montserrat weight 400 for body text (18px, 32.4px line-height) for readability of sensitive content
- Apply subtle box-shadows (small inset or medium glow) only; avoid stacking multiple shadows
- Build buttons with consistent 45px height and 6px border radius for recognizability
- Use circular image containers (
50% border-radius) for team member avatars and impact photos
- Test all color combinations for colorblind accessibility (teal + neutral + warm grays work well)
- Include skip-to-content links and proper heading hierarchy for screen reader navigation
Don't
- Mix font families arbitrarily; Montserrat is primary, Open Sans only for small supporting text
- Exceed padding of 44px or margins of 52px except for major section breaks—it wastes space
- Use pure black (
#000000) for text; use #222222 (dark charcoal) instead for warmth
- Create buttons smaller than 45px height or with rounded corners greater than 6px (except toggles/pills)
- Layer multiple box-shadows on a single element; use one shadow value per component state
- Apply the bright blue (
#2266FF) extensively; reserve it for rare high-emphasis highlights
- Use the error red (
#CF2E2E) on light backgrounds without sufficient contrast; pair with dark text
- Forget to provide
:focus and :hover states for all interactive elements
- Display body text smaller than 16px in forms or smaller than 18px in long-form content
- Ignore the 12px, 500-weight link styling; ensure all links follow the established small-text pattern
8. Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|
| Mobile | < 640px | Single column, 16px margins, 16px padding, button width 100%, font-size -2px headlines, touch targets 48px minimum |
| Tablet | 640px–1024px | Two columns, 20px margins, 20px padding, button width auto, font-size -1px headlines |
| Desktop | ≥ 1024px | Full grid (12 columns), 40px margins, 24–40px padding, inline buttons, full typography hierarchy |
| Large Desktop | ≥ 1440px | Container max-width 1440px, generous margins, full spacing scale |
Touch Targets
- Minimum touch target size:
48px × 48px (mobile buttons, checkboxes)
- Button height on mobile:
48px (increased from 45px for easier interaction)
- Minimum link tap area:
44px × 44px including padding
- Dropdown and select height:
48px on mobile, 47px on desktop
- Navigation spacing:
16px vertical, 20px horizontal between nav items (mobile menu)
Collapsing Strategy
- Typography: Display (H1) reduces from 60px to 40px on tablet, 32px on mobile; body remains 18px
- Spacing: Padding reduces from 40px to 24px on tablet, 16px on mobile; gaps reduce from 24px to 12px
- Buttons: Secondary buttons stack vertically (100% width) on mobile; primary buttons maintain width but reduce padding
- Navigation: Horizontal desktop nav collapses to off-canvas (hamburger) menu on tablets and mobile
- Grid: Full 12-column grid on desktop collapses to 6 columns on tablet, single column on mobile
- Images: Hero images remain full-width but reduce height on mobile (aspect ratio maintained)
- Forms: Input width remains 100% on mobile, max 520px on desktop; labels stack above fields
- Cards: Two-column card layouts shift to single column on tablet, remain single on mobile
9. Agent Prompt Guide
Quick Color Reference
- Primary CTA: Teal Primary (
#249188)
- Secondary CTA: Light Gray (
#F9F9F9)
- Background: White (
#FFFFFF) or Off-White (#E8EEF6)
- Body Text: Charcoal (
#333333)
- Secondary Text: Mid Gray (
#444444)
- Accent / Highlight: Bright Blue (
#2266FF)
- Status - Error: Error Red (
#CF2E2E)
- Status - Warning: Warning Yellow (
#FCB900)
- Heading Text: Dark Charcoal (
#222222)
- Links: Light Gray / Teal on dark backgrounds (
#BFBFBF or #249188)
- Borders / Disabled: Light Gray (
#BFBFBF)
- Trust / Secondary Accent: Sky Teal (
#AADDDD)
Iteration Guide
- Typography Foundation: Always use Montserrat as primary, Open Sans only for small labels (14px). Body text is 18px, 400 weight, 32.4px line-height. Headings use 600–700 weight with precise sizes (H1: 60px, H2: 30px, H3: 20px, H4: 18px).
- Color Hierarchy: Primary CTA uses
#249188; secondary CTA uses #F9F9F9 with #333333 text. Neutral text is #333333 (charcoal), secondary text is #444444 (mid-gray). Never use pure black for body text.
- Button Consistency: All buttons are 45px height, 6px border-radius, Montserrat 15px weight 500. Primary buttons: teal background with white text. Secondary buttons: light gray background with dark text. Hover states darken or add teal glow shadow.
- Spacing Discipline: Use the spacing scale (16px, 20px, 24px, 32px, 40px, 44px) strictly. Padding inside cards: 24px or 40px. Margins between sections: 32px or 44px. Gaps in flex layouts: 12px or 16px.
- Input Fields: All inputs are 47px height, 16px font-size, Montserrat 400 weight,
#FFFFFF background with rgba(0, 0, 0, 0.3) 0px 2px 18px 0px shadow. Inset shadows on dropdowns use rgba(0, 0, 0, 0.07) 0px 0px 7px 0px inset.
- Focus & Hover States: Every interactive element requires explicit
:hover, :focus, and :active states. Use teal accent glow (rgba(36, 145, 136, 0.4) 0px 0px 8px 2px) for focus states on buttons and inputs.
- Modals & Overlays: Modals use
#FFFFFF background, 6px border-radius, rgba(0, 0, 0, 0.75) 0px 5px 5px 0px shadow, centered with rgba(0, 0, 0, 0.5) overlay. Padding: 36px.
- Mobile Responsiveness: Touch targets minimum 48px × 48px. Typography reduces: H1 from 60px to 40px on tablet, 32px on mobile. Buttons full-width (100%) on mobile. Navigation collapses to off-canvas hamburger.
- Contrast & Accessibility: All text meets WCAG AA (4.5:1 minimum). Do not pair light teal (
#AADDDD) with light backgrounds; use only for subtle UI elements or dark text. Test all combinations: #333333 or #444444 text on all backgrounds.