ODOO4projects.com/DESIGN.md

name, description, colors, typography, rounded, spacing, components

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