# mubien.com — Design System

## 1. Visual Theme & Atmosphere

Mubien.com presents a **clean, corporate-professional** aesthetic anchored by a distinctive teal-blue heading color (#226d7a) against a white canvas. The typographic choices are pragmatic and accessible — Roboto for impact headings, Open Sans for readable body copy — a combination that signals reliability over stylistic ambition. The only non-white surface is a pale teal section (`rgb(176, 224, 233)`) that creates a gentle, approachable zone without overwhelming. The design communicates: professional, accessible, trustworthy.

## 2. Color Palette & Roles

| Role | Value | Usage |
|------|-------|-------|
| Page Background | white | Canvas |
| H1 / Accent | `#226d7a` | Primary headings, brand color |
| Section Surface | `rgb(176, 224, 233)` | Pale teal highlight sections |
| Body Text | `#000000` | Primary prose |

The palette is minimal by necessity: two teal values (one dark, one pale) against white. No secondary accent, no warm tones.

## 3. Typography Rules

- **Heading font**: Roboto — weight 700, 36px / 46px — bold and assertive for main titles
- **Body font**: Open Sans — weight 400, 20px / 28px — generous size for accessibility and clarity
- **Fallback**: Times listed as body font-family fallback — an unusual choice suggesting legacy or CMS constraints
- **No transforms** — natural sentence and title case throughout
- **No custom letter-spacing** — fonts at optical defaults

| Level | Font | Size | Weight | Line Height |
|-------|------|------|--------|-------------|
| H1 | Roboto | 36px | 700 | 46px |
| Body / P | Open Sans | 20px | 400 | 28px |

## 4. Component Stylings

- **Headings**: Teal (#226d7a) color — the most distinctive branded element
- **Sections**: Pale teal surfaces (`rgb(176,224,233)`) for callout areas
- **Buttons**: Not heavily tokenized — likely inherit teal or standard system defaults
- **No border radius tokens** — possibly using browser defaults or inline styles
- **No shadows** — completely flat visual system

## 5. Layout Principles

- **Single breakpoint**: 767px — simple binary mobile/desktop split
- **Body font at 20px**: Suggests large, accessible reading columns
- **Content-first**: No elaborate grid system; content drives layout
- **Generous line height**: 28px / 20px body text = 1.4x — comfortable reading

## 6. Depth & Elevation

- No shadows detected
- Flat system — depth through background color zones only
- Pale teal sections create visual separation without borders or shadows

## 7. Do's and Don'ts

**Do:**
- Use teal (#226d7a) for headings and primary branded elements
- Keep body text at 20px for accessibility-first legibility
- Use pale teal surfaces for callout sections
- Maintain the simple two-color (teal/white) discipline

**Don't:**
- Introduce competing accent colors
- Reduce body font size below 18px — the large size is a deliberate accessibility choice
- Add drop shadows — the flat aesthetic is consistent throughout

## 8. Responsive Behavior

- Single breakpoint at 767px: mobile / desktop
- Content stacks to single column on mobile
- Heading sizes may reduce at mobile widths

## 9. Agent Prompt Guide

> "Design in the style of mubien.com: white background, teal `#226d7a` for headings, pale teal `rgb(176,224,233)` for section highlights, Roboto bold headings, Open Sans large body text at 20px, flat no-shadow system, simple single-breakpoint responsive layout."

**Quick reference:**
- Background: white
- Accent: `#226d7a` (teal)
- Section tint: `rgb(176, 224, 233)`
- Heading font: Roboto, 700
- Body font: Open Sans, 400, 20px

*Generated by Sparkbites — extracted from live CSS analysis*