Quinn Global Tax Law

---
version: alpha
name: Quinn Global Tax Law
description: Protect what’s yours with integrated global tax and legal strategy
colors:
  primary: "#7b3d2c"
  secondary: "#040404"
  tertiary: "#e78745"
  neutral: "#f2ebe3"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Seasonmix
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.016em
  headline-md:
    fontFamily: Seasonmix
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.028em
  headline-sm:
    fontFamily: Neuemontreal
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
  headline-xs:
    fontFamily: Neuemontreal
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
  body-md:
    fontFamily: Seasonmix
    fontSize: 16px
    fontWeight: 400
    lineHeight: 2.82
rounded:
  sm: 4px
  md: 5px
  lg: 8px
spacing:
  xs: 2px
  sm: 16px
  md: 24px
  lg: 32px
  xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#43312d"
    rounded: "{rounded.md}"
    padding: 8px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: 16px
---

# Quinn Global Tax Law: Cartographic Hero with Editorial Serif Tone

## Overview

Quinn Global Tax Law positions itself as a high-rigor, low-friction partner. The interface should feel calm, precise, and navigable—serious without austerity. Use spacious layouts, warm neutrals, and editorial typography to deliver clarity on complex topics. Primary actions are few and obvious; content carries most of the persuasion.

## Colors

