Carpintería Ordoñez

Overview

Carpintería Ordoñez is a heritage-driven woodworking brand rooted in 30+ years of Nicaraguan craftsmanship. The design system embodies 'Artisanal Warmth'—a movement that celebrates handmade authenticity while embracing digital accessibility. The aesthetic combines rich earth tones (warm browns at #886032, natural beiges at #faf8f4), serif typography that evokes tradition, and clean sans-serif for clarity. The UI evokes trust, quality, and the tactile satisfaction of bespoke furniture.

The brand voice is professional yet approachable, speaking in Spanish with precision and pride. Tone: confident, never rushed. Example: 'Treinta años perfeccionando cada detalle. Tu proyecto merece lo mejor.'

Colors

The color system centers on warm, earthy tones that reflect wood and natural materials. Primary (#886032) is a medium-warm brown used exclusively on CTAs ('Solicitar cotización'), navigation highlights, and interactive focus states—it commands attention without aggression. Surface colors range from warm cream (#faf8f4) for the page background to deeper neutrals (#282015) for body text, creating a sophisticated, low-contrast reading experience. Secondary (#6b5b52) supports the primary as a slightly cooler brown for secondary UI elements and accents. Tertiary (#15804d) is a natural green reserved for success states, badges, and sustainability messaging—it appears sparingly but meaningfully. Error (#d32f2f) is a clear red for validation and alerts. The outline token (#7a7570) provides subtle

Typography

The type system pairs Playfair Display (serif, 700 weight) for headlines and display text with Inter (sans-serif, 400–600 weights) for body and UI labels. This pairing communicates heritage (serif) grounded in modern clarity (sans-serif). Display (72px, 700 weight, -0.02em letter-spacing) anchors hero sections with authority; Headline-lg (40px) and Headline-md (28px) structure content hierarchy. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 24px line-height) ensure comfortable reading at 1.5× line-height ratio. Label-md (14px, 500 weight) and Label-sm (12px) are used for buttons, badges, and form labels with 0.01–0.02em letter-spacing for crispness. On small labels over busy backgrounds (e.g., badges on portfolio images), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) fo

Layout

The layout uses a 12-column grid with a max-width of 1400px, centered on desktop and fluid on mobile. White-space is generous: lg spacing (40px) separates major sections (hero, services, portfolio, contact), md spacing (24px) divides subsections, and sm spacing (12px) groups related elements. The gutter is 24px on desktop, reducing to 16px on tablet and 12px on mobile. Hero sections occupy full-width with 80px vertical padding (top and bottom) to create breathing room around the primary CTA. Cards and containers use md padding (24px) internally. The container max-width of 1400px prevents text lines from exceeding 75 characters, optimizing readability. Spacing tokens are semantic: use lg for section breaks, md for card interiors and form groups, sm for button padding and list item spacing.

Elevation & Depth

Depth is achieved through subtle, warm-toned shadows that respect the artisanal aesthetic. Level 1 (Base): no shadow; flat surfaces at surface color. Level 2 (Standard Cards): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), creating a soft lift. Level 3 (Elevated/Modals/Hover): box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), with a slightly larger blur radius (16px vs 12px) and increased opacity (0.12 vs 0.1). Primary CTAs use Level 2 shadows by default, transitioning to Level 3 on hover (transition: box-shadow 0.2s ease). Cards use Level 2 and elevate to Level 3 on hover. Shadows are always black-base

Shapes

The shape philosophy is 'Refined Traditionalism'—sharp enough to feel contemporary, rounded enough to feel approachable. Buttons use full rounding (border-radius: 9999px) to soften the primary CTA and create a pill-shaped, inviting form. Secondary buttons and inputs use md rounding (0.75rem / 12px) for a balanced, modern look. Cards and containers use lg rounding (1rem / 16px) to avoid harsh corners while maintaining clarity. Small UI elements (badges, small buttons) use DEFAULT rounding (0.5rem / 8px). The rationale: full rounding on primary CTAs makes them impossible to miss and signals 'cli

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses #886032 background, white text, 12px vertical / 32px horizontal padding, and full rounding (9999px). On hover, the background darkens to #7a5028 and the shadow elevates from 0 4px 12px to 0 6px 16px rgba(0, 0, 0, 0.15), with a 200ms ease transition. Active state (#6b4620) provides tactile feedback. Secondary buttons (button-secondary) have a transparent background with a 2px solid outline in {colors.outline}, full rounding, and the same padding. On hover, the background fills with {colors.surface-container-high} and the outline darkens to {colors.on-surface}. Tertiary buttons (button-tertiary) are compact (8px / 16px padding, 32px height) with a semi-transparent green background (rgba(

Do's and Don'ts

**Do**

• Do use Playfair Display for all headlines and hero text to reinforce heritage and craftsmanship; reserve Inter for body and UI labels.
• Do apply the primary brown (#886032) exclusively to CTAs and active states; overuse dilutes its impact and confuses hierarchy.
• Do maintain lg spacing (40px) between major sections to create breathing room and guide the eye through the page flow.
• Do use full rounding (9999px) only on primary CTAs; apply md/lg rounding to cards and inputs to avoid visual chaos.
• Do elevate shadows on hover (0 4px 12px → 0 6px 16px) with a 200–300ms ease transition to signal interactivity without jarring movement.
• Do write in Spanish with precision and pride; avoid generic marketing speak. Example: 'Treinta años perfeccionando cada detalle' not 'Somos expertos'.

**Don't**

• Don't use the primary brown (#886032) for body text or backgrounds; it's reserved for interactive elements and will reduce readability.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or use cool-toned shadows (blues, grays); they conflict with the warm, artisanal aesthetic.
• Don't mix serif and sans-serif weights carelessly; use Playfair Display at 700 weight only, and Inter at 400–600 weights for hierarchy.
• Don't round corners beyond lg (1rem / 16px) on cards or containers; excessive rounding reads as childish and undermines the professional craft positioning.
• Don't use the tertiary green (#15804d) for primary CTAs or navigation; it's reserved for success states and sustainability messaging only.
• Don't set line-height below 1.5× font-size for body text; the warm, serif-heavy aesthetic requires generous leading for comfort.