ODOO4projects.com/DESIGN.md

---
name: ODOO4projects
description: Managed Odoo hosting — the Global Workbench. Warm plum and sand, enterprise-grade but approachable.
colors:
  plum-velvet: "#714b67"
  deep-plum: "#65435c"
  warm-sand: "#f0cda8"
  ink-cocoa: "#1b1319"
  warm-paper: "#f6f5f4"
  parchment: "#e5e3e0"
  white: "#ffffff"
typography:
  display:
    fontFamily: "'Inter Tight', 'Inter', sans-serif"
    fontSize: "clamp(2rem, 4.5vw, 3.2rem)"
    fontWeight: 800
    lineHeight: 1.15
  headline:
    fontFamily: "'Inter Tight', 'Inter', sans-serif"
    fontSize: "clamp(1.8rem, 3.2vw, 2.8rem)"
    fontWeight: 600
    lineHeight: 1.25
  title:
    fontFamily: "'Inter Tight', 'Inter', sans-serif"
    fontSize: "clamp(1.1rem, 2vw, 1.4rem)"
    fontWeight: 600
    lineHeight: 1.25
  body:
    fontFamily: "Inter, 'Segoe UI', sans-serif"
    fontSize: "1rem"
    fontWeight: 400
    lineHeight: 1.6
  label:
    fontFamily: "'Inter Tight', 'Inter', sans-serif"
    fontSize: "0.82rem"
    fontWeight: 500
    letterSpacing: "0.04em"
rounded:
  sm: "0.5rem"
  md: "0.6rem"
  lg: "1rem"
  pill: "2rem"
spacing:
  xs: "0.25rem"
  sm: "0.5rem"
  md: "1rem"
  lg: "1.5rem"
  xl: "2rem"
components:
  button-primary:
    backgroundColor: "{colors.plum-velvet}"
    textColor: "{colors.white}"
    rounded: "{rounded.sm}"
    padding: "0.6rem 1.5rem"
  button-primary-hover:
    backgroundColor: "{colors.deep-plum}"
    textColor: "{colors.white}"
    rounded: "{rounded.sm}"
    padding: "0.6rem 1.5rem"
  button-hero:
    backgroundColor: "{colors.warm-sand}"
    textColor: "{colors.ink-cocoa}"
    rounded: "{rounded.sm}"
    padding: "0.85rem 2.5rem"
  button-outline:
    textColor: "{colors.deep-plum}"
    rounded: "{rounded.sm}"
    padding: "0.6rem 1.5rem"
  card-pricing:
    backgroundColor: "{colors.white}"
    rounded: "{rounded.lg}"
    padding: "1.25rem"
  tab-active:
    textColor: "{colors.plum-velvet}"
    rounded: "{rounded.md}"
    padding: "0.6rem 1rem"
  input:
    backgroundColor: "{colors.white}"
    rounded: "{rounded.sm}"
    padding: "0.75rem 1rem"
---

# Design System: ODOO4projects

**Creative North Star: "The Global Workbench"**

## Overview

ODOO4projects is a managed Odoo hosting brand built on a warm, quietly premium plum-and-sand palette. The system's personality is "warm, trustworthy, quietly premium — infrastructure that feels approachable and dependable" for business owners who are not sysadmins. The North Star — *The Global Workbench* — names the promise: tools are pre-configured, the bench is set up, and the work is ready to start anywhere in the world. Six global data regions are a literal fact of the product and the visual system leans into that reach.

The interface is light by default: Warm Paper surfaces on white, Ink Cocoa text, with Plum Velvet as the single strong accent and Warm Sand as its warm counterpoint. Density is relaxed — generous section padding, centered constrained containers (80% width, max 1300px) — and the tone is conversational, not technical. Components are tactile and confident: rounded corners, solid buttons, immediate hover feedback, small upward lifts. Depth is currently subtle (flat at rest, gentle lift on interaction) and is slated to deepen.

The homepage is a single long persuasion surface: hero → trust bar → features → mission tabs → how-it-works → pricing → blog → footer. Tabs and pricing cards carry the interactive weight; everything else is rhythm.

**Key Characteristics:**
- Light, warm surfaces with one strong plum accent and a peach counterpoint
- Generous, centered layout with clear vertical rhythm
- Tactile, confident components with rounded corners (0.5–1rem)
- Subtle interaction-driven elevation — flat at rest, lift on hover
- Inter Tight for display/headings, Inter for body
- No emojis, no gradients-as-decoration, no dark surfaces in the brand system (legacy dark blog theme is being phased out)

## Colors

The palette is warm through and through — every neutral carries a whisper of plum or sand. Plum Velvet does the brand's talking; Warm Sand does the welcoming; Warm Paper and Parchment do the quiet work.

