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

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

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