# Kaltura Design System

> High-contrast enterprise video architecture anchored by deep charcoal foundations and vibrant electric blue interactions.

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

## TL;DR
Kaltura utilizes a monochrome-first foundation where deep charcoal (#282828) and pure white (#ffffff) create a high-contrast, professional canvas. The system's primary "voltage" is delivered through a specific electric blue accent (#0d6efd), used exclusively for primary actions and links. Typography is dominated by CentraNo1, a geometric sans-serif that scales from massive 90px display weights to functional 14px body text. Layouts are characterized by generous vertical breathing room (up to 100px section gaps) and a reliance on large-radius containers (10px to 100px) to soften the corporate high-contrast aesthetic.

## Signature DNA
1. **The Electric Primary** (#0d6efd used for `--bs-primary` and `--bs-link-color`). This specific blue is the only non-achromatic color with high frequency, signaling every interactive path (kaltura.com, kaltura.com/pricing).
2. **Geometric Display Scale** (CentraNo1 at 700 weight). The brand uses extreme typographic contrast, jumping from 90px "New Numbers" to 16px body text to establish immediate information hierarchy (kaltura.com).
3. **Softened Enterprise Geometry** (10px control radius). While the palette is severe, the UI is softened by a consistent 10px radius on surfaces and buttons, moving away from sharp-edged legacy enterprise software (kaltura.com).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--bs-body-color` | `#282828` | Primary text and dark surfaces | 236 | 1 | computed_style |
| `--bs-body-bg` | `#ffffff` | Primary page background | 88 | 1 | computed_style |
| `--bs-emphasis-color` | `#000000` | High-emphasis headers | 3 | 1 | computed_style |
| `Canvas Soft` | `#f7f7f4` | Subtle section backgrounds | 11 | 0.8 | computed_style |
| `Dark Surface` | `#333333` | Secondary dark backgrounds | 10 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--bs-primary` | `#0d6efd` | Primary CTA background, links | 15 | 1 | `--bs-primary` |
| `--bs-play-yellow` | `#ffcd00` | Decorative/Product accent | <5 | 1 | `--bs-play-yellow` |
| `--bs-live-red` | `#fa374b` | Decorative/Product accent | <5 | 1 | `--bs-live-red` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| CentraNo1 | 400, 500, 600, 700, 900 | Primary Brand (Heading/Body) | Montserrat | Licensed |
| arial | 400 | System Fallback / UI | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-mega}` | 90px | 90px | normal | 700 | Stats/Hero Numbers | `h3.b-new-numbers__item-number` |
| `{type.display-xl}` | 50px | 65px | normal | 700 | Main Hero H1 | `h1.c-el.c-new-title` |
| `{type.display-lg}` | 35px | 45px | normal | 700 | Section Headers | `h2.c-el.c-new-title` |
| `{type.title-md}` | 20px | 26px | normal | 700 | Sub-headers | `span.c-new-title__word` |
| `{type.body-lg}` | 18px | 28px | normal | 400 | Lead Paragraphs | `p` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default Body | `header.c-new-header` |
| `{type.body-sm}` | 14px | 18.2px | 0.28px | 400 | Navigation/Footer | `li#menu-item-10556` |
| `{type.caption}` | 12px | 26px | normal | 500 | Small Labels | `li#menu-item-232141` |

### Principles
1. **Bold Display Weight:** All headers above 20px utilize weight 700 to maintain authority against high-density imagery.
2. **Tight Display Leading:** Large display type (90px) uses 1:1 line height (90px) to keep numeric blocks compact.
3. **Increased Small Tracking:** Body-sm (14px) uses 0.28px letter spacing to maintain legibility on dark backgrounds.

## Spacing
**Base unit:** Custom
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 11 |
| `{space.base}` | 16px | 19 |
| `{space.lg}` | 30px | 21 |
| `{space.xl}` | 50px | 9 |
| `{space.section}` | 100px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Sharp containers | 252 occurrences |
| `{radius.md}` | 10px | Standard cards/buttons | 51 occurrences |
| `{radius.pill}` | 100px | Primary CTAs | 9 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Flat | none | Standard sections | Default state |
| Floating | `rgba(0, 0, 0, 0.06) 0px 0px 20px 10px` | Feature cards | White cards on white canvas |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Book a demo)
**Pages observed:** kaltura.com
**Spec:** Background `#0d6efd` / Text `#ffffff` / Radius `100px` / Padding `14px 30px` / Typography `18px 500`
**States observed:** Default | Hover: captured

#### Ghost Button
**Role:** Secondary action (Contact Us)
**Pages observed:** kaltura.com
**Spec:** Background `transparent` / Text `#282828` / Border `1px #282828` / Radius `100px`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Content grouping
**Pages observed:** kaltura.com
**Spec:** Background `#ffffff` / Text `#282828` / Radius `10px` / Padding `30px 35px` / Shadow `rgba(0,0,0,0.06) 0px 0px 20px 10px`
**States observed:** Default: captured

#### Pricing Card
**Role:** Tiered information
**Pages observed:** kaltura.com/pricing
**Spec:** Background `#2b2b2b` / Text `#cccccc` / Border `1px #4d4d4d` / Radius `4px` / Padding `2px 10px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Testimonial Block
**Role:** Social proof
**Pages observed:** kaltura.com
**Spec:** Background `#f8f8f5` / Text `#282828` / Radius `10px` / Padding `90px 83px 50px`
**States observed:** Default: captured

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1440px |
| Section Padding | 100px (Vertical) |
| Grid | 12-column fluid |

## Do's
- Use `#282828` for primary body text to avoid the harshness of pure black.
- Apply `{radius.pill}` (100px) to all primary "Book a demo" style buttons.
- Maintain a 100px vertical gap between major homepage sections.
- Use CentraNo1 at 700 weight for any text element serving as a header.
- Reserve `#0d6efd` strictly for interactive elements.

## Don'ts
- **Wrong:** Using `#0d6efd` for non-interactive decorative icons. **Reason:** This color is reserved for user-path signaling.
- **Wrong:** Applying sharp 0px corners to white feature cards. **Reason:** Brand signature requires a 10px softening.
- **Wrong:** Mislabeling sub-brand colors (like `--bs-play-yellow`) as the parent primary. **Reason:** The parent brand is monochrome-blue; yellow is a product-specific accent.

## Similar brands
- Zoom (Blue/White/Gray enterprise mix)
- Vimeo (High-contrast video-first layout)
- Brightcove (Dark-mode enterprise video)

## Quick start

```css
/* CSS Variables */
:root {
  --kaltura-blue: #0d6efd;
  --kaltura-charcoal: #282828;
  --kaltura-white: #ffffff;
  --kaltura-radius-md: 10px;
  --kaltura-radius-pill: 100px;
  --kaltura-font-main: 'CentraNo1', sans-serif;
}
```

## Known gaps
- Mobile-specific navigation transitions were not captured in the pricing page flow.
- Hover state hex values for the primary blue button were not explicitly declared in tokens, though visually observed.
- Form input validation states (Success/Error) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|------|------|------|
| Homepage | https://kaltura.com | 1440px | 2026-06-06 |
| Pricing | https://kaltura.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://kaltura.com | 390px | 2026-06-06 |