{ "schemaVersion": 2, "generatedAt": "2026-08-15T09:01:14Z", "title": "Design System: ODOO4projects", "extensions": { "colorMeta": { "plum-velvet": { "role": "primary", "displayName": "Plum Velvet", "canonical": "#714b67", "tonalRamp": ["#3b2b37","#402639","#46203c","#4c1a3f","#521442","#580e44","#5e0847","#63034a"] }, "deep-plum": { "role": "primary", "displayName": "Deep Plum", "canonical": "#65435c", "tonalRamp": ["#3b2b37","#402639","#46203c","#4c1a3f","#521442","#580e44","#5e0847","#63034a"] }, "warm-sand": { "role": "secondary", "displayName": "Warm Sand", "canonical": "#f0cda8", "tonalRamp": ["#c0b5aa","#c8b6a2","#d1b699","#d9b691","#e2b788","#eab780","#f3b777","#fbb76f"] }, "ink-cocoa": { "role": "neutral", "displayName": "Ink Cocoa", "canonical": "#1b1319", "tonalRamp": ["#32252f","#372031","#3c1b34","#411636","#461139","#4b0c3b","#50073e","#550240"] }, "warm-paper": { "role": "neutral", "displayName": "Warm Paper", "canonical": "#f6f5f4", "tonalRamp": ["#acaaa9","#bab7b5","#c8c4c1","#d5d1ce","#e3dfdb","#f1ece7","#f8f3ef","#fefaf5"] }, "parchment": { "role": "neutral", "displayName": "Parchment", "canonical": "#e5e3e0", "tonalRamp": ["#9e9c9a","#acaaa7","#bab8b5","#c9c6c2","#d7d4d0","#e5e2de","#f4f0eb","#fefaf6"] } }, "typographyMeta": { "display": { "displayName": "Display", "purpose": "Hero H1 only. Inter Tight 800, clamp(2rem, 4.5vw, 3.2rem), 1.15 line-height." }, "headline": { "displayName": "Headline", "purpose": "Section H2s. Inter Tight 600, clamp(1.8rem, 3.2vw, 2.8rem), 1.25 line-height." }, "title": { "displayName": "Title", "purpose": "Card H3s, plan names, tab headers. Inter Tight 600, clamp(1.1rem, 2vw, 1.4rem), 1.25." }, "body": { "displayName": "Body", "purpose": "Paragraph text. Inter 400, 1rem, 1.6 line-height. Max ~580-680ch in prose." }, "label": { "displayName": "Label", "purpose": "Meta text, plan features, small-print, tab subtitles. Inter Tight 500, 0.82rem, 0.04em letter-spacing." } }, "shadows": [ { "name": "card-rest", "value": "0 1px 3px rgba(0,0,0,0.06)", "purpose": "Baseline pricing card shadow at rest." }, { "name": "card-hover", "value": "0 4px 16px rgba(0,0,0,0.08)", "purpose": "Interactive card hover, paired with translateY(-2px/-3px)." }, { "name": "toggle-thumb", "value": "0 1px 3px rgba(0,0,0,0.15)", "purpose": "Billing toggle thumb shadow." }, { "name": "blog-hover", "value": "0 4px 20px rgba(113,75,103,0.08)", "purpose": "Blog card hover on the light theme variant (homepage)." } ], "motion": [ { "name": "state-transition", "value": "all 0.2s", "purpose": "Default easing for state transitions (hover, focus, active)." }, { "name": "partner-scroll", "value": "40s linear infinite", "purpose": "Seamless partner logo carousel animation." }, { "name": "spinner", "value": "0.8s linear infinite", "purpose": "Loading spinner rotation." }, { "name": "toggle", "value": "left 0.25s, background 0.25s", "purpose": "Billing toggle switch animation." } ], "breakpoints": [ { "name": "lg", "value": "992px" }, { "name": "md", "value": "768px" }, { "name": "sm", "value": "576px" } ] }, "components": [ { "name": "Primary Button", "kind": "button", "refersTo": "button-primary", "description": "Primary call-to-action on light surfaces. Use once per section.", "html": "", "css": ".ds-btn-primary{display:inline-block;padding:0.6rem 1.5rem;font-family:'Inter Tight','Inter',sans-serif;font-size:0.9rem;font-weight:500;background:#714b67;color:#fff;border:1px solid #714b67;border-radius:0.5rem;cursor:pointer;text-decoration:none;transition:all 0.2s}.ds-btn-primary:hover{background:#65435c;border-color:#65435c;transform:translateY(-1px)}" }, { "name": "Hero Button", "kind": "button", "refersTo": "button-hero", "description": "Primary call-to-action inside the dark hero band. Warm Sand on Ink Cocoa.", "html": "Deploy in 5 Minutes", "css": ".ds-btn-hero{display:inline-block;padding:0.85rem 2.5rem;background:#f0cda8;color:#1b1319;border-radius:0.5rem;font-family:'Inter Tight','Inter',sans-serif;font-size:1rem;font-weight:700;text-decoration:none;transition:opacity 0.2s,transform 0.2s}.ds-btn-hero:hover{opacity:0.9;transform:translateY(-2px)}" }, { "name": "Outline Button", "kind": "button", "refersTo": "button-outline", "description": "Secondary/ghost action. Deep Plum border.", "html": "", "css": ".ds-btn-outline{display:inline-block;padding:0.85rem 1.5rem;background:transparent;color:#65435c;border:1px solid #65435c;border-radius:0.5rem;font-family:'Inter Tight','Inter',sans-serif;font-size:0.9rem;text-decoration:none;transition:all 0.2s;cursor:pointer}.ds-btn-outline:hover{background:#65435c;color:#fff}" }, { "name": "Pricing Card", "kind": "card", "refersTo": "card-pricing", "description": "Pricing plan card. Featured variant adds Plum Velvet border + Most Popular pill.", "html": "
Most Popular

On the Rise

$36.25 /month

I need some modules and professional reports

", "css": ".ds-card-pricing{background:#fff;border:1px solid #e5e3e0;border-radius:1rem;overflow:hidden;display:flex;flex-direction:column;transition:all 0.3s;box-shadow:0 1px 3px rgba(0,0,0,0.06)}.ds-card-pricing.featured{border:2px solid #714b67;position:relative}.ds-card-pricing:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08);transform:translateY(-3px)}.ds-card-badge{position:absolute;top:0.75rem;right:0.75rem;background:#714b67;color:#fff;padding:0.2rem 0.6rem;border-radius:2rem;font-size:0.6rem;font-weight:600}.ds-card-pricing h3{font-family:'Inter Tight',sans-serif;font-size:1.1rem;font-weight:700;margin:0 0 0.5rem}.ds-card-price{margin:0.5rem 0}.ds-card-price strong{font-size:clamp(1.28rem,2vw,1.92rem);color:#1b1319}.ds-card-price small{color:rgba(33,37,41,0.55);font-size:0.82rem}.ds-card-desc{font-size:0.82rem;color:rgba(33,37,41,0.6);font-style:italic;min-height:3rem}.ds-card-pricing ul{list-style:none;padding:0;margin:0;flex-grow:1}.ds-card-pricing li{padding:0.4rem 0;font-size:0.82rem;border-bottom:1px solid rgba(0,0,0,0.05);display:flex;align-items:center;gap:0.4rem}.ds-card-pricing .ds-btn-primary{margin-top:0.75rem}" }, { "name": "Search Input", "kind": "input", "refersTo": "input", "description": "Blog search / general text input on light surfaces.", "html": "
", "css": ".ds-input{width:100%;padding:0.75rem 1rem 0.75rem 2.5rem;font-size:0.85rem;font-family:Inter,sans-serif;background:#fff;border:1px solid #e5e3e0;border-radius:0.5rem;color:#212529;outline:none;transition:border-color 0.2s;box-sizing:border-box}.ds-input:focus{border-color:#714b67;box-shadow:0 0 0 2px rgba(113,75,103,0.15)}.ds-input::placeholder{color:rgba(33,37,41,0.35)}" }, { "name": "Navigation Tab (Active)", "kind": "nav", "refersTo": "tab-active", "description": "Mission tab navigation — vertical rail on desktop, horizontal scroll on mobile.", "html": "", "css": ".ds-tab{display:block;padding:0.6rem 1rem;color:#212529;border-radius:0.6rem;border:none;background:none;width:100%;text-align:left;font-family:'Inter Tight','Inter',sans-serif;font-size:0.9rem;font-weight:500;cursor:pointer;transition:all 0.2s}.ds-tab:hover{background:#f6f5f4}.ds-tab.active{background:linear-gradient(135deg,rgba(113,75,103,0.08),rgba(113,75,103,0.03));color:#714b67;font-weight:600;border-left:3px solid #714b67}.ds-tab small{display:block;color:rgba(33,37,41,0.55);font-size:0.72rem;margin-top:0.1rem}.ds-tab.active small{color:rgba(113,75,103,0.6)}" }, { "name": "Billing Toggle", "kind": "custom", "refersTo": "toggle-switch", "description": "Monthly / Yearly billing toggle with sliding thumb.", "html": "
Monthly1 month free
Yearlyup to -10%
", "css": ".ds-toggle-label{font-size:0.82rem;font-weight:500;color:rgba(33,37,41,0.6);cursor:pointer;transition:color 0.2s;user-select:none}.ds-toggle-label.active{color:#1b1319;font-weight:600}.ds-toggle-label small{display:block;font-size:0.62rem;font-weight:400;color:#28a745;margin-top:0.1rem}.ds-toggle-switch{width:48px;height:26px;background:#e5e3e0;border-radius:13px;cursor:pointer;position:relative;transition:background 0.25s;flex-shrink:0}.ds-toggle-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:left 0.25s;box-shadow:0 1px 3px rgba(0,0,0,0.15)}" }, { "name": "Blog Card", "kind": "card", "refersTo": "card-blog", "description": "Blog post card on the homepage (light theme variant).", "html": "
guideAI
June 27, 2026

Odoo Community vs. Enterprise: The Real Cost Breakdown (2026)

A transparent cost comparison including hosting, licensing, and hidden costs for 5, 10, and 25-user teams.

Read more →
", "css": ".ds-card-blog{background:#fff;border:1px solid #e5e3e0;border-radius:0.6rem;padding:1.25rem;display:flex;flex-direction:column;transition:transform 0.2s,border-color 0.2s,box-shadow 0.2s}.ds-card-blog:hover{transform:translateY(-2px);border-color:#714b67;box-shadow:0 4px 20px rgba(113,75,103,0.08)}.ds-card-blog-top{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;flex-wrap:wrap}.ds-badge-guide{display:inline-block;padding:0.15rem 0.5rem;border-radius:3rem;font-size:0.6rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:#08080c;background:#a78bfa}.ds-badge-agent{display:inline-block;padding:0.15rem 0.45rem;border-radius:3rem;font-size:0.56rem;font-weight:600;background:rgba(113,75,103,0.1);color:#714b67;border:1px solid rgba(113,75,103,0.2)}.ds-card-blog-date{font-size:0.82rem;color:rgba(33,37,41,0.45);margin-bottom:0.4rem}.ds-card-blog h3{margin:0 0 0.5rem}.ds-card-blog h3 a{font-family:'Inter Tight',sans-serif;font-size:1.1rem;font-weight:600;line-height:1.35;color:#1b1319;text-decoration:none;transition:color 0.2s}.ds-card-blog h3 a:hover{color:#714b67}.ds-card-blog-teaser{font-size:0.9rem;color:rgba(33,37,41,0.6);line-height:1.55;margin:0 0 1rem;flex:1}.ds-card-blog-link{font-size:0.85rem;color:#714b67;text-decoration:none;font-weight:500;transition:opacity 0.2s;margin-top:auto}.ds-card-blog-link:hover{opacity:0.75}" } ], "narrative": { "northStar": "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. 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. 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.", "keyCharacteristics": [ "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)" ], "rules": [ { "name": "The One-Accent Rule", "body": "Plum Velvet is the only full-strength accent. Green is reserved exclusively for functional success states.", "section": "colors" }, { "name": "The Warmth Rule", "body": "Every neutral must land warm — plum-tinted grays, never cold blue-grays.", "section": "colors" }, { "name": "The Small-Print Silence Rule", "body": "Label text is always one or two steps quieter in color so it never raises its voice over headline content.", "section": "typography" }, { "name": "The Flat-By-Default Rule", "body": "Surfaces are flat at rest. Shadow and lift appear only as a response to hover, focus, or active state.", "section": "elevation" } ], "dos": [ "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." ], "donts": [ "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-to-secondary 'hr' divider.", "Don't add permanent shadows to resting surfaces; depth responds to interaction." ] } }