odoo-expertos.com/DESIGN.md

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

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