### Primary
- **Plum Velvet** (#714b67): The brand accent. Primary buttons, active tabs, featured plan border, footer social hover, link color context. Used sparingly — as fills on buttons and edges on active states, never as a wash across large areas.
- **Deep Plum** (#65435c): Hover/darker variant of the accent. Primary button hover, outline button text and border.

### Secondary
- **Warm Sand** (#f0cda8): The welcoming counterpoint. Hero primary CTA background with Ink Cocoa text, the "hr" divider gradient, hero headline accent span. Reads as warm light, not cautionary yellow.

### Neutral
- **Warm Paper** (#f6f5f4): Section backgrounds (trust bar, how-it-works, pricing, light blog override). One step off pure white.
- **Parchment** (#e5e3e0): Borders, dividers, card edges, toggle-switch off state.
- **Ink Cocoa** (#1b1319): Text on light surfaces, footer background, hero gradient base, headline color, price figures.
- **White** (#ffffff): Main page background, card backgrounds, text on Plum Velvet buttons.

### Named Rules
**The Warmth Rule.** Every neutral must land warm — plum-tinted grays, never cold blue-grays. When choosing a gray, err toward the sand side.

**The One-Accent Rule.** Plum Velvet is the only full-strength accent. Green (#28a745) is reserved exclusively for functional success states (checkmarks, savings labels); it never competes as a brand color.

## Typography

**Display Font:** Inter Tight (fallback Inter, sans-serif)
**Body Font:** Inter (fallback Segoe UI, sans-serif)

**Character:** A quiet Swiss pairing — Inter Tight carries headings with slightly condensed confidence; Inter carries body copy with neutral legibility. The hierarchy leans on weight and size contrast rather than color.

### Hierarchy
- **Display** (800, clamp(2rem, 4.5vw, 3.2rem), 1.15): Hero H1 only (e.g. "Deploy Odoo in 5 Minutes — Fully Managed Hosting"). Accent span in Warm Sand.
- **Headline** (600, clamp(1.8rem, 3.2vw, 2.8rem), 1.25): Section H2s ("Your Plan, Your Timing: Upgrade Anytime", "Latest from the Blog").
- **Title** (600, clamp(1.1rem, 2vw, 1.4rem), 1.25): Card H3s, tab names, plan names.
- **Body** (400, 1rem, 1.6): Paragraph text; line lengths held to ~580–680px in hero and section intro blocks.
- **Label** (500, 0.82rem, 0.04em): Meta text — plan features, small-print, tab subtitles, footer links. The trust-bar kicker ("Trusted by businesses worldwide") is uppercase at 0.75rem with 0.08em tracking.

### Named Rules
**The Small-Print Silence Rule.** Label text is always one or two steps quieter in color (55–70% opacity of its surface's text color) so it never raises its voice over headline content.

## Layout

A single centered column system: `.container` at 80% width, max 1300px, with 20px side padding. Sections stack in full-bleed bands that alternate Warm Paper and White to create rhythm without borders.

- **Hero:** full-bleed dark band (Ink Cocoa gradient 135deg #1b1319 → #2a1a26 → #3d2235) with a faint country-map image at 8% opacity, content left-aligned, max 720px headline width.
- **Trust bar:** Warm Paper strip, centered kicker, seamless looping partner logo carousel (40s linear, pause on hover).
- **Feature strip:** auto-fit grid, min 220px columns.
- **Mission tabs:** 220px fixed left rail + fluid content; below 992px the rail becomes a horizontal scrollable tab row with a bottom border indicator.
- **How-it-works:** 3-step centered grid (max 800px), numbered circles.
- **Pricing:** 4-column grid → 2 → 1 at 992px / 576px; featured card gets a Plum Velvet border and a "Most Popular" pill.
- **Blog:** 3-column card grid → 2 → 1 at 992px / 576px.
- **Footer:** Ink Cocoa band; 3 columns (1.5fr 3fr 3.5fr) collapsing to 1 column at 992px.

**Spacing rhythm:** sections breathe at 2–3rem vertical padding; cards use 1.25rem internal padding; grids gap at 1–1.5rem (features 1.5rem, pricing 1rem, blog 1.25rem).

## Elevation & Depth

The system is **flat at rest with interaction-driven lift**. Cards at rest carry only a whisper of shadow (0 1px 3px rgba(0,0,0,0.06)) or none; on hover they rise — translateY(-2px to -3px) with a soft shadow (0 4px 16px rgba(0,0,0,0.08)). Buttons lift 1–2px on hover. The hero band is the exception: it is the one physically "deep" surface, built from color gradient and imagery rather than shadow.

**Forward direction (user-confirmed):** depth is currently conservative and is intended to *increase*. Future work should add more pronounced elevation, layered surfaces, or subtle depth cues without abandoning the flat-at-rest principle.

### Shadow Vocabulary
- **Card rest** (`0 1px 3px rgba(0,0,0,0.06)`): baseline pricing cards.
- **Card hover** (`0 4px 16px rgba(0,0,0,0.08)`): interactive cards on hover, paired with translateY(-2px/-3px).
- **Toggle thumb** (`0 1px 3px rgba(0,0,0,0.15)`): the billing toggle's sliding thumb.

### Named Rules
**The Flat-By-Default Rule.** Surfaces are flat at rest. Shadow and lift appear only as a response to hover, focus, or active state — never as permanent decoration.

## Shapes

The form language is soft and approachable: everything rounds off, nothing is sharp enough to feel technical. Radius scales in three steps plus pill: **sm** 0.5rem (8px) for buttons and inputs, **md** 0.6rem (~10px) for tabs and badges, **lg** 1rem (16px) for pricing cards and feature items, and **pill** 2rem for "Most Popular" badges, promo tags, the hero "How It Works" ghost button, and large buttons (.btn-lg). Circles handle the small geometry: numbered how-to steps (2.5rem), social icons (2.5rem), carousel dots (8px), toggle thumbs (20px).

Borders are 1px Parchment for cards and inputs; the featured pricing card doubles to 2px Plum Velvet. Active tabs mark themselves with a 3px Plum Velvet bar — left edge on desktop, bottom edge below 992px.

## Components

### Buttons
- **Shape:** rounded sm (0.5rem), full-width within pricing cards and on mobile hero, inline otherwise.
- **Primary:** Plum Velvet fill, white text, 0.6rem 1.5rem padding. Hover: Deep Plum fill, translateY(-1px). Transition: all 0.2s.
- **Hero:** Warm Sand fill, Ink Cocoa text, 0.85rem 2.5rem, weight 700 Inter Tight. Hover: opacity 0.9, translateY(-2px).
- **Outline:** Deep Plum border and text on transparent. Hover: Deep Plum fill, white text. Used for "Contact Us" (Empire plan) and hero secondary.
- **Large:** .btn-lg — pill radius (2rem), 0.75rem 2rem padding.

### Cards / Containers
- **Corner Style:** rounded lg (1rem); feature items 1rem; blog cards 0.6rem.
- **Background:** white on light sections; #fff overrides in the home blog section; blog post pages use the legacy dark card (#12121c) pending the brand-wide phase-out of the dark theme.
- **Shadow Strategy:** flat at rest, hover lift per Elevation & Depth.
- **Border:** 1px Parchment.
- **Internal Padding:** 1.25rem (pricing, blog); feature items 1.5rem 1rem.

### Inputs / Fields
- **Style:** white fill, 1px Parchment border, rounded sm (0.5rem), 0.75rem 1rem padding, Inter.
- **Focus:** Plum Velvet border + a soft 2px ring rgba(113,75,103,0.15).
- **Footer variant:** translucent fill rgba(255,255,255,0.08) with a lighter border — form inputs on the Ink Cocoa footer.

### Navigation
- **Tabs (desktop):** 220px left rail; tab = label + small subtitle, left-aligned, rounded md; active = Plum Velvet 3px left bar + soft plum-tinted gradient fill (rgba 0.08→0.03) + Plum Velvet text at 600.
- **Tabs (mobile, <992px):** horizontal scroll row; active bar moves to the bottom edge; subtitles hidden.
- **Footer navigation:** Ink Cocoa band, white headings, links at 65% white, hover to full white.

### Billing Toggle
- 48 × 26px pill track; off = Parchment, on = Plum Velvet; 20px white thumb with soft shadow slides left 3px → right 25px over 0.25s.

### Blog Card
- rounded md (0.6rem), white fill, 1.25rem padding, area badge pill (violet/sky/amber/cyan legacy palette — being replaced by plum-family in the brand system), date at 45% opacity, headline in Ink Cocoa, teaser at 60% opacity, "Read more →" in Plum Velvet. Hover: translateY(-2px), border to Plum Velvet, soft plum glow.

## Do's and Don'ts

### Do:
- **Do** lead with Plum Velvet for any single accent moment — the button, the active tab, the featured border.
- **Do** keep all neutrals warm; any gray on the page should read as plum-tinted or sand-tinted, not blue.
- **Do** use warm, client-focused copy with short sentences and bullets; no tech jargon, no emojis.
- **Do** keep section containers centered at 80% / max 1300px and let sections breathe at 2–3rem padding.
- **Do** give interactive elements an immediate hover response — a lift, a fill change, or a border shift within 0.2s.
- **Do** use the pill for badges and the lg radius for cards; consistency of the radius ladder is what makes the system feel composed.

### Don't:
- **Don't** use the legacy dark/cyan blog theme (#08080c background, #00f5ff cyan accents) — it is an older style being phased out; the brand is the plum/peach light system only.
- **Don't** paint large areas Plum Velvet; it is an accent, not a surface.
- **Don't** introduce additional accent colors; green belongs to success states only.
- **Don't** use sharp rectangular corners (0 radius) on interactive elements.
- **Don't** decorate with gradients other than the established hero band and the primary→secondary "hr" divider.
- **Don't** add permanent shadows to resting surfaces; depth responds to interaction.