Tresmares Capital

Overview

Tresmares Capital embodies a philosophy of **Architectural Minimalism**—a design language rooted in precision, restraint, and the belief that clarity serves confidence. The brand operates in the high-stakes world of private equity and growth financing, where every visual element must communicate competence without noise. The aesthetic is deliberately austere: a near-monochromatic palette of charcoal (#2b2b2b), off-whites (#f7f7f7 to #ffffff), and muted grays (#e5e5e5, #d5d5d5) punctuated by a single warm secondary accent (#b0a58f) and a technical tertiary blue (#2fa1d6). The UI evokes the feeling of a well-appointed boardroom—spacious, uncluttered, with typography that commands attention through scale and weight rather than color. Users experience a sense of institutional solidity and forward momentum.

The brand voice is measured, direct, and unapologetically professional. Vocabulary favors precision over flourish: "tailored financing," "high-growth SMEs," "drive to grow." Sentences are declarative and purposeful, avoiding hyperbole. The tone never apologizes, never hedges—it states facts with the confidence of a firm that has earned its reputation. Example sentence in brand voice: "We structure capital for founders who scale relentlessly."

Colors

The color system operates on a principle of **hierarchical restraint**. Primary (#2b2b2b, rgb(43, 43, 43)) is the dominant text and interactive color—used for body copy, button backgrounds, and active states. It is not pure black, but a warm charcoal that softens the institutional edge while maintaining authority. On-primary (#ffffff) provides maximum contrast for text on dark backgrounds. The surface stack progresses from bright (#ffffff) through container layers (surface-container-lowest #f2f2f2, surface-container #e5e5e5, surface-container-high #d5d5d5) to create subtle visual separation without relying on shadows or depth. Secondary (#b0a58f, a warm taupe) is reserved for accents, borders, and supporting UI elements—it humanizes the palette without competing for attention. Tertiary (#2

Typography

The type system is built on **PP Neue Montreal**, a geometric sans-serif that conveys modernity without sacrificing readability. The hierarchy is steep and intentional: display (149px, weight 500) commands hero sections with a line-height of 156px and -0.04em letter-spacing to tighten the visual mass; headline-lg (56px, weight 500) anchors section titles; body-md (16px, weight 400) is the workhorse for all body copy, set at 24px line-height for comfortable reading. Weight is used strategically—500 for headlines and labels creates visual emphasis without requiring color shifts, while 400 for body text ensures legibility at smaller sizes. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels (label-sm, 12px) when placed over light backgrounds to prevent anti-aliasing blur. All typ

Layout

The layout operates on a **12-column fluid grid** with a maximum container width of 1100px, centered on the viewport. The spacing scale is semantic: use lg spacing (40px) for section separation (margin-bottom: 40px between major content blocks), md spacing (24px) for component padding and internal gutters, and sm spacing (12px) for tight groupings within cards or lists. The gutter between grid columns is 24px. White-space is treated as a design material—generous margins around the hero headline (e.g., 64px xl spacing above and below) create breathing room and emphasize the message. Container padding follows the pattern: 24px (md) on tablet, 40px (lg) on desktop. The page rhythm is slow and deliberate: large typography (display or headline-lg) is followed by 40px of white-space, then body c

Elevation & Depth

Depth in this system is achieved through **subtle layering and border definition**, not dramatic shadows. The elevation scale is minimal: sm (0 1px 2px rgba(0, 0, 0, 0.06)) is applied to cards and input fields to suggest a slight lift from the surface; md (0 3px 8px rgba(0, 0, 0, 0.15)) is reserved for hover states and modals; lg (0 8px 24px rgba(0, 0, 0, 0.12)) is used only for overlays and dropdowns. Borders are the primary visual separator: apply 1px solid {colors.outline-variant} (#d5d5d5) to card edges and input fields, and 1px solid {colors.outline} (#aaaaaa) to interactive elements on f

Shapes

The shape philosophy is **Geometric Precision**—corners are sharp and minimal, reflecting the brand's technical and professional nature. Use rounded.DEFAULT (3px) for buttons and small interactive elements; rounded.md (5px) for cards and containers; rounded.lg (10px) for larger modals or panels; rounded.full (9999px) only for badges and pill-shaped elements. Never use rounded.sm (2px) in user-facing UI—it is reserved for internal dividers and hairline borders. The rationale: 3–5px corners feel contemporary and approachable without sacrificing the geometric clarity that defines the brand. Avoid

Components

Action Elements Buttons are the primary call-to-action mechanism. button-primary uses {colors.primary} (#2b2b2b) background with {colors.on-primary} (#ffffff) text, label-md typography (14px, weight 500), 12px horizontal padding, and 48px height. On hover, transition to button-primary-hover with background {colors.primary-container} (#e5e5e5) over 200ms ease-out. Apply a 2px solid {colors.outline} focus ring with 3px offset (box-shadow: 0 0 0 3px rgba(43, 43, 43, 0.1)) for keyboard navigation. button-secondary uses a transparent background with 1px solid {colors.outline} border, {colors.primary} text, and the same padding and height; on hover, fill the background with {colors.surface-container-high} (#d5d5d5). Links use link-underline: text-decoration: underline with text-underline-off

Do's and Don'ts

**Do**

• Do use the full 149px display size for hero headlines; the scale commands attention and embodies the brand's confidence.
• Do maintain 40px (lg spacing) between major sections to create visual rhythm and prevent cognitive overload.
• Do apply 1px solid {colors.outline-variant} borders to separate cards and containers; borders are the primary depth mechanism.
• Do use {colors.primary} (#2b2b2b) for all interactive text and button backgrounds; consistency reinforces institutional authority.
• Do transition hover states over 200ms ease-out to signal interactivity without jarring the user.

**Don't**

• Don't use rounded corners above 10px except for full circles; the brand rejects soft, rounded aesthetics.
• Don't apply shadows deeper than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)); the system relies on borders and typography, not depth.
• Don't introduce colors outside the defined palette; secondary (#b0a58f) and tertiary (#2fa1d6) are the only accents permitted.
• Don't set body copy below 16px or above 18px; the brand prioritizes legibility and professional presentation.
• Don't collapse margins or use negative spacing; always use explicit spacing tokens from the scale (xs, sm, md, lg, xl).