# Kite.ph Design System

> A structured educational canvas balancing high-contrast typography against soft-shadowed surfaces and cyan functional accents.

**Source:** https://kite.ph | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Kite.ph utilizes a monochrome foundation of pure black (#000000) and white (#ffffff) to establish an authoritative educational tone. The system is punctuated by a primary cyan accent (#00bcd4) used exclusively for functional calls-to-action and interactive elements. Typography is anchored by Roboto, utilizing a wide range of weights from 300 (light) for lead paragraphs to 700 (bold) for display headers. Visual depth is achieved through a consistent multi-layered shadow system on cards, while layout rhythm is driven by a 15px/30px spacing logic.

## Signature DNA
1. **Cyan Functionalism** (#00bcd4 is reserved strictly for buttons and interactive indicators, providing a high-contrast signal against the grayscale UI).
2. **Material-Inspired Elevation** (Cards use a triple-stacked shadow technique to create physical separation from the background).
3. **Roboto Hierarchy** (The system relies on Roboto's full weight range to differentiate display, lead, and body text without introducing secondary families).

## Family Map
Not captured in source (no sub-brands identified in topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page background, card surfaces, button text | 82 | 0.8 | computed_style |
| `{color.ink.primary}` | `#000000` | Primary text, display headers | 21 | 0.8 | computed_style |
| `{color.ink.secondary}` | `#3c4858` | Body text, navigation items, card content | 61 | 0.8 | computed_style |
| `{color.ink.muted}` | `#999999` | Secondary button text, disabled states | 6 | 0.6 | computed_style |
| `{color.border.default}` | `#dddddd` | Form borders, dividers | 4 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#00bcd4` | Primary CTA background, active states | 3 | 0.6 | computed_style |
| `{color.accent.purple}` | `#9c27b0` | Decorative text elements | 20 | 0.8 | computed_style |
| `{color.surface.soft}` | `#e2eff9` | Section backgrounds (decorative_only) | 3 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Roboto | 300, 400, 700 | Display, Heading, Body | Roboto (Google Fonts) | Apache 2.0 |
| FontAwesome | 400 | UI Icons, Social Links | Font Awesome Free | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 53px | 60.95px | normal | 700 | Hero headlines | `strong` |
| `{type.display.light}` | 53px | 60.95px | normal | 400 | Hero sub-headlines | `h1.text-center` |
| `{type.heading.sm}` | 24px | 41px | normal | 400 | Large buttons | `a.btn.btn-white` |
| `{type.lead}` | 20px | 24px | normal | 300 | Introductory text | `p.lead.text-justify` |
| `{type.body}` | 16px | 24px | normal | 400 | Navigation, general text | `nav#main-navbar` |
| `{type.body.sm.bold}` | 14px | 24px | normal | 700 | Card titles | `div.card-title.text-center` |
| `{type.body.sm}` | 14px | 24px | normal | 400 | Card body, labels | `a.card` |
| `{type.caption}` | 12px | 20px | normal | 400 | Nav links, small labels | `a.nav-link` |

### Principles
1. **Display weight contrast:** Heroes often pair 700 and 400 weights of the same size (53px) to create internal emphasis.
2. **Lead text lightness:** Introductory paragraphs use weight 300 at 20px to maintain readability without visual heaviness.
3. **Icon-Text parity:** FontAwesome icons are sized to match the line-height of adjacent text (16px or 20px).

## Spacing
**Base unit:** 15px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 3 |
| `{space.sm}` | 10px | 33 |
| `{space.md}` | 15px | 12 |
| `{space.lg}` | 20px | 6 |
| `{space.xl}` | 30px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, specific surfaces | 88 occurrences |
| `{radius.sm}` | 2px | Form inputs, specific cards | `input` role |
| `{radius.md}` | 6px | Standard content cards | `Card` component |
| `{radius.full}` | 50px | Rounded buttons, social icons | `Rounded Button` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px` | Default card elevation | 11 occurrences |
| `{shadow.button}` | `rgba(153, 153, 153, 0.14) 0px 2px 2px 0px, rgba(153, 153, 153, 0.2) 0px 3px 1px -2px, rgba(153, 153, 153, 0.12) 0px 1px 5px 0px` | Muted button elevation | 3 occurrences |
| `{shadow.accent}` | `rgba(0, 188, 212, 0.14) 0px 2px 2px 0px, rgba(0, 188, 212, 0.2) 0px 3px 1px -2px, rgba(0, 188, 212, 0.12) 0px 1px 5px 0px` | Cyan button elevation | 2 occurrences |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Social media links and secondary circular actions.
**Pages observed:** https://kite.ph
**Spec:** Background: #ffffff / Text: #999999 / Radius: 50% / Shadow: `{shadow.button}` (#999999 variant)
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns
#### Content Card
**Role:** Product and news feature containers.
**Pages observed:** https://kite.ph
**Spec:** Background: #ffffff / Text: #3c4858 / Radius: 6px / Shadow: `{shadow.card}` / Typography: 14px Roboto
**States observed:** Default: Captured | Hover: Not captured

#### Cyan Action Button
**Role:** Primary "See More" or "Qualifications" actions.
**Pages observed:** https://kite.ph
**Spec:** Background: #00bcd4 / Text: #ffffff / Radius: 3px / Shadow: `{shadow.accent}` / Typography: 14px Roboto
**States observed:** Default: Captured | Hover: Not captured

### Tier 3: Surface-specific
#### Contact Form Surface
**Role:** Main contact inquiry container.
**Pages observed:** https://kite.ph
**Spec:** Background: #ffffff / Border: #dddddd / Radius: 0px / Padding: 15px
**States observed:** Default: Captured

#### Section Header Band
**Role:** Visual anchor for "Contact Us" or "Products".
**Pages observed:** https://kite.ph
**Spec:** Background: #00bcd4 (gradient observed) / Text: #ffffff / Typography: 24px Roboto
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1140px (estimated from container) |
| Section Padding | 30px |
| Column Gap | 15px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | <768px | Navigation collapses to hamburger; cards stack vertically. |

## Imagery & decoration
The brand uses full-width photographic hero backgrounds with blue color overlays. Decorative elements include the Philippine map silhouette in a dot-matrix pattern and circular social icons.

## Do's
- Use `#00bcd4` exclusively for interactive buttons.
- Apply `{shadow.card}` to all white surfaces containing product information.
- Maintain a 30px gap between major vertical sections.
- Use Roboto 300 for "Lead" paragraphs to ensure a light, modern feel.
- Ensure all icons are rendered using FontAwesome at 16px or 20px.

## Don'ts
- **Wrong:** Using `#9c27b0` (Purple) for primary action buttons. **Right:** Use `#00bcd4`. **Reason:** Purple is a decorative accent; Cyan is the functional primary.
- Do not use border-radius on main section containers (keep at 0px).
- Do not use Roboto Bold (700) for body text; reserve it for headers and card titles.
- Do not omit shadows on cards; the elevation is required for visual separation on the white canvas.

## Similar brands
- Material Design (Google)
- Coursera
- EdX
- Khan Academy

## Quick start
```css
:root {
  --kite-primary: #00bcd4;
  --kite-ink-main: #3c4858;
  --kite-ink-bold: #000000;
  --kite-canvas: #ffffff;
  --kite-shadow-card: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --kite-radius-card: 6px;
}
```

## Agent prompt examples
- "Create a product feature card using a white background, #3c4858 text, and the standard Kite.ph triple-stacked shadow."
- "Generate a primary CTA button with #00bcd4 background, white text, and a 3px border radius."
- "Design a hero section with a Roboto 700 headline at 53px and a Roboto 300 lead paragraph at 20px."

## Known gaps
- Hover and Active states for the Cyan Action Button were not explicitly captured in the computed style evidence.
- Specific mobile breakpoint values (px) were not declared in tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://kite.ph | 1440px | 2026-06-06 |