kite.video — Design System

1. Visual Theme & Atmosphere

Kite is a screen recording product with a design language that mirrors the tools it serves: precise, dark, and deeply technical. Built on Chakra UI, the site inhabits a dark-mode world of near-blacks and muted navy surfaces, with Inter as the sole typeface — tight, feature-rich, and unapologetically digital. The hero typography is pushed to its limits: 60px at -3px letter-spacing, lnum and salt OpenType features engaged — this is type set by someone who cares. The interaction model is glass-like: translucent borders in graduated white opacity layers, hover states that barely reveal themselves (7.5% white fill). The atmosphere is that of a polished developer tool — capable, calm, and confidently understated.

2. Color Palette & Roles

The color system is monochromatic dark with a glass/translucency layer system. The graduated button borders (0.08 → 0.16 → 0.24 white opacity) create a subtle 3D depth effect that’s become a hallmark of premium dark SaaS design. No accent color is used for interactive elements — white opacity alone carries all UI states.

3. Typography Rules

Inter is used at both extremes of its range: maximal display (60px, bold, tightly tracked) and neutral body (16px, regular). The OpenType features lnum (lining numerals), pnum (proportional numerals), and salt (stylistic alternates) are activated on the hero — making the display text measurably more refined than default Inter rendering. The gap between hero and body creates a dramatic scale contrast that draws the eye immediately. No serif, no display font — Inter handles everything.

4. Component Stylings

Buttons (Chakra UI)

• Transparent background by default
• White text
• Three-layer border: rgba(255,255,255,0.08/0.16/0.24) top/mid/bottom
• Hover: rgba(255,255,255,0.075) fill — glass shimmer effect
• No box shadow in default/hover state
• Solid 2px focus outline (transparent by default — accessible override needed)

Navigation / Header

• Transparent background
• White text

Inputs

• Chakra UI input system (dark-mode variant)
• White text on dark backgrounds

Slider (Chakra)

• chakra-slider__thumb detected — custom media/timeline control
• Implies a product demo or interactive timeline on page

Links

• White text, transparent background
• Consistent with button system — no underlines in default state

5. Layout Principles

• Body: zero padding and margin — full-bleed sections
• No breakpoints extracted — Chakra UI handles responsive internally via its theme system
• --chakra-vh: 100vh — full-viewport height sections
• Section-based layout: full-width alternating content blocks
• Gap management delegated to Chakra’s spacing system (not custom tokens)
• The section element is the primary layout container

6. Depth & Elevation

No traditional box shadows. Depth is achieved through:

1. Layered translucent borders on buttons (graduated white opacity)
2. Dark surface stacking — sections at slightly different dark values
3. Background blur (likely on modals/popovers — Chakra’s default glass behavior)

The system avoids cast shadows entirely, preferring a light-bending glass metaphor. Surfaces feel like dark glass panels rather than paper cards.

7. Do’s and Don’ts

Do:

• Use Inter with OpenType features (lnum, pnum, salt) for display text
• Apply -3px letter-spacing to hero/display headings
• Use three-layer graduated white opacity for button borders
• Keep hover states subtle — 7.5% white fill is the ceiling
• Build full-viewport sections with Chakra’s VH token
• Maintain dark, cool-neutral backgrounds throughout

Don’t:

• Add a brand accent color — white opacity is the entire interactive language
• Use positive letter-spacing (it would break the tight, technical feel)
• Add drop shadows — this is a glass system, not a material one
• Mix in warm neutrals or cream tones — the atmosphere is cool and digital
• Use Inter at regular weight for headings — 700 is the display weight

8. Responsive Behavior

No explicit breakpoints extracted. Chakra UI’s built-in responsive props and theme breakpoints handle all responsive behavior (typically: sm:480px, md:768px, lg:992px, xl:1280px). The single-VH section layout collapses gracefully to stacked mobile sections. The hero type (60px, -3px) will need responsive scaling on mobile — likely dropping to 32–40px with adjusted tracking. The Chakra slider/timeline component is the most complex responsive challenge.

9. Agent Prompt Guide

Quick color reference:

• Background: rgb(22, 22, 29) deep dark navy
• Text: #ffffff white
• Button borders: rgba(255,255,255,0.08/0.16/0.24) graduated
• Button hover: rgba(255,255,255,0.075)

Prompt to recreate this style:

“Design a dark SaaS product landing page in the style of kite.video: deep near-black background, white Inter text, hero heading at 60px bold with -3px letter-spacing and OpenType lnum/pnum/salt features, glass-style buttons with three-layer graduated white opacity borders, no accent colors, Chakra UI components. Atmosphere: precision tool, dark studio, glass surfaces.”

Prompt for a component:

“Create a CTA button: transparent background, white label in Inter 700, border with three opacity layers (top: rgba(255,255,255,0.08), mid: rgba(255,255,255,0.16), bottom: rgba(255,255,255,0.24)), hover fill rgba(255,255,255,0.075). No shadow, no radius beyond Chakra default.”

Generated by Sparkbites — extracted from live CSS analysis