# Evergreen Capital — Design System
> Income-focused investing, private market access, and advanced tax strategy built for entrepreneurs, founders, and high earners.
- **Canonical:** https://uiuxskills.com/library/evergreen-capital
- **Source:** https://www.evergreencap.com/
- **Category:** Fintech & Crypto
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-08-14T02:29:57.203Z

---

---
version: alpha
name: Evergreen Capital
tagline: Compound Wealth
description: >-
  Income-focused investing, private market access, and advanced tax strategy built for
  entrepreneurs, founders, and high earners.
tone: Sophisticated, institutional, and highly professional with a focus on elite financial stewardship.
color-scheme: dark
colors:
  primary: "#182521"
  secondary: "#7F908B"
  accent: "#00D695"
  background: "#F6F3EE"
  surface: "#EBE6E0"
  surface-dim: "#182521"
  on-primary: "#F6F3EE"
  on-surface: "#182521"
  outline: "#C0CAC7"
  error: "#FF5733"
typography:
  display-lg:
    fontFamily: Playfair Display, serif
    fontSize: 144px
    fontWeight: 400
    lineHeight: "1.1"
    letterSpacing: 0px
  display-md:
    fontFamily: Playfair Display, serif
    fontSize: 96px
    fontWeight: 400
    lineHeight: "1.1"
    letterSpacing: 0px
  headline-lg:
    fontFamily: Playfair Display, serif
    fontSize: 68px
    fontWeight: 400
    lineHeight: "1.2"
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: Playfair Display, serif
    fontSize: 40px
    fontWeight: 400
    lineHeight: "1.2"
    letterSpacing: 0px
  headline-sm:
    fontFamily: Playfair Display, serif
    fontSize: 24px
    fontWeight: 400
    lineHeight: "1.3"
    letterSpacing: 0px
  body-md:
    fontFamily: Roboto, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0px
  body-sm:
    fontFamily: Roboto, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0px
  label-md:
    fontFamily: Roboto, sans-serif
    fontSize: 12px
    fontWeight: 500
    lineHeight: "1"
    letterSpacing: 0.05em
  label-sm:
    fontFamily: Roboto, sans-serif
    fontSize: 10px
    fontWeight: 500
    lineHeight: "1"
    letterSpacing: 0.08em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  xl: 0px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: transparent
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    borderColor: "{colors.outline}"
  button-primary-hover:
    backgroundColor: "{colors.outline}"
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    borderColor: "{colors.outline}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: 24px
    borderColor: transparent
  card-dark:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    padding: 24px
    borderColor: "{colors.outline}"
  input-field:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.secondary}"
    typography: "{typography.body-sm}"
  link-hover:
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.background}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.background}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-success:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
motion:
  duration-short: 200ms
  duration-medium: 500ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.05)
  md: 0 4px 12px rgba(0,0,0,0.05)
  lg: 0 12px 24px rgba(0,0,0,0.08)
---

## Overview

Evergreen Capital employs a highly sophisticated, editorial visual identity that mirrors the prestige of a traditional family office. The design pairs deep forest greens with warm alabaster and muted sage tones to project institutional-grade trust, precision, and wealth preservation. It evokes a sense of calm, elite financial stewardship and structured, long-term stability.

## Colors

The color strategy establishes a prestigious, editorial aesthetic by contrasting deep forest greens with warm, organic neutrals. This high-contrast palette mimics premium print publications, using rich dark tones for structural weight and soft alabasters to maintain readability and breathing room.

