Trucco

Overview

Trucco is a premium fresh produce, dried fruits, and nuts distributor serving B2B customers with year-round supply chain excellence. The brand embodies 'Agricultural Authenticity'—a design philosophy that marries the natural, earthy qualities of produce sourcing with clean, professional B2B communication. The visual identity conveys trustworthiness, reliability, and agricultural expertise through a restrained color palette anchored by a confident blue primary (#1671b9) paired with accent greens (#c0d72f, #035f1d) that evoke freshness and growth. The UI evokes a sense of operational precision: users feel they are accessing a sophisticated, integrated supply chain rather than a commodity marketplace.

Trucco's voice is authoritative yet approachable—direct, data-informed, and focused on outcomes. The brand speaks in concrete terms: 'year-round supply,' 'peak of freshness,' 'tailored programs,' never hyperbolic or emotional. Example sentence: 'Our integrated supply chain ensures your produce arrives at optimal ripeness, every delivery.'

Colors

The color system is rooted in agricultural and commercial trust. Primary (#1671b9) is the signature brand blue—used on all primary CTAs, navigation highlights, and interactive focus states. It conveys reliability and professional authority without coldness. Secondary (#c0d72f) is a vibrant lime-green that signals freshness, sustainability, and growth; it appears on accent elements, badges, and secondary highlights. Tertiary (#035f1d) is a deep forest green representing agricultural heritage and quality assurance; reserved for status indicators and premium tier badges. The surface stack is deliberately light and neutral: surface (#ffffff) provides clarity, surface-container-high (#e0e0e0) creates subtle depth for cards and sections, and on-surface (#1e1e1e) ensures strong readability at 18p

Typography

The type system pairs Roboto Slab (serif, 500–700 weight) for headlines and display text with Open Sans (sans-serif, 400–600 weight) for body and UI labels. This pairing communicates both heritage (serif for authority) and modernity (sans for accessibility). Display (54px, 700 weight, -0.02em tracking) anchors hero sections and major announcements. Headline-lg (40px, 600 weight) is used for section titles and feature callouts. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for product descriptions and feature copy—generous line-height (1.56) aids scanning on mobile. Label-md (14px, 600 weight, 0.02em tracking) is applied to buttons, badges, and form labels; the increased tracking (0.02em) adds visual weight and clarity at small sizes. On small labels over busy pro

Layout

The layout follows a 12-column grid with a max-width of 1280px, maintaining a fluid layout on mobile and tablet (100vw with 24px gutter on each side). Section rhythm is governed by the lg spacing token (40px) for vertical separation between major content blocks; subsections use md spacing (24px). The hero section spans full-width with a background image (produce photography) and a semi-transparent dark overlay (rgba(0, 0, 0, 0.3)) to ensure text legibility. Feature cards are arranged in a 3-column grid on desktop, collapsing to 1 column on mobile. Container padding is consistently 24px (gutter token) on all sides. White-space is generous: feature sections have 40px top/bottom padding, and card interiors use 24px padding. This breathing room reflects the brand's confidence and premium posit

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle background color shifts rather than dramatic drop-shadows. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Standard Card): 1px solid border in outline-variant (#c0c0c0) plus box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a soft, diffuse shadow that lifts the card 4–6px. Level 3 (Elevated/Hover): background shifts to surface-container-low (#f5f5f5) and box-shadow expands to 0 8px 24px rgba(0, 0, 0, 0.12), creating a sense of floating 12–16px above the base. Interactive elements (buttons, inputs) use a 150ms transit

Shapes

The shape philosophy is 'Functional Minimalism'—rounded corners are subtle and purposeful, never decorative. Buttons use 6px border-radius (rounded.md), creating a soft-edged but professional appearance; this radius is large enough to feel modern without appearing playful. Cards and containers use 4px (rounded.DEFAULT) for a crisp, business-like finish. Input fields also use 4px to maintain visual consistency with form layouts. The full-radius token (9999px) is reserved for badges and pill-shaped elements (e.g., status badges, tag pills). This graduated approach ensures that the most interacti

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#1671b9) background with white text, 12px horizontal padding, 44px height, and 6px border-radius. On hover, the background darkens to #0d4a8a with a 200ms ease-in-out transition. Button-secondary is transparent with a 2px solid primary border; on hover, it fills with {colors.primary-container} (#d4e4f7) and text shifts to {colors.on-primary-container} (#0d4a8a). Both buttons use {typography.label-md} (14px, 600 weight, 0.02em tracking) for crisp, scannable labels. Focus state applies a 3px blue halo (box-shadow: 0 0 0 3px rgba(22, 113, 185, 0.1)) for keyboard navigation accessibility.

Containers & Surfaces Cards are the primary content container. Standard card has a white background

Do's and Don'ts

**Do**

• Do use primary (#1671b9) exclusively for primary CTAs, focus states, and brand-critical interactive elements—it is the signature color and should never be diluted.
• Do apply 200ms ease-in-out transitions on all interactive state changes (hover, focus, active) to signal responsiveness without feeling sluggish.
• Do maintain 24px gutter spacing on all sides of the container and 40px vertical spacing between major sections to preserve the premium, breathing aesthetic.
• Do use Roboto Slab for all headlines (h1–h4) and Open Sans for body text and UI labels—this pairing is non-negotiable and defines the brand voice.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) on small labels overlaid on product imagery to ensure accessibility without adding background plates.

**Don't**

• Don't use secondary (#c0d72f) or tertiary (#035f1d) as primary button backgrounds—they are accent colors and will dilute the brand's visual hierarchy.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12)—heavy shadows feel dated and contradict the clean, professional aesthetic.
• Don't use border-radius larger than 12px (rounded.xl) on cards or containers; anything beyond that reads as playful and undermines B2B credibility.
• Don't mix serif and sans-serif within a single headline or body paragraph—maintain strict separation: Roboto Slab for headlines, Open Sans for body.
• Don't reduce line-height below 1.4 on body text (18px × 1.4 = 25.2px minimum)—tighter leading reduces readability and feels cramped on mobile.