Odoo DESIGN.md

Design System Inspiration of Odoo

Overview

Visual Theme & Atmosphere

Odoo brings business applications for areas such as accounting, CRM, inventory, commerce and project management into an integrated suite. Its company page describes software that handles complex business needs while remaining easy to adopt, with applications added as a company grows. Company.

The move from OpenERP to Odoo in 2014 gave the brand room for website building, commerce and other applications beyond ERP. Fabien Pinckaers's account describes a website-first design process: the website became the reference for other brand materials. A companion announcement associates the purple logo with creativity, originality and innovation. Rebrand account, 2014 announcement.

The current homepage pairs large Caveat handwriting, drawn highlights and arrows with orderly Inter controls. Purple buttons sit on white; a pale grey field holds a six-column app grid with colourful icons. This makes the marketing surface feel informal while its navigation and calls to action stay compact. The current product story adds native AI to the integrated-app proposition and distinguishes the Community and Enterprise editions. These observations describe the public homepage captured on 2026-10-29. Homepage.

Brand Narrative

The 2014 rename made the identity broad enough for individual applications outside ERP. The same account ties brand guidelines to the website itself. The current homepage continues to make the breadth legible through individual app icons and a single integrated-platform proposition. This is a reading of the historical account beside today's page, not a claim of a newly announced rebrand. Rebrand account, homepage.

Principles

Odoo's stated mission joins intuitive use, comprehensive functionality, integration and straightforward upgrades. For this visual reference, the measured implementation suggests pairing an expressive display layer with compact, consistent controls. That second point is an implementation observation, not a quoted corporate principle. Company.

Personas

No research-backed persona evidence was opened.

Colors

The live root exposes 409 computed custom properties. Odoo's palette and colour-combination properties are separated from Bootstrap defaults in the accompanying report. The primary and secondary below also match the official brand page. Brand assets, live frontend stylesheet.

The accent names above are descriptive reference labels, not verified semantic status roles. The official brand page separately lists grey #8f8f8f; it is not promoted into this homepage's live-extracted tokens. Paragraph ink establishes the foreground role even though the root --body-color is #374151.

Typography

The census also loaded FontAwesome, odoo_ui_icons and MarshmallowIcons. These are icon faces and are excluded from text-family tokens. The CSS imports provide the serving route for Inter and Caveat; the census's own fontFaces array is empty because its two stylesheet reads were blocked by cross-origin CSSOM access. Brand typography, CSS imports and icon font declarations.

Measured type: hero CTA and advisor 16px/600, line-height 24px; header CTA 12px/600, line-height 18px; Pricing 14px/600, line-height 60px, with a 17px inline rectangle; Accounting's caption 14px/600, inside a 16px/600 anchor. The survey's Caveat “Compare with SAP” link is 32px/700, line-height 35.2px; this is not a measurement of the hero heading's size.

Substitute: none chosen.

Layout

In the desktop capture, the logo sits left, product navigation is centred, and sign-in/trial actions sit right. A centred headline and paired CTAs lead into a six-column app grid, followed by product demonstrations, benefit cards, a customer quotation and a final CTA. Broad curved section edges and generous white/grey fields organise the page. The grid's measured link boxes are approximately 146.7px wide, with row starts 149px apart. Captured homepage.

The root --o-grid-gutter-width is 32px. Control padding is local: 12px 24px on the hero pair, 8px 16px on the header CTA and 0 20px on Pricing. These observations do not establish a universal spacing scale.

Responsive Behavior

Only the 1440×1000 desktop viewport was measured; mobile layout, breakpoint transitions and touch states are unmeasured.

Elevation & Depth

The buttons use a subtle white gradient rather than a resting drop shadow. Accounting's icon image has 0 12px 24px 0 rgba(27,182,249,0.1). Keyboard focus adds a 4px spread shadow to the purple CTAs and advisor control. Those measured values belong to different elements and roles; they are not a universal elevation ladder.

Motion & Easing

The measured hero, advisor and header CTA transitions are 150ms ease-in-out for color, background-color, border-color and box-shadow. Accounting uses all 0.2s ease-in-out and settles at matrix(1, 0, 0, 1, 0, -4) on hover and press. The first-party CSS independently declares the tile's translateY(-0.25rem) hover rule. Pricing's own transition is all 0s ease 0s; the probe reports a 500ms longest transition whose origin was not resolved. Reduced-motion behaviour was not tested. Frontend stylesheet.

Components

Five controls were measured at 1440×1000, en-US, on the public homepage. Values below are computed backgrounds, not flattened screenshot colours.

Both purple CTAs and the advisor control retain linear-gradient(145deg, rgba(255,255,255,0.2), rgba(255,255,255,0)) in every measured state. Their resting shadows are none. The white labels on the two purple CTAs remain white. The Accounting image is 80×80px, with a white background and the shadow described under Elevation & Depth. Its outer link is square; this does not describe the image's corner radius.

The survey also measured the lower-page CTA at 61px high, radius 8px, padding 16px 32px, Inter 18px/600. Its interaction states were not measured.

States

All 15 requested hover/pressed/focus observations were measured: hover flags were true, pressed snapshots had active: true, and keyboard focus arrived through real Tab presses. Every state settled for 900ms. Focus changes reverted after blur. Pressed Accounting and Pricing matched their hover snapshots within the probe's compared scope; this does not establish absence of changes in external images or unobserved siblings.

The Accounting tile's focus was rgb(0, 95, 204) auto 1px, offset 1px. It is the browser's own outline and is omitted from component focus tokens. Disabled, validation, loading and error states were not measured and are omitted.

Do's and Don'ts

• Pair Caveat display writing with Inter interface labels when recreating this homepage's expression.
• Preserve the primary CTA's white gradient and its distinct hover, pressed and keyboard-focus treatments.
• Keep the Accounting caption dark when applying the measured 4px upward tile movement.
• Use the supplied logo artwork, retain clear space and respect the brand page's minimum height of 20px. Capitalise the name as Odoo in prose. Logo and naming guidance.
• Keep framework semantic colours and icon fonts separate from the verified brand palette and text families.

Voice & Tone

The homepage combines short, direct benefit statements with informal display writing. Its promise connects an integrated platform with simplicity and affordability; its current copy gives AI a prominent role. The company mission similarly pairs business capability with ease of use. Homepage, company mission.

Agent Prompt Guide

“Build an Odoo homepage-style hero with Caveat display lettering, Inter controls, white space and pale grey sections. Use a 50px CTA with 6.4px corners, 12px 24px padding, Inter 16px/600, white text and a #714b67 background under the measured 145° white-to-transparent gradient. Hover changes the background to #604058 and border to #5a3c52; press changes them to #5a3c52 and #55384d. Keyboard focus uses the hover colours plus a 4px rgba(134,102,126,0.5) shadow.”

This prompt follows the public marketing surface and does not specify the authenticated application's design.