Rainberrytv Design System Deep Dive

1. Brand Overview

Rainberrytv is a streaming and video content platform with a design language that leans modern, light, and functional. This isn't a brand screaming for attention with oversized neon typography or massive gradients. It's restrained. The palette is cool and engaging, the typography is clean and approachable, and the layout scale is disciplined.

From the data, Rainberrytv builds its UI on Tailwind CSS — state modifiers, utility classes, and arbitrary spacing values are sprinkled everywhere. That tells you they're thinking about scalability and consistency. It's not just aesthetic; it's operational. Responsive breakpoints line up with the standard Tailwind set (640px, 768px, 1024px, 1280px), so developers are probably working directly inside a utility-first workflow.

The color choices reflect a balance between fresh, welcoming visuals and professional seriousness. The standout tone is a turquoise-teal (#40c1ad), which feels aquatic — calm yet energetic enough to serve as a call-to-action. Supporting colors are soft off-whites and mid neutrals, keeping text readable without harsh contrast.

Typography runs exclusively on Open Sans with a fairly uniform weight of 400 for almost everything, except one caption style at a featherweight 200. This gives headings, links, buttons, and body text a consistent feel — they don't jump wildly in weight, which reduces visual noise. This is a deliberate choice: streaming brands often want to keep the interface "invisible" so content takes center stage.

Spacing is an interesting mix: both 4px subdivisions and big 74px gaps. That 74px repeated count in the dataset (238 occurrences) suggests section spacing or vertical rhythm anchors. It's not random — it's huge and consistent.

Rainberrytv's UI keeps borders minimal, radii extreme only for pills or round avatars, and shadows nonexistent. It’s flat design land. That works well because video thumbnails, cover art, and platform branding already bring heavy visual weight — adding dropshadows would clutter it.

Audience-wise, the vibe says: content-first, tech-conscious, low-friction interface. They're building for viewers who want to navigate quickly, find their show or live stream, and start watching. No fluff.

2. Color System

2.1 Primary Colors

The primary color is #40c1ad — a medium turquoise leaning teal. Psychologically, teal occupies the space between calm blues and energetic greens. In UX, it's often used to represent trust, creativity, and renewal. For streaming, it feels approachable and fresh.

It's a safe choice compared to Netflix's aggressive red or Disney+'s deep royal blue. It positions Rainberrytv in a calmer, less "brand-as-entertainment-empire" space, maybe appealing to niche or indie content fans.

Supporting this is a subtle off-white (#f1fcf9), which makes turquoise pop without blinding the user. There’s also an action blue (#005fcc) and a cool neutral gray (#9ca3af). You can almost feel the palette — light backgrounds, teal action buttons, occasional blue highlights, with gray used gently on subdued UI elements.

2.2 Complete Palette

2.3 Color Relationships

Contrast: Teal on off-white is high enough for accessibility, easily meeting WCAG AA. The #005fcc blue is darker and stronger — perfect for hover/focus outlines. Gray and off-white are low contrast — you wouldn’t put gray text on off-white for body text, but it’s fine for captions or secondary info.

No explicit dark mode detected. They are running a flat, light mode scheme. A dark mode would require swapping backgrounds to deep navy and adjusting teal to a brighter shade (#5ddbbf territory) for sufficient contrast.

2.4 Usage Guide

Works well:

• Teal buttons on off-white background.
• White text (#ffffff) on teal or action blue buttons.
• Gray for non-essential text where hierarchy matters.

Avoid:

• Teal text on teal background (obvious).
• Gray on teal — contrast will drop below WCAG minimum.
• Mixing teal and blue in the same primary action — confuse interaction cues.

3. Typography

3.1 Font Families

Constant: "Open Sans", ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji.

Source: No Google Fonts load detected in data, but likely self-hosted given stack. No Adobe Fonts.

It’s a safe web font. Humanist, clean, legible at small sizes.

3.2 Type Scale

3.3 Hierarchy

Rainberrytv’s type hierarchy is compact. The top-level heading jumps straight to 48px, skipping intermediate big sizes. Multiple Heading-1 contexts at 48px and 30px show they don't bother with strict H1/H2 semantics in style naming — it’s more about visual role.

The link style scaling is odd — links can be 48px large (likely hero banner CTAs) or as small as 16px (menu links). The consistent 400 weight across headings and body keeps the brand light. The lone 200 weight caption creates a nice “whisper” for secondary info.

Readability is solid: generous line heights for small text ensure no crowding.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px scaling present but with 4px increments for micro-alignment.

Extracted values:

• 4px — micro-spacers, icon padding (476 occurrences)
• 8px — small gaps (34 occurrences)
• 12px — tight component padding (189 occurrences)
• 20px — standard body spacing (22 occurrences)
• 40px — large gaps (20 occurrences)
• 74px — section rhythm spacing (huge count, 238 occurrences)
• 100px — rare, special-case large offset (1 occurrence)

This is a very clear “small-large” rhythm: small increments for UI, massive 74px chunks for vertical margin in layouts — probably between hero and content blocks.

4.2 Layout

Breakpoints:

• 640px
• 768px
• 1024px
• 1280px

These match Tailwind defaults — easy to map to sm/md/lg/xl classes.

Responsive approach is definitely mobile-first — utility-first classes, stacking content that grows into grids at md: and lg: breakpoints.

5. Visual Elements

Border Radius

All border radii data: one extreme value — 9999px (full pill/circle). This is applied selectively (span elements), likely user avatar or label pills.

No 4px/8px radii in found data — implies default square corners for most UI elements.

Shadow System

No shadows recorded. This confirms a flat design approach.

Borders

border: 0px solid rgb(229, 231, 235) appears in button defaults, but not meaningful visually — it's a reset.

6. Components

6.1 Buttons

Default primary button state from data:

• Background: rgba(0,0,0,0.5) (semi-transparent black)
• Text color: #ffffff
• Padding: 12px
• Border radius: 0px
• Border: none (0px solid #e5e7eb)
• Box-shadow: none
• Outline: none (color set but not active)
• Transform: none
• Opacity: 0 — interesting, possibly hidden until a condition triggers it.

No hover/active/focus styles in extracted dataset, which either means they're handled dynamically in Tailwind or via inline classes.

Font size: 16px, weight: 400.

The transparent background and zero opacity suggest overlay buttons on videos that fade in/out.

6.2 Links

Default link state:

• Color: #ffffff
• Decoration: none
• Weight: 400

Hover: Data shows no change — again likely handled via Tailwind.

Large hero links go up to 48px font size.

6.3 Forms

No inputs detected — either forms are minimal or handled externally.

6.4 Cards

No explicit card component info in dataset — background colors suggest off-white #f1fcf9 for surfaces.

7. Design Tokens

/* Colors */
:root {
  --color-soft-off-white: #f1fcf9;
  --color-teal-primary: #40c1ad;
  --color-action-blue: #005fcc;
  --color-neutral-gray: #9ca3af;
  --color-white: #ffffff;
  --color-black-transparent-50: rgba(0, 0, 0, 0.5);
}

/* Typography */
:root {
  --font-family-base: "Open Sans", ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --font-size-h1-lg: 48px;
  --font-size-h1-md: 30px;
  --font-size-body: 16px;
  --font-size-link-lg: 48px;
  --font-size-link-md: 24px;
  --font-size-link-sm: 16px;
  --font-size-caption-lg: 14px;
  --font-size-caption-sm: 12px;
  --font-weight-normal: 400;
  --font-weight-light: 200;
  --line-height-h1-lg: 1.25;
  --line-height-h1-md: 1.20;
  --line-height-body: 1.50;
  --line-height-link-lg: 1.00;
  --line-height-link-md: 1.33;
  --line-height-caption-lg: 1.43;
  --line-height-caption-sm: 1.33;
}

/* Spacing */
:root {
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-20: 20px;
  --space-40: 40px;
  --space-74: 74px;
  --space-100: 100px;
}

/* Border Radius */
:root {
  --radius-full: 9999px;
}

/* Shadows */
:root {
  --shadow-none: none;
}

8. AI Coding Assistant Prompt

# Rainberrytv Design System Specification

You are a Rainberrytv design expert. Build UIs matching their visual language exactly.

## Brand Context
Rainberrytv is a video streaming platform with a content-first design approach. It uses a restrained, cool-toned palette, flat design without shadows, and clean Open Sans typography. Layouts follow Tailwind's mobile-first breakpoints, with disciplined spacing.

## Color Palette
- Soft Off-White: #f1fcf9 — Backgrounds, surfaces
- Teal Primary: #40c1ad — CTAs, brand elements, primary buttons
- Action Blue: #005fcc — Hover/focus states, interactive highlights
- Neutral Gray: #9ca3af — Secondary text, captions, dividers
- White: #ffffff — Text on dark/colored buttons
- Black Transparent 50%: rgba(0, 0, 0, 0.5) — Overlay buttons

## Typography
Font Family: "Open Sans", ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

| Element        | Size | Weight | Line Height | Use For                |
|----------------|------|--------|-------------|------------------------|
| Heading-1 LG   | 48px | 400    | 1.25        | Hero titles            |
| Link LG        | 48px | 400    | 1.00        | Hero CTAs               |
| Heading-1 MD   | 30px | 400    | 1.20        | Section headings        |
| Link MD        | 24px | 400    | 1.33        | Nav links               |
| Heading-1 SM   | 16px | 400    | 1.50        | Small headings          |
| Body/Buttons   | 16px | 400    | 1.50        | Paragraphs, buttons     |
| Link SM        | 16px | 400    | 1.50        | Menu links              |
| Caption LG     | 14px | 200    | 1.43        | Secondary info          |
| Caption SM     | 12px | 400    | 1.33        | Micro-labels            |

## Spacing & Grid
Base: 8px, with micro 4px increment.

Scale:
- xs: 4px — icon spacing
- sm: 8px — tight gaps
- md: 12px — button padding, compact layouts
- lg: 20px — standard section gaps
- xl: 40px — large layout spacing
- section: 74px — vertical rhythm between blocks
- xxl: 100px — rare large offsets

## Border Radius
- none: 0px — default element corners
- full: 9999px — pills, avatars

## Shadows & Depth
Flat design—no shadows. Use color and spacing for depth.

## Components

### Primary Button
Default:
```css
.btn-primary {
  background: rgba(0,0,0,0.5);
  color: #ffffff;
  padding: 12px;
  border-radius: 0px;
  font-weight: 400;
  font-size: 16px;
  border: 0px solid #e5e7eb;
  box-shadow: none;
  opacity: 0;
}
```
Hover/Focus/Active handled via Tailwind state classes with action blue (#005fcc).

### Link
```css
.link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 400;
}
```
Hover via Tailwind (usually underline or color shift to action blue).

### Inputs
No data — follow flat style, radius 0px, border #e5e7eb, focus with #005fcc.

### Card
Background: #f1fcf9  
Padding: multiples of 20px or 40px  
No shadow, radius 0px

## Layout & Responsive Rules
Max content width defined by Tailwind container classes.  
Page padding matches spacing scale (8px mobile, increasing).  
Breakpoints: 640px, 768px, 1024px, 1280px.

## Interaction Rules
Transition timing: 150ms ease for state changes  
Focus: outline in action blue  
Disable: 50% opacity

## DO
- Use only defined palette colors
- Maintain 4px/8px multiples for spacing
- Keep corners either square or full pill
- Use Open Sans for all text
- Respect breakpoints for responsive design
- Keep UI flat — no dropshadows

## DON'T
- Introduce new colors
- Mix radii styles
- Add shadows
- Use arbitrary fonts

## Code Examples

Primary Button in Tailwind:
```html
<button class="bg-black/50 text-white px-3 py-2 rounded-none text-base font-normal opacity-0 hover:bg-[#005fcc] transition ease-in-out duration-150">
  Play Now
</button>
```

Card in Tailwind:
```html
<div class="bg-[#f1fcf9] p-10 rounded-none">
  <h2 class="text-2xl font-normal">Featured</h2>
</div>
```

Link in Tailwind:
```html
<a href="#" class="text-white no-underline hover:text-[#005fcc]">Browse</a>
```

9. Summary

TL;DR — Rainberrytv dials down the UI noise to put video content up front. Cool teal accents, Open Sans everywhere, flat squares or perfect pills, big spacing chunks keep the layout airy. Utility-first Tailwind means developers can reproduce this fast and accurately.

Brand Keywords — calm-streaming, teal-forward, flat-minimalist, utility-driven, content-first