Home Design System

Design System

The complete visual language for Beco Interiors — colors, typography, spacing, components, and principles.

Colors Typography Buttons Components Spacing Navigation Voice
01 — Color Palette
Primary — Beco Red (never overuse — command through restraint)
Beco Red ★
#C8281E
Red Dark
#9E1F17
Red Mid
#E03A30
Red Tint
#F7EAEA
Warm Neutrals — carry most of the page weight
Obsidian
#111111
Charcoal
#1E1E1E
Smoke
#4A4540
Stone
#8A8078
Linen
#E6DDD4
Cream
#F2EDE6
Warm White
#FAF7F5
Accents & Functional
Gold
#C4972A
WhatsApp
#25D366
Success
#16A34A
Error
#DC2626
02 — Typography
Cormorant Garamond — Display · Hero Headlines · Section Titles
Premium Surfaces Defined
Section Heading — 36px / Weight 400
Italic accent phrase — sub-heading / 22px
font-family: 'Cormorant Garamond', Georgia, serif
DM Sans — Interface · Body Copy · Navigation · Buttons
UI Heading — DM Sans 500 / 18px

Body Regular — Beco Interiors supplies premium building and interior design materials for architects, designers, and contractors in Nairobi. Every product is in stock, every order gets a personal response.

Eyebrow Label / 10.5px SKU: ML19-GOLD · ST-CAL-120 Caption / Muted
font-family: 'DM Sans', system-ui, sans-serif
03 — Buttons
On light backgrounds
On dark backgrounds
Spec: DM Sans · 11.5px / 600 · 1.5px letter-spacing · ALL CAPS · 2px border-radius · 14px 28px padding · 22ms transition
04 — Components
Eyebrow Pattern — used above every major heading
On Light Background
Section Title Here
On Dark Background
Dark Section Title
Feature Cards — light and dark variants
Light Feature Card
White background with subtle border. Hover reveals red border + light red tint. Used on light/cream sections.
Dark Feature Card
Transparent with light white border. Hover reveals red border + subtle red tint. Used on dark sections.
Red Tint Variant
Stat highlight or featured info badge
Contact Card
Fastest Channel
WhatsApp
+254 722 333 730

Short description of the contact channel and when to use it.

05 — Spacing System
8px base unit — all spacing is a multiple of 8
4
8
12
16
24
32
48
64
88 ← section
Section Padding
88px top & bottom desktop, 64px tablet, 52px mobile.
Card Padding
24–40px internal padding. Cards use 4px border-radius consistently.
Grid Gap
18–24px gaps on product grids. 64–80px gap on split 2-col layouts.
07 — Voice & Tone
 Write Like This
  • Confident and premium — without sounding inflated
  • Specific: say KSh 850 not "affordable"; say 2 hours not "fast"
  • CTA verbs go to the destination: "Shop Lighting →" not "Click here"
  • Warm and Kenyan in the About and Contact pages
 Avoid This
  • Generic filler: "world-class", "cutting-edge", "transformative"
  • Weak CTAs: "Click here", "Learn more" (without context)
  • Overcrowded headings — one strong idea per heading
  • Placeholder pages and dead nav links (rebuild trust)