# Labanepal Design System

> Corporate blue and slate gray anchored by high-contrast white surfaces and structured Open Sans typography.

**Source:** https://labanepal.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Labanepal utilizes a professional "Corporate Blue" palette centered around `#00a0dc` and `#2d3e50`. The system relies on a clean, white foundation (`#ffffff`) with deep charcoal text (`#333333`) for maximum legibility. Typography is strictly **Open Sans**, ranging from heavy 700-weight headlines at 38px to functional 14px body text. Visual depth is achieved through subtle elevation shadows (`rgba(46, 61, 73, 0.1)`) and sharp, square geometry, though circular elements are reserved for social icons and specific status badges.

## Signature DNA
1. **The Sky-to-Slate Anchor:** The interplay between the vibrant Sky Blue (`#00a0dc`) and the professional Slate (`#2d3e50`) defines the brand's corporate identity across headers and CTAs (Homepage, About page).
2. **High-Contrast Information Density:** Use of 700-weight Open Sans for data points (counters) and headlines against pure white backgrounds to ensure technical authority (Homepage "Counter" section).
3. **Shadow-Based Sectioning:** Rather than heavy borders, the system uses soft, wide shadows (`5px 3px 12px`) to lift content cards from the background (Homepage "Our Mentor" and "Testimonial" sections).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button text, card surfaces | 182 | 1.0 | Computed Style |
| `{color.charcoal}` | `#333333` | Primary body text, dark section backgrounds | 247 | 0.8 | Computed Style |
| `{color.ice}` | `#edfafd` | Subtle section backgrounds (alternating bands) | 6 | 0.6 | Computed Style |
| `{color.gray.light}` | `#f5f5f5` | Secondary surface background | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.blue.primary}` | `#00a0dc` | Primary CTAs, active states, header accents | 35 | 0.8 | Computed Style |
| `{color.slate}` | `#2d3e50` | Footer background, dark hero overlays | 18 | 0.8 | Computed Style |
| `{color.blue.deep}` | `#2987bf` | Secondary text links, borders | 46 | 0.8 | Computed Style |
| `{color.gray.muted}` | `#525c65` | Secondary body text, sub-labels | 60 | 0.8 | Computed Style |
| `{color.red.alert}` | `#ff0000` | Decorative badges, status indicators <decorative_only> | 4 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **Open Sans** | 300, 400, 600, 700 | Primary Display & Body | N/A (Google Font) | Apache 2.0 |
| **montserratregular** | 400 | Footer links, secondary body | Montserrat | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h1}` | 38px | 45.6px | normal | 700 | Main Hero Headlines | `h2.title-h1.text-bold` |
| `{type.display}` | 32px | 38.4px | 0.3px | 700 | Counters, large stats | `span.counter.text-w` |
| `{type.h2}` | 32px | 38.4px | 0.5px | 400 | Section titles | `h2.title-h2.text-normal` |
| `{type.h3}` | 22px | 26.4px | 0.3px | 400 | Sub-section headers | `h3.title-h3` |
| `{type.h3.bold}` | 21px | 25.2px | 0.5px | 600 | Feature titles | `h2.title-h2` |
| `{type.body.lg}` | 16px | 34px | 0.2px | 400 | Lead paragraphs | `p:nth-of-type(1)` |
| `{type.body}` | 14px | 20.3px | normal | 400 | Default body text | `header` |
| `{type.button}` | 14px | 20px | normal | 400 | Standard CTAs | `a.btn.c-btn` |
| `{type.caption}` | 11px | 15.95px | normal | 400 | Icon labels | `span.icon-bar-box-text` |

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 60 |
| `{space.sm}` | 10px | 149 |
| `{space.md}` | 20px | 85 |
| `{space.lg}` | 30px | 47 |
| `{space.xl}` | 50px | 13 |
| `{space.section}` | 110px | 18 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Primary buttons, section containers | 429 occurrences |
| `{radius.sm}` | 4px | Form inputs, rounded buttons | `radius: 4px` |
| `{radius.md}` | 10px | Content cards | `radius: 10px` |
| `{radius.full}` | 50% | Social icons, avatars | `radius: 50%` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.05) 0px 1px 1px 0px` | Flat cards | About page cards |
| `{shadow.card}` | `rgba(46, 61, 73, 0.1) 5px 3px 12px 0px` | Standard floating cards | Homepage Mentors |
| `{shadow.elevated}` | `rgba(46, 61, 73, 0.15) 8px 10px 20px 0px` | Social hover/Circular cards | Social icons |