- **primary (#7b3d2c):** Deep brown for headlines, key text, icons, and borders.
- **secondary (#040404):** Near-black for dense, image-led panels and dark sections.
- **tertiary (#e78745):** Copper accent for primary CTAs, small indicators, and data highlights.
- **neutral (#f2ebe3):** Warm parchment background for sections and cards.
- **surface ({colors.neutral}):** Default surface for panels and cards, matching Neutral.
- **on-surface ({colors.primary}):** Preferred text color on Neutral/Surface backgrounds.

## Typography

- Seasonmix (custom, display serif) is used for large headlines and, per tokens, the primary body style. It is not freely hosted for agents. Good substitutes: Fraunces (Google Fonts), Playfair Display (Google Fonts), Spectral (Google Fonts).
- Neuemontreal (custom, grotesk sans) is used for small headlines and UI copy. It is also self-hosted and not agent-loadable. Good substitutes: Inter (Google Fonts), Work Sans (Google Fonts), Plus Jakarta Sans (Google Fonts).
- Levels:
  • Headline-lg: 64px/1.2 Seasonmix for hero statements.
  • Headline-md: 36px/1.05 Seasonmix for section headers and big numerals.
  • Headline-sm: 20px/1.2 Neuemontreal for service titles and list heads.
  • Headline-xs: 18px/1.22 Neuemontreal for bylines and small section labels.
  • Body-md: 16px Seasonmix, very generous 2.82 line height for readable long-form copy.

## Layout

Spacing is modular and predictable: 16px (sm) for compact gaps and button paddings, 24px (md) for intra-component gutters, 32px (lg) for block spacing, and 64px (xl) for section padding and split-layout margins. Use a simple two- or three-column grid with 24px gutters to align copy and imagery. Sections often alternate light (Neutral) and dark (Secondary) grounds to establish rhythm. Headlines sit close to supporting text; paragraphs keep the tall 2.82 leading for comfort over long reads.

## Elevation & Depth

No shadows are used at any size. Hierarchy is created by tonal contrast (Neutral vs Secondary grounds), thin borders in Primary, and deliberate overlap (tabs, cards stepping over section edges). Accent color and whitespace carry emphasis instead of elevation effects.

## Shapes

Corners are softly rectilinear. Use 4px for small controls and chips, 5px for primary buttons, and 8px for cards and larger panels. The small radii signal precision; reserve the 8px radius for containers to avoid a toy-like feel.

## Components

Buttons and cards follow these rules:
- Primary Button: background Copper Orange (#e78745), text #43312d, 5px radius, 40px height, 8px × 16px padding.
- Secondary Button: text in Oxide Brown (#7b3d2c), no fill, 4px radius, 40px height, 8px × 16px padding.
- Link Button: text in Oxide Brown (#7b3d2c), 0px radius.
- Card: Parchment background (#f2ebe3), Oxide Brown text, 8px radius, 16px padding.

### Cartographic Hero
A dark Secondary (#040404) canvas with thin Copper Orange linework. Below it, a Parchment split panel: left uses Headline-lg 64px Seasonmix; right column carries short body copy and one primary button.

### Split Intro Panel
Two columns on Surface: large serif statement on the left; compact explanatory text and a CTA on the right. Inner gutters at 24px; outer paddings at 64px.

### Service Index (1–4)
Four items numbered 1–4, each title set in Headline-sm 20px Neuemontreal with brief supporting copy. Use 24px gutters and 32px vertical spacing; end with a secondary or link-style "Explore Services."

### About Strip
Section header in Headline-md 36px Seasonmix followed by a short paragraph and a Secondary or Link button. Lives on Surface with 64px vertical padding.

### Proof Bar (Stats)
A row of KPIs: large numerals in Headline-md 36px with short labels in Headline-xs 18px. Use Primary text on Surface; separate items with 24px gutters.

### Testimonial Card
Quoted paragraph in Body-md 16px with generous 2.82 leading. Name and role in Headline-xs 18px. Card uses 8px radius and 16px padding on Surface.

### Featured Insight
An article card with title (Headline-sm 20px), byline (Headline-xs 18px), and a link-style CTA. Keep ample whitespace and use Primary for all text on Surface.

### Footer Ribbon
Compact navigation on Surface with Primary text, arranged in a single row. 16px spacing between links; no shadows.

## Do's and Don'ts

- Do keep Primary (#7b3d2c) as the dominant text and border color on light surfaces.
- Do reserve Tertiary (#e78745) for CTAs and small highlights; one primary button per section is typical.
- Do use the tall 2.82 line height for 16px body copy to maintain the brand's spacious editorial feel.
- Do pair light (Neutral) and dark (Secondary) sections to establish hierarchy instead of adding shadows.
- Don't introduce additional accent colors or gradients; Copper Orange is the only accent.
- Don't mix radii on a single element; use 5px on buttons, 8px on cards, 4px on small chips.

## Agent Prompt Guide

Quick color reference — Text: #7b3d2c, Background: #f2ebe3, Border: #7b3d2c, Accent: #e78745.

1) Build a split hero on #f2ebe3: left column h1 in Fraunces 64px/1.2, color #7b3d2c; right column body in Inter 16px/2.82, color #7b3d2c, with one primary button 40px tall, 5px radius, background #e78745, text #43312d.

2) Create a 4-item services grid on #040404: each title in Inter 20px/1.2, color #f2ebe3; numbers styled large but monotone. Use 24px gutters and 32px vertical spacing; end with a link in #f2ebe3.

3) Add a stat bar on #f2ebe3: numerals in Fraunces 36px/1.05, color #7b3d2c; labels in Inter 18px/1.22. Items spaced by 24px, with a 1px border in #7b3d2c around the group if needed.

4) Compose a testimonial card: container #f2ebe3, 8px radius, 16px padding; quote in Fraunces 16px/2.82 #7b3d2c; author line in Inter 18px/1.22.

5) Place a CTA section on #040404 with a single button: headline in Fraunces 36px/1.05 #f2ebe3; primary button 40px tall, 5px radius, background #e78745, text #43312d.

## Similar Brands

- EY (ey.com): Professional, serious tone with restrained accenting; Quinn is warmer, trading EY's yellow/blue for parchment and copper.
- Bench (bench.co): Editorial voice with a limited palette; Quinn is more formal and serif-led, with darker panels.
- Wealthsimple (wealthsimple.com): Warm neutrals and high-contrast type; Quinn uses a deeper brown text color and more conservative layout.
- Clio (clio.com): Legal sector clarity and focus on services; Quinn is more editorial with serif display and fewer CTAs.

:root {
  /* Colors */
  --color-primary: #7b3d2c;
  --color-secondary: #040404;
  --color-tertiary: #e78745;
  --color-neutral: #f2ebe3;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 64px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.016em;
  --text-headline-md-size: 36px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.05;
  --text-headline-md-tracking: -0.028em;
  --text-headline-sm-size: 20px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 2.82;
  --font-seasonmix: "Seasonmix";
  --font-neuemontreal: "Neuemontreal";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 8px;

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #43312d;
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 8px 16px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 16px;
  --button-secondary-height: 40px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-lg);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Protect what’s yours with integrated global tax and legal strategy",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.482,
          0.239,
          0.173
        ],
        "hex": "#7b3d2c"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.016,
          0.016,
          0.016
        ],
        "hex": "#040404"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.906,
          0.529,
          0.271
        ],
        "hex": "#e78745"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.949,
          0.922,
          0.89
        ],
        "hex": "#f2ebe3"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.949,
          0.922,
          0.89
        ],
        "hex": "#f2ebe3"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.482,
          0.239,
          0.173
        ],
        "hex": "#7b3d2c"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 32,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 64,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 5,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Seasonmix",
        "fontSize": {
          "value": 64,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.016,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Seasonmix",
        "fontSize": {
          "value": 36,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.028,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Neuemontreal",
        "fontSize": {
          "value": 20,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Neuemontreal",
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Seasonmix",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}