# Ethdc.in Design System

> A high-contrast educational technology interface defined by deep navy foundations, vibrant lime accents, and structured Poppins typography.

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

## TL;DR
Ethdc.in utilizes a "monochrome-plus" system where a dominant achromatic base (#ffffff, #000000) is punctuated by a specific high-voltage lime green (`#7cda24`) and a deep corporate navy (`#00208a`). The layout is heavily modular, relying on cards with generous 20px radii and significant drop shadows (`rgba(0, 0, 0, 0.27)`) to create depth against white canvases. Typography is strictly sans-serif, pairing Open Sans for high-density body content with Poppins for structured, geometric headings.

## Signature DNA
1. **The Lime Signal** (`#7cda24`): Used as a high-contrast text accent and brand identifier across all pages to break the corporate navy/white palette.
2. **Deep-Float Cards** (20px radius + 31px spread shadow): Content is rarely flat; it sits in highly elevated containers that use aggressive softening to signal interactivity.
3. **Geometric Heading Hierarchy**: Poppins is used exclusively for headers (h2-h4), often at weight 500, creating a clean, modern educational aesthetic.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, card surface, button text | 96 | 1.0 | Computed |
| `{color.black}` | `#000000` | Primary text, footer background | 14 | 1.0 | Computed |
| `{color.gray.600}` | `#666666` | Default body text | 114 | 0.8 | Computed |
| `{color.gray.300}` | `#d6d6d6` | Default border | 12 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#7cda24` | Brand signal text, primary accent | 11 | 0.8 | Computed |
| `{color.navy}` | `#00208a` | Primary button background, hero text | 6 | 0.6 | Computed |
| `{color.amber}` | `#f0b800` | Secondary button background | 4 | 0.6 | Computed |
| `{color.sky}` | `#2ea3f2` | Link text, icon accents | 15 | 0.8 | Computed |
| `{color.purple}` | `#331584` | Section backgrounds (decorative) | 15 | 0.8 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Poppins | 200, 300, 500, 600, 700 | Headings, UI Labels | Poppins (Google Fonts) | OFL |
| Open Sans | 300, 500, 600, 700, 800 | Body, Display, Buttons | Open Sans (Google Fonts) | OFL |
| ETmodules | 400 | Iconography | None | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.mega}` | 70px | 23.8px | normal | 800 | Hero Emphasis | `p` |
| `{type.display.lg}` | 40px | 56px | normal | 300 | Page Title (H1) | `h1` |
| `{type.h4}` | 30px | 30px | normal | 500 | Module Headers | `h4.et_pb_module_header` |
| `{type.h3}` | 28px | 36.4px | normal | 500 | Section Headers | `h3` |
| `{type.button}` | 20px | 34px | normal | 500 | CTA Labels | `a.et_pb_button` |
| `{type.body.lg}` | 18px | 23.8px | normal | 500 | Feature Text | `div.et_pb_module` |
| `{type.body.md}` | 16px | 28.8px | normal | 500 | Standard Prose | `p` |
| `{type.body.sm}` | 14px | 23.8px | normal | 500 | Small Print/Captions | `article` |

### Principles
1. **Lightweight Display**: Large H1 titles use Open Sans at weight 300 to maintain elegance despite the 40px size.
2. **Medium Weight Headers**: All Poppins headings (H3, H4) default to weight 500 for a balanced, approachable feel.
3. **Tight Display Leading**: Large display text (70px) uses extremely tight line-height (23.8px) for stylistic overlap/impact.

## Spacing
**Base unit:** 5px (derived from common 10, 15, 20, 25, 30, 40, 50px values)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 10px | 63 |
| `{space.sm}` | 15px | 30 |
| `{space.md}` | 20px | 11 |
| `{space.lg}` | 25px | 14 |
| `{space.xl}` | 54px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Sections, Footer | 267 occurrences |
| `{radius.sm}` | 3px | Form Inputs | 3 occurrences |
| `{radius.md}` | 20px | Content Cards | 12 occurrences |
| `{radius.lg}` | 30px | Primary Buttons | 8 occurrences |
| `{radius.pill}` | 100px | Secondary Buttons/Badges | 11 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.deep}` | `rgba(0, 0, 0, 0.27) 0px 22px 31px -16px` | Feature Cards | 12 occurrences |
| `{shadow.soft}` | `rgba(0, 0, 0, 0.3) 0px 2px 18px -13px` | Surface Panels | 6 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** https://ethdc.in
**Spec:** Background: `{color.navy}` (#00208a) / Text: `{color.white}` (#ffffff) / Radius: `{radius.lg}` (30px) / Padding: 10px 40px / Typography: `{type.button}`
**States observed:** Default | Hover | Focus: not captured

#### Secondary Button
**Role:** Alternative call to action (e.g., Book a Demo)
**Pages observed:** https://ethdc.in
**Spec:** Background: `{color.amber}` (#f0b800) / Text: `{color.white}` (#ffffff) / Radius: `{radius.lg}` (30px) / Padding: 10px 20px / Typography: `{type.button}`
**States observed:** Default | Hover: not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product benefits or modules
**Pages observed:** https://ethdc.in
**Spec:** Background: `{color.white}` (#ffffff) / Border: 1px `{color.gray.300}` (#d6d6d6) / Radius: `{radius.md}` (20px) / Shadow: `{shadow.deep}`
**States observed:** Default | Hover: not captured

#### FAQ Toggle
**Role:** Accordion for information density
**Pages observed:** https://ethdc.in/about
**Spec:** Text: `{color.gray.600}` (#666666) / Typography: `{type.body.lg}` / Border-bottom: 1px `{color.gray.300}`
**States observed:** Default | Active: captured

### Tier 3: Surface-specific

#### Global Footer
**Role:** Site-wide navigation and legal
**Pages observed:** https://ethdc.in, https://ethdc.in/about
**Spec:** Background: `{color.black}` (#000000) / Text: `{color.white}` (#ffffff) / Padding: 15px 0px 5px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Section Padding | 54px 0px |
| Card Padding | 0px 15px 15px |
| Max Content Width | ~1200px (estimated from desktop screenshots) |

## Imagery & decoration
- **Iconography**: Uses circular containers with white backgrounds and ETmodules icon font.
- **Backgrounds**: Utilizes dark navy gradients and abstract network patterns (dots and lines) to reinforce "technology" themes.
- **Avoids**: Soft pastels, organic shapes, or low-contrast text on dark backgrounds.

## Do's
- Use `#7cda24` for high-impact text highlights against white backgrounds.
- Apply `{radius.md}` (20px) to all content-bearing cards.
- Ensure all primary buttons use the `{radius.lg}` (30px) rounded style.
- Use Poppins weight 500 for all sub-section headings.
- Maintain a 54px vertical rhythm between major page sections.

## Don'ts
- **Wrong:** Using `#7cda24` for small body text. **Right:** Use for headings or bold highlights. **Reason:** Contrast ratio is 1.8:1, insufficient for long-form legibility.
- **Wrong:** Mixing serif fonts into the UI. **Right:** Stick to Poppins/Open Sans.
- **Wrong:** Using sharp corners for interactive elements. **Right:** Use minimum 20px radius for cards.
- **Wrong:** Placing navy text on black backgrounds. **Right:** Use white text on black surfaces.

## Similar brands
- Blackboard
- PowerSchool
- Instructure (Canvas)
- Microsoft Education

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #7cda24;
  --color-navy: #00208a;
  --color-amber: #f0b800;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-600: #666666;
  
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  
  --radius-card: 20px;
  --radius-btn: 30px;
  
  --shadow-deep: 0px 22px 31px -16px rgba(0, 0, 0, 0.27);
}
```

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://ethdc.in | Desktop 1440px | 2026-06-06 |
| About Us | https://ethdc.in/about | Desktop 1440px | 2026-06-06 |
| Mobile Home | https://ethdc.in | Mobile 390px | 2026-06-06 |