Public Access
Homepage relaunch: contrast fix, heading hierarchy, order widget refactor, final CTA band, depth & polish
This commit is contained in:
@@ -0,0 +1,216 @@
|
||||
{
|
||||
"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": "<button class=\"ds-btn-primary\">See Plans & Pricing</button>",
|
||||
"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": "<a class=\"ds-btn-hero\">Deploy in 5 Minutes</a>",
|
||||
"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": "<button class=\"ds-btn-outline\">How It Works</button>",
|
||||
"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": "<div class=\"ds-card-pricing featured\"><div class=\"ds-card-badge\">Most Popular</div><h3>On the Rise</h3><div class=\"ds-card-price\"><strong>$36.25</strong> <small>/month</small></div><p class=\"ds-card-desc\">I need some modules and professional reports</p><ul><li><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#28a745\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"/></svg> ODOO CE Hosting</li><li><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#28a745\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"/></svg> Automatic Backups</li><li><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#28a745\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"/></svg> Module installation via GIT</li></ul><button class=\"ds-btn-primary\" style=\"width:100%;box-sizing:border-box\">Buy Now</button></div>",
|
||||
"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": "<div style=\"position:relative\"><svg style=\"position:absolute;left:0.75rem;top:50%;transform:translateY(-50%);color:rgba(33,37,41,0.35)\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/></svg><input class=\"ds-input\" type=\"text\" placeholder=\"Search posts...\"></div>",
|
||||
"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": "<nav style=\"display:flex;flex-direction:column;gap:0.25rem;width:220px\"><button class=\"ds-tab active\">Our Mission<small>What makes us different</small></button><button class=\"ds-tab\">Competitive Edge<small>We practice what we preach</small></button><button class=\"ds-tab\">Infrastructure<small>How we scale with you</small></button></nav>",
|
||||
"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": "<div style=\"display:flex;align-items:center;justify-content:center;gap:0.75rem\"><span class=\"ds-toggle-label active\">Monthly<small>1 month free</small></span><div class=\"ds-toggle-switch\"><div class=\"ds-toggle-thumb\"></div></div><span class=\"ds-toggle-label\">Yearly<small>up to -10%</small></span></div>",
|
||||
"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": "<div class=\"ds-card-blog\"><div class=\"ds-card-blog-top\"><span class=\"ds-badge-guide\">guide</span><span class=\"ds-badge-agent\">AI</span></div><div class=\"ds-card-blog-date\">June 27, 2026</div><h3><a href=\"#\">Odoo Community vs. Enterprise: The Real Cost Breakdown (2026)</a></h3><p class=\"ds-card-blog-teaser\">A transparent cost comparison including hosting, licensing, and hidden costs for 5, 10, and 25-user teams.</p><a href=\"#\" class=\"ds-card-blog-link\">Read more →</a></div>",
|
||||
"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."
|
||||
]
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user