*   `colors.primary` (#182521): Deep forest green that serves as the dominant brand color, establishing stability and prestige.
*   `colors.secondary` (#7F908B): Muted sage green used for secondary text, labels, and supporting UI elements.
*   `colors.accent` (#00D695): Vibrant mint green used sparingly for positive financial indicators and success states.
*   `colors.background` (#F6F3EE): Warm alabaster off-white used for light section backgrounds to maintain an organic, premium feel.
*   `colors.surface` (#EBE6E0): Warm sand tone used for container backgrounds and subtle structural blocks.
*   `colors.surface-dim` (#182521): Dark forest green used as a dark surface variant for high-contrast editorial sections.
*   `colors.on-primary` (inferred) (#F6F3EE): Warm alabaster text color paired with dark forest green backgrounds for optimal readability.
*   `colors.on-surface` (inferred) (#182521): Dark forest green text color used on light sand and alabaster surfaces.
*   `colors.outline` (#C0CAC7): Light sage gray used for borders, dividers, and subtle structural lines.
*   `colors.error` (#FF5733): Vibrant coral red used for error states and critical alerts.

## Typography

The typography pairs the classic, editorial elegance of Playfair Display with the clean, highly legible structure of Roboto. This combination strikes a balance between traditional prestige and modern, data-driven precision.

*   `typography.display-lg` (Playfair Display, serif): Massive display type used exclusively for high-impact hero headlines.
*   `typography.display-md` (inferred) (Playfair Display, serif): Medium display type for prominent section headers.
*   `typography.headline-lg` (Playfair Display, serif): Large headline for primary section titles.
*   `typography.headline-md` (inferred) (Playfair Display, serif): Medium headline for sub-sections and feature titles.
*   `typography.headline-sm` (Playfair Display, serif): Small headline for card titles and FAQ questions.
*   `typography.body-md` (Roboto, sans-serif): Standard body text for paragraphs and descriptive copy.
*   `typography.body-sm` (Roboto, sans-serif): Small body text for secondary descriptions and metadata.
*   `typography.label-md` (inferred) (Roboto, sans-serif): Uppercase labels and small navigation links.
*   `typography.label-sm` (inferred) (Roboto, sans-serif): Micro-labels and tiny metadata tags.

## Layout

*   The layout mimics a premium print editorial, utilizing generous vertical spacing built on a scale from `spacing.xs` to `spacing.2xl` with a standard 16px gutter.
*   The observed top-to-bottom section order is: nav, hero, features, use-cases, faq, and footer.
*   The hero composition pattern features a centered, massive serif headline set against a dark forest green mountain landscape background, anchored by a single sharp-bordered primary CTA.
*   Sections alternate between deep forest green (`colors.primary`) and warm alabaster (`colors.background`) to segment content naturally.
*   Responsive behavior follows a mobile-first approach where navigation collapses into a clean drawer, and multi-column feature grids stack vertically on smaller viewports.

## Elevation & Depth

This brand relies primarily on flat design and color contrast to convey depth, avoiding heavy shadows to maintain a clean, modern, and editorial aesthetic.

*   `elevation.sm` (inferred): Subtle card lift or low-level interactive hover states.
*   `elevation.md` (inferred): Dropdowns, popovers, and floating navigation elements.
*   `elevation.lg` (inferred): High-level overlays, modals, and slide-out drawers.

## Shapes

A strict sharp-corner philosophy is applied across the entire interface to project institutional-grade precision, structure, and seriousness. All standard structural and interactive components—including buttons, cards, and input fields—utilize `rounded.sm` (0px) to maintain a rigid, architectural grid.

The only exception to this rule is the use of `rounded.full` (9999px), which is reserved exclusively for pill-shaped badges or specialized circular UI indicators. Standard container elements must never use rounded corners.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`

### button-primary
A transparent-backed button featuring `colors.on-primary` text, a `colors.outline` border, and sharp `rounded.sm` corners. It uses `typography.body-sm` and is padded with 12px vertical and 24px horizontal spacing. Use this as the main call-to-action in hero sections and high-contrast dark blocks.

### button-primary-hover
The active hover state for the primary button, transitioning to a solid `colors.outline` background with `colors.primary` text. It maintains the same padding, sharp corners, and typography as the default state. Use this to provide clear, tactile feedback on user interaction.

### button-secondary
A transparent button with `colors.primary` text and a matching `colors.primary` border. It uses `typography.body-sm` and `rounded.sm` corners. Use this for secondary actions on light backgrounds where the primary button is too dominant.

### card
A content container featuring a warm `colors.surface` background, `colors.on-surface` text, and sharp `rounded.sm` corners. It includes 24px of internal padding (`spacing.lg`) and has no border. Use this to group related information, features, or services on light-themed pages.

### card-dark
An editorial container variant featuring a deep `colors.surface-dim` background, `colors.on-primary` text, and a thin `colors.outline` border. It uses `rounded.sm` corners and 24px of internal padding. Use this to highlight premium offerings or to create visual contrast within a light section.

### input-field
A text input container with a `colors.background` fill, `colors.on-surface` text, and a `colors.outline` border. It features `rounded.sm` corners and 12px by 16px padding. Use this for form inputs, search bars, and contact fields.

### input-field-focus
The active state of the input field, which transitions the border color to `colors.primary` to indicate focus. It retains all other properties of the default input field. Use this to guide user focus during data entry.

### link
An inline text link utilizing `colors.secondary` and `typography.body-sm`. It is designed to sit cleanly within paragraphs or as standalone text actions. Use this for secondary navigation or inline references.

### link-hover
The hover state of the inline link, which transitions the text color to `colors.primary` to indicate interactivity. It maintains `typography.body-sm` styling. Use this to provide clear visual feedback on text links.

### badge
A small metadata tag with a `colors.secondary` background, `colors.background` text, and `rounded.sm` corners. It uses `typography.label-sm` with tight 4px by 8px padding. Use this for neutral tags, categories, or status indicators.

### badge-error
A specialized alert tag featuring a `colors.error` background and `colors.background` text. It maintains `rounded.sm` corners and `typography.label-sm` styling. Use this to flag system errors, critical alerts, or negative financial indicators.

### badge-success
A positive status tag featuring a vibrant `colors.accent` background and `colors.primary` text. It uses `rounded.sm` corners and `typography.label-sm` styling. Use this to highlight positive financial performance, successful actions, or active statuses.

### divider
A thin structural line with a height of 1px and a background color of `colors.outline`. Use this to separate content blocks, list items, or editorial sections without adding visual clutter.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` as the background for high-impact editorial sections to establish prestige. | Never use rounded corners or pill shapes for `{components.button-primary}` or `{components.card}`. |
| Apply `{typography.display-lg}` exclusively for main hero headlines to maintain editorial hierarchy. | Do not use vibrant accent colors like `{colors.accent}` for large background areas. |
| Maintain a strict `{rounded.sm}` (0px) border-radius on all interactive components like `{components.button-primary}`. | Avoid applying heavy drop shadows like `elevation.lg` to standard `{components.card}` elements. |
| Use `{colors.outline}` for thin, elegant `{components.divider}` lines to separate content blocks. | Do not pair low-contrast text colors with `{colors.surface-dim}` backgrounds. |
| Pair `{colors.on-primary}` text with `{colors.primary}` backgrounds to ensure high contrast and readability. | Avoid mixing sans-serif fonts like `{typography.body-md}` into main editorial headlines. |
| Utilize `{components.link}` with `{colors.secondary}` for inline text links. | Do not use `{colors.error}` for standard non-critical badges or UI highlights. |
| Group related features inside `{components.card}` using `{colors.surface}` for background containment. | Do not exceed `{spacing.md}` for padding inside `{components.input-field}` elements. |
| Apply `{components.badge-success}` with `{colors.accent}` only for positive financial indicators and active states. | Never style `{components.button-secondary}` with a background color other than transparent. |

## Content Style

*   **CTA Style:** Call-to-action labels must be direct, professional, and action-oriented. Use imperative verbs that imply exclusive access or strategic action, such as "Request Intro", "Explore Our Approach", or "Schedule a Strategy Call", keeping text concise and authoritative.
*   **Heading Tone:** Headlines must sound sophisticated, institutional, and benefit-driven. Focus phrasing on wealth preservation, tax efficiency, and long-term compounding, avoiding casual language or hype.
*   **Copy Density:** Maintain a highly structured, scannable layout. Use clean bulleted lists and short, well-spaced paragraphs to convey complex financial strategies without overwhelming the reader. Generous whitespace should surround all text blocks.

## Imagery & Icons

Imagery must consist of high-contrast, moody photographic landscapes, specifically featuring majestic mountains shrouded in mist. These images should be treated with deep forest green overlays matching `{colors.primary}` to integrate them seamlessly into the brand's dark editorial palette. Icons, when used, must feature thin, precise lines and sharp angles, aligning with the strict `{rounded.sm}` geometry of the interface.