TRATEZ

Overview

TRATEZ is a premium pet treat brand that embodies **Minimalist Brutalism**—a design philosophy that strips away ornamentation to reveal essential truth. The brand serves health-conscious pet owners who demand transparency and single-ingredient purity. The visual identity combines heavy, geometric sans-serif typography (Roboto Condensed at 900 weight) with a warm, off-white canvas (#f8f7f1) and deep charcoal accents (#1c1c1c), evoking both industrial integrity and approachable warmth. The interface prioritizes clarity: stark contrast ratios (28:1 on primary text), generous whitespace, and deliberate use of a secondary blue accent (#3898ec) only for interactive elements. The emotional response is one of confidence and trustworthiness—users feel they're engaging with a brand that has nothing to hide.

The brand voice is direct, unpretentious, and grounded in specificity. Copy avoids marketing hyperbole; instead, it states facts with quiet authority. Example: "100% pasture-raised beef liver — one ingredient, that's it" rather than "Unleash the power of premium nutrition." Typography reinforces this: the condensed, heavyweight headline family (Roboto Condensed 900) reads as bold and unapologetic, while body copy in Manrope (400 weight, 16px, 24px line-height) remains conversational and accessible. The brand personality is that of a founder who knows their product inside-out and refuses to compromise.

Colors

The TRATEZ color system is built on a **high-contrast, neutral-dominant palette** with a single accent color for interactive focus. The primary surface is a warm off-white (#f8f7f1, RGB 248, 247, 241), which serves as the page background and primary container. This is paired with a deep charcoal primary (#1c1c1c, RGB 28, 28, 28) used for all body text, headlines, and primary CTAs—delivering a 28:1 contrast ratio that exceeds WCAG AAA standards. The secondary accent is a medium blue (#3898ec, RGB 56, 152, 236) reserved exclusively for interactive elements: hover states, focus rings, and secondary CTAs. This creates a clear visual hierarchy where the user's attention is drawn to actionable elements without competing with the brand's core message.

The surface stack progresses from brightest

Typography

The type system is a **two-family hierarchy**: Roboto Condensed (900 weight) for all headlines and display text, and Manrope (400–800 weight) for body, labels, and UI copy. Roboto Condensed's extreme condensation and heavyweight (900) creates visual impact and authority—headlines at 52px/60px line-height with -0.02em letter-spacing feel dense and immovable. This is intentional: the brand refuses to whisper. Body copy in Manrope (16px, 24px line-height, 0.01em letter-spacing) provides warmth and readability, preventing the interface from feeling cold. Label text uses Manrope 800 at 15px with 0.02em letter-spacing for CTAs, creating a distinct interactive layer. On small labels over busy backgrounds (e.g., "NEW" badge on product images), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to en

Layout

The page uses a **fixed 12-column grid** with a max-width of 1280px and 24px gutters on desktop, scaling to 16px on tablet and 12px on mobile. The layout rhythm is driven by the lg spacing token (40px) for section separation, creating breathing room between product imagery, feature callouts, and CTAs. The hero section occupies the full viewport width with the product carousel on the left (60% width) and product details on the right (40% width), maintaining visual balance. Cards use md spacing (24px) for internal padding and are separated by lg spacing (40px) vertically. The container-max-width of 1280px ensures content never feels stretched on ultra-wide displays. Whitespace is generous and intentional: the brand believes empty space is as important as filled space. No section should feel

Elevation & Depth

Depth in TRATEZ is achieved through **subtle shadow layering and color progression**, not dramatic drop shadows. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for small interactive elements like buttons and badges, md (0 4px 12px rgba(0, 0, 0, 0.08)) for cards and modals, and lg (0 8px 16px rgba(0, 0, 0, 0.12)) for elevated overlays and popovers. The product carousel card uses md elevation to separate it from the background without appearing to float. On hover, cards transition to lg elevation (transition: box-shadow 200ms ease-out) to indicate interactivity. The s

Shapes

The shape philosophy is **Architectural Sharpness**—minimal rounding that respects the grid and avoids organic softness. Buttons use 4px border-radius (rounded.sm), creating a subtle corner break that feels intentional rather than accidental. Cards use 12px border-radius (rounded.lg), providing enough rounding to feel contemporary without compromising the brutalist edge. Input fields use the DEFAULT 8px radius, balancing usability (easier to tap on mobile) with the brand's geometric precision. The product selection chips use 8px radius with a 2px border in the outline-variant color (#999999),

Components

Action Elements Buttons are the primary interactive layer. The primary button uses backgroundColor: {colors.primary} (#1c1c1c), textColor: {colors.on-primary} (#ffffff), padding: 18px 32px, height: 48px, and rounded: {rounded.sm} (4px). Font weight is 800 (Manrope) at 15px with 0.02em letter-spacing. On hover, the background transitions to {colors.primary-container} (#333333) with a 200ms ease-out transition. Focus state adds a 3px inset border in {colors.secondary} (#3898ec). Secondary buttons use a transparent background with a 1px border in {colors.outline-variant} (#999999) and textColor: {colors.primary}. The secondary button hover state changes backgroundColor to {colors.surface-container-high} (#e6e6e6) without changing the border, maintaining visual hierarchy.

Containers &

Do's and Don'ts

**Do**

• Do use Roboto Condensed 900 for all headlines and display text—it is the visual anchor of the brand and must never be substituted with a lighter weight or different typeface.
• Do maintain a minimum 24px gutter and 40px section spacing on desktop; whitespace is a design decision, not wasted space.
• Do apply the secondary blue (#3898ec) only to interactive elements (buttons, focus states, links); never use it for decorative or informational elements.
• Do use the md elevation shadow (0 4px 12px rgba(0, 0, 0, 0.08)) for cards and containers; avoid harsh shadows that contradict the minimalist aesthetic.
• Do ensure all text meets WCAG AAA contrast ratios (28:1 for primary text on light backgrounds); test with a contrast checker before shipping.

**Don't**

• Don't round corners beyond 12px on cards or 4px on buttons; the brand's geometric precision depends on sharp, intentional angles.
• Don't use decorative shadows or glows; every shadow must serve a functional purpose (depth, focus, elevation).
• Don't substitute Manrope with system fonts or other sans-serifs; the typeface pairing is core to the brand identity.
• Don't apply the secondary blue (#3898ec) to non-interactive elements like badges or informational callouts; reserve it exclusively for CTAs and focus states.
• Don't exceed 1280px container width on desktop; the layout is designed for this constraint and wider content dilutes the visual impact.