## Components

### Tier 1: Foundational

#### Button
**Role:** Primary action trigger
**Pages observed:** Homepage, About
**Spec:** Background `{color.blue.primary}` (#00a0dc) | Text `{color.white}` (#ffffff) | Radius `{radius.none}` (0px) | Padding 0px 20px | Typography `{type.button}`
**States observed:** Default | Hover: Not captured | Focus: Not captured

#### Text Input
**Role:** Newsletter and search fields
**Pages observed:** Homepage, About
**Spec:** Background `rgba(255, 255, 255, 0.4)` | Text `{color.white}` | Border 1px `{color.white}` | Radius `{radius.sm}` (4px) | Padding 0px 20px
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns

#### Card
**Role:** Content grouping for courses and mentors
**Pages observed:** Homepage, About
**Spec:** Background `{color.white}` | Radius `{radius.md}` (10px) | Shadow `{shadow.card}` | Padding 20px
**States observed:** Default | Hover: Not captured

#### Social Icon Circle
**Role:** Footer and testimonial social links
**Pages observed:** Homepage, About
**Spec:** Background `{color.blue.deep}` (#2987bf) | Text `{color.white}` | Radius `{radius.full}` (50%) | Shadow `{shadow.elevated}`
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Alternating Section
**Role:** Visual break between content blocks
**Pages observed:** Homepage, About
**Spec:** Background `{color.ice}` (#edfafd) | Padding 45px 0px
**States observed:** Static

#### Footer Surface
**Role:** Global site navigation and info
**Pages observed:** Homepage, About
**Spec:** Background `{color.slate}` (#2d3e50) | Text `{color.white}` | Typography `{type.body-sm}` (13px)
**States observed:** Static

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1170px (standard Bootstrap container) |
| Section Padding | 110px (vertical) |
| Column Gap | 30px |

## Do's
- Use **Open Sans 700** for all primary headlines to maintain authority.
- Apply `{color.ice}` (#edfafd) for background bands to separate long-form content.
- Ensure all primary buttons remain `{radius.none}` (0px) for a sharp, corporate feel.
- Use `{shadow.card}` to define interactive areas without using heavy borders.
- Maintain a minimum of 110px vertical spacing between major homepage sections.

## Don'ts
- **Wrong:** Using `#2987bf` (Deep Blue) as the primary CTA background. 
  **Right:** Use `#00a0dc` (Sky Blue). 
  **Reason:** `#00a0dc` is the validated primary action color across the parent brand.
- Do not use rounded corners on primary section containers; keep them `{radius.none}`.
- Avoid using `montserratregular` for headings; it is reserved for footer and secondary links.
- Do not apply shadows to the main navigation bar; it should remain flat against the canvas.

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #00a0dc;
  --color-slate: #2d3e50;
  --color-text: #333333;
  --color-bg-alt: #edfafd;
  --font-main: 'Open Sans', sans-serif;
  --shadow-card: 5px 3px 12px 0px rgba(46, 61, 73, 0.1);
  --radius-card: 10px;
}
```

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Mobile-specific navigation transitions (hamburger menu behavior) were not fully documented.
- Exact transition timings for the homepage slider were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://labanepal.com | 1440px | 2026-06-06 |
| About Us | https://labanepal.com/about | 1440px | 2026-06-06 |