odoo-expertos.com/DESIGN.md

---
name: Odoo Expertos
description: Spanish Odoo Community ERP authority resource
colors:
  surface: "#0f1115"
  surface-raised: "#16181d"
  surface-over: "#1c1f26"
  border: "#2a2d35"
  border-light: "#363942"
  text-primary: "#ecedee"
  text-secondary: "#9ca0ab"
  text-tertiary: "#686d78"
  accent: "#3b8c5e"
  accent-hover: "#4da875"
  accent-muted: "rgba(59, 140, 94, 0.12)"
  link: "#5b9cf5"
  inline-code: "#2a2d35"
typography:
  body:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: "1rem"
    fontWeight: 400
    lineHeight: 1.75
  heading:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: "-0.02em"
  label:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: "0.8125rem"
    fontWeight: 500
    letterSpacing: "0.02em"
  mono:
    fontFamily: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace"
    fontSize: "0.875em"
rounded:
  sm: "4px"
  md: "8px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  xxl: "48px"
  xxxl: "80px"
components:
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.text-primary}"
    rounded: "{rounded.md}"
    padding: "10px 24px"
    fontWeight: 600
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    border: "1px solid {colors.border}"
    rounded: "{rounded.md}"
    padding: "10px 24px"
  nav-link:
    textColor: "{colors.text-secondary}"
    fontWeight: 500
  nav-link-active:
    textColor: "{colors.text-primary}"
  code-block:
    backgroundColor: "{colors.surface-raised}"
    rounded: "{rounded.md}"
    border: "1px solid {colors.border}"
---

# Design System: Odoo Expertos

## Overview

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

A knowledge resource that feels like it lives inside the tools an engineer already trusts — clean, precise, no decoration. The design takes cues from technical documentation, code editors, and product engineering dashboards. Every element earns its place; nothing exists for visual effect.

The layout is built for reading: generous whitespace, restrained type scale, content at 65-75 characters per line. Color is used functionally — green indicates actionable elements, not brand decoration. The dark surface is the background of a terminal or IDE, not a "dark mode" marketing choice.

**Key Characteristics:**
- Content-forward: articles are the hero, not hero sections
- Typography-driven hierarchy, not card grids
- One accent color, applied sparingly and precisely
- Flat surfaces with tonal depth (layering, not shadows)
- Technical precision in every detail (code blocks, tables, inline code)
- No decorative elements that don't serve comprehension

## Colors

A restrained palette built around one green accent used only for interactive elements.

### Primary
- **Precise Green** (`#3b8c5e`): Primary actions, active states, category labels. Used sparingly — never as a background wash or decorative element.

### Neutral
- **Engine Bay** (`#0f1115`): Page background. Deep but not pure black — reduces eye strain.
- **Wrench** (`#16181d`): Raised surfaces (nav, sidebar, cards).
- **Steel** (`#1c1f26`): Elevated surfaces, hover states.
- **Guide Rail** (`#2a2d35`): Borders, dividers, subtle structure lines.
- **Silver** (`#363942`): Border hover states, stronger structure.
- **Bright Aluminum** (`#ecedee`): Primary text, headings.
- **Warm Steel** (`#9ca0ab`): Secondary text, metadata, captions.
- **Tool Steel** (`#686d78`): Tertiary text, placeholders, disabled.

### Named Rules
**The One Voice Rule.** The green accent is used on ≤5% of any given screen. It exists to direct action, not to decorate.

## Typography

**Body Font:** System UI stack (`-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`)
**Mono Font:** System monospace (`'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace`)

No web fonts are loaded. The system stack renders identically across platforms and imposes no loading cost. This is a deliberate choice: a knowledge site should prioritize reading speed and reliability over typographic novelty.

**Character:** Clean, neutral, highly readable. The system stack is what engineers see in their own tools every day.

### Hierarchy
- **Display** (600, `clamp(1.75rem, 3vw, 2.5rem)`, 1.25): Article titles, page headings. Never oversized marketing headlines.
- **Headline** (600, `clamp(1.25rem, 2vw, 1.625rem)`, 1.3): Section headings within articles.
- **Title** (600, `1.125rem`, 1.4): Card titles, sidebar headings.
- **Body** (400, `1rem`, 1.75): Article body text. Max width 70ch.
- **Body Large** (400, `1.0625rem`, 1.8): Lead paragraphs, article lede.
- **Label** (500, `0.8125rem`, 1, `0.02em` uppercase): Category badges, metadata, small UI text.
- **Caption** (400, `0.75rem`, 1.4): Footers, timestamps, secondary metadata.

### Named Rules
**The No Oversized Headline Rule.** No heading exceeds 2.5rem. Authority comes from substance, not type size.

## Layout

Content is laid out as a single reading column (max 740px) for articles, with a sidebar on listing pages. The grid uses `max-width: 1200px` for the full page, with content constrained to `740px` for optimal reading measure.

**Spacing rhythm:** `4px` base unit. Section separation uses `80px` (xxxl), article elements use `48px` (xxl), and component internal spacing uses `16-32px`.

The homepage uses a minimal two-column layout for featured content — not a 3-card grid. Article lists use horizontal cards (image + text side by side), never vertical card grids.

## Elevation & Depth

**No shadows.** Depth is conveyed exclusively through tonal layering. Surfaces at rest are flat. The navigation bar sits on a `surface-raised` background with a `border` bottom line — no shadow, no blur.

Cards and containers are differentiated by background color (`surface-raised` on `surface`), not by shadows or borders.

### Named Rules
**The Flat-By-Default Rule.** No box-shadows. Depth comes from tonal background shifts, not from simulated elevation.

## Shapes

- Buttons: `8px` radius (md)
- Cards/containers: `8px` radius (md)
- Code blocks: `8px` radius (md)
- Inputs: `8px` radius (md)
- Category badges: `4px` radius (sm)
- Inline code: `4px` radius (sm)
- Avatars/small elements: `4px` radius (sm)

No pill-shaped elements except where function requires (tag clouds use `100px` radius for pill shape).

## Components

### Navigation
Fixed top bar, `surface-raised` background, bottom `1px` border in `border`. Logo left, links right, no CTA button in nav. Active link indicated by subtle underline accent. Mobile: hamburger toggle with dropdown.

### Buttons
- **Primary:** `accent` background, white text, `8px` radius, `10px 24px` padding, 600 weight. Hover shifts to `accent-hover`.
- **Secondary:** Transparent, `1px border` in `border`, `8px` radius, `10px 24px` padding. Hover background `surface-over`.
- **Ghost:** Transparent, no border, `link` color. Hover background `accent-muted`.
- All buttons use `transition: background 0.15s ease, color 0.15s ease` — no transforms, no scale.

### Article Content
- Headings: `border-bottom` in `border` for H2, no line for H3-H6.
- Paragraphs: `1rem` body, `1.75` line-height, `70ch` max-width.
- Links: `link` blue, underline on hover. Not green — green is for actions, not navigation.
- Code blocks: `surface-raised` background, `border` border, `8px` radius, `16px` padding, mono font.
- Inline code: `surface-raised` background, `border` border, `4px` radius.
- Tables: Full width, `border` borders, `surface-raised` header background.
- Blockquotes: `3px` left border in `accent`, `lg` left padding, italic, `text-secondary` color.
- Callouts: `accent-muted` background, `1px` border in `accent`, `8px` radius, `lg` padding. Only for genuinely important notes.

### Cards
Used only on the homepage feature section. `surface-raised` background, `8px` radius. No shadow. No icon above heading. Image area is a color-coded label, not a gradient placeholder.

### Article Cards (list view)
Horizontal layout: `200px` image + text side by side. `border-bottom` separator between articles. No card container — articles are list items.

### Footer
`surface-raised` background, `border-top`, 4-column grid. Smaller text, `text-tertiary` color. No bold headings.

## Do's and Don'ts

### Do:
- **Do** use the green accent only for primary actions and category indicators.
- **Do** keep body text at 65-75 characters per line.
- **Do** use horizontal article lists, not vertical card grids.
- **Do** lead with the content — let articles speak without decorative framing.
- **Do** use tonal layering for depth instead of shadows.
- **Do** keep the system font stack — no web fonts.

### Don't:
- **Don't** use gradient text, glass effects, or glow.
- **Don't** put a CTA button in the navigation bar.
- **Don't** use the same-size card grid pattern (icon + heading + text) anywhere.
- **Don't** use emoji or Unicode glyphs as icons.
- **Don't** put an eyebrow/kicker above section headings.
- **Don't** use numbered section markers (01/02/03).
- **Don't** use side-stripe borders on cards or callouts.
- **Don't** use large marketing headlines (>2.5rem).
- **Don't** put shadows on cards or containers.
- **Don't** use the accent color for non-interactive decorative elements.