Eureekka Stitch Waves Design

Brand & Style

This design system is built on the pillars of stability, precision, and legacy. It adopts an "Institutional Minimalist" aesthetic, prioritizing clarity and negative space to convey a sense of high-trust professionalism. The visual language is intentionally restrained, drawing inspiration from high-end technology and traditional financial institutions to create an environment that feels both established and modern.

The emotional response should be one of calm confidence. By stripping away decorative elements and focusing on typographic hierarchy and alignment, the interface communicates that every detail has been considered with the same care a family office applies to wealth management.

Colors

The palette is anchored by the deep teal primary color, representing growth and sophisticated stability. High-contrast black is used for primary typography to ensure maximum legibility and authority.

The background relies on pristine white and very light gray (#F9FAFB) to create a clean, "Apple-like" canvas. Use the teal sparingly for interactive elements and key brand accents to maintain its impact. Secondary grays are reserved for metadata and secondary UI elements to maintain a strict visual hierarchy.

Typography

This design system utilizes Inter for its systematic, utilitarian, and premium qualities. The hierarchy is defined by significant size differentials and strategic use of weight.

Large display titles should use tighter letter spacing and semi-bold weights to appear authoritative. Body text requires generous line heights (1.5x minimum) to ensure readability and a spacious feel. Smaller labels and "overlines" should use increased letter spacing and uppercase styling to create a clear distinction from narrative content.

Layout & Spacing

The layout philosophy centers on a fixed-width 12-column grid for desktop environments to ensure a focused, centered reading experience. On smaller viewports, the grid transitions to a fluid model with generous side margins to maintain the "pristine" aesthetic.

Whitespace is used as a functional tool to group information rather than just a void. Vertical rhythm follows an 8px base unit. Components and sections should have ample breathing room; do not fear large gaps between disparate content blocks, as this reinforces the premium, institutional mood.

Elevation & Depth

Depth is communicated through subtle tonal layering and extremely soft, ambient shadows. Avoid heavy dropshadows or aggressive gradients.

Surface tiers are defined by shifting from white (#FFFFFF) to a very light gray (#F9FAFB). For interactive cards or modals, use a "High-Trust Shadow": a multi-layered shadow with very low opacity (3-5%) and a large blur radius (20px-40px). This mimics the way light hits physical paper or architectural surfaces, adding dimension without clutter. Low-contrast outlines (1px solid #E5E7EB) are preferred for defining boundaries in complex data views.

Shapes

The shape language is characterized by "Soft" geometry. A 4px (0.25rem) base corner radius is applied to most UI components to strike a balance between friendly modernism and traditional institutional rigor.

Larger containers like cards or image wrappers may scale up to 8px (0.5rem) to feel more approachable, but sharp precision remains the priority. Avoid fully rounded pill shapes for primary buttons; instead, maintain the soft-square aesthetic to reinforce the architectural stability of the brand.

Components

Buttons

Primary buttons use a solid teal (#008080) background with white text. Secondary buttons should use a ghost style with a black text and a thin #E5E7EB border. Button padding should be generous (12px 24px) to ensure a high-end feel.

Cards

Cards are primarily flat, defined by a 1px #E5E7EB border. On hover, apply a subtle ambient shadow to indicate interactivity. Use cards to group related financial metrics or portfolio highlights.

Input Fields

Inputs are minimalist, featuring a bottom-border-only design or a very light gray filled background with no border. Focus states are indicated by a 1px teal stroke. Labels should always be visible above the input using the label-sm uppercase style.

Lists & Data Tables

Data is the core of this design system. Tables should have significant cell padding and use horizontal rules only. Typography within tables should use body-md for values and label-sm for headers to maintain professional clarity.

Photography

Use high-resolution, architectural or abstract nature photography with a desaturated or cool-toned color grade. Imagery should feel expensive, quiet, and expansive.