Impeccable redesign: flat surfaces, no emoji, no eyebrows, system fonts, restrained palette

2026-08-07 10:20:59 +00:00
parent 736bad18ca
commit 543c90bdfd
18 changed files with 1032 additions and 892 deletions
@@ -0,0 +1,210 @@
+---
+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.