Quartr

---
version: alpha
name: Quartr
description: The world’s leading IR data layer—structured for AI, delivered in real-time.
colors:
  primary: "#101214"
  secondary: "#7c7c7c"
  neutral: "#fbfcfc"
  brand-disco-ball: "#d4d4d4"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: InterVariable
    fontSize: 58px
    fontWeight: 550
    lineHeight: 1.2
    letterSpacing: -0.05em
  headline-md:
    fontFamily: InterVariable
    fontSize: 28px
    fontWeight: 550
    lineHeight: 1.2
    letterSpacing: -0.04em
  headline-sm:
    fontFamily: InterVariable
    fontSize: 21px
    fontWeight: 550
    lineHeight: 1.4
    letterSpacing: -0.03em
  headline-xs:
    fontFamily: InterVariable
    fontSize: 19px
    fontWeight: 550
    lineHeight: 1.4
    letterSpacing: -0.03em
  body-md:
    fontFamily: InterVariable
    fontSize: 17px
    fontWeight: 450
    lineHeight: 1.4
    letterSpacing: 0.003em
rounded:
  sm: 2px
  md: 6px
  lg: 8px
spacing:
  xs: 6px
  sm: 16px
  md: 32px
  lg: 80px
  xl: 160px
components:
  button-primary:
    backgroundColor: "#090a0c"
    textColor: "#eef0f1"
    rounded: "{rounded.md}"
    padding: 10px 10px
    height: 40px
  button-secondary:
    backgroundColor: "#485259"
    textColor: "#485259"
    rounded: "{rounded.sm}"
    padding: 10px 10px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: 16px
---

# Quartr: Marble Hero Stage with Newspaper-Tight Headlines

## Overview

Quartr's interface is built for institutional finance: serious, exact, and low-friction. The palette is nearly achromatic—ink on paper—so data and product UI carry the color. Typography is tight and modern, spacing is generous at section level and compact inside components. The overall feel is deliberate and professional rather than flashy, prioritizing clarity, credibility, and speed of comprehension.

## Colors

- **primary (#101214):** Core ink for headlines, body text, and icons.
- **secondary (#7c7c7c):** Support text, captions, and subdued metadata.
- **neutral (#fbfcfc):** Page and card background; the default surface.
- **brand-disco-ball (#d4d4d4):** Subtle borders, dividers, and hairlines.
- **surface ({colors.neutral}):** Alias to neutral; use for all standard surfaces.
- **on-surface ({colors.primary}):** Alias to primary; default text on light surfaces.

## Typography

InterVariable is the primary family across headings and body. It is self-hosted here (type: custom), so agents should not rely on it unless provided. Recommended substitutes: Inter (Google Fonts), IBM Plex Sans (Google Fonts), or Source Sans 3 (Google Fonts).
- Headline-lg (58px/1.2, 550, -0.05em): Hero and major section headlines—tight tracking for impact.
- Headline-md (28px/1.2, 550, -0.04em): Secondary section headers and card titles.
- Headline-sm (21px/1.4, 550, -0.03em): Feature grid titles, testimonials headings.
- Headline-xs (19px/1.4, 550, -0.03em): Minor subheads and inline callouts.
- Body-md (17px/1.4, 450, 0.003em): All paragraph copy, links, and UI labels.
Noto Color Emoji (Google) may be loaded as emoji fallback when required.

## Layout

Spacing uses a compact-to-expansive scale: 6, 16, 32, 80, 160px. Use lg (80px) and xl (160px) for section top/bottom rhythm; md (32px) for inner section gutters and grid gaps; sm (16px) for card padding and list spacing; xs (6px) for micro gaps between controls. Content density is high in components and open at section level. Grids typically present as two-up or four-up on desktop, collapsing to single column with md (32px) vertical gaps on small screens.

## Elevation & Depth

Depth is mostly tonal with light strokes; shadows are restrained. Use sm shadow for subtle separation on cards and sticky UI: rgba(0,0,0,0.06) 0 0 0 1px, rgba(0,0,0,0.06) 0 1px 2px -1px, rgba(0,0,0,0.04) 0 2px 4px 0. Use md shadow sparingly for overlays or the hero stage: rgba(0,0,0,0.01) 0 13px 5px, rgba(0,0,0,0.03) 0 7px 4px, rgba(0,0,0,0.05) 0 3px 3px, rgba(0,0,0,0.06) 0 1px 2px. Larger elevations are intentionally none; preference goes to borders (#d4d4d4) and whitespace.

## Shapes

Corners are subtle and utilitarian: sm 2px for chips or small UI; md 6px for buttons and inputs; lg 8px for cards and media frames. Radii communicate hierarchy—bigger blocks get lg, interactive controls get md, and micro-elements keep square to slightly rounded. Avoid exceeding lg to maintain the system's rectilinear feel.

## Components

The tokens define a small, strict component set. Build from these, then apply the named page patterns below.

- Button—Primary: 40px tall with 10px x 10px padding, radius 6px; background #090a0c, text #eef0f1. Use for key CTAs like "Book demo."
- Button—Secondary: 40px tall, radius 2px; background and text #485259 for intentionally muted actions. Use with care on light surfaces.
- Button—Link: Text-only action using on-surface color (#101214), radius 0.
- Card: Background #fbfcfc, text #101214, radius 8px, padding 16px; apply sm shadow or a #d4d4d4 border when separation is needed.

### Marble Hero Product Stage
- Composition: Headline-lg (58px) left; supporting copy Body-md (17px) right; primary CTA. Below, a wide card with lg (8px) radius contains the product screenshot atop a marble image. Section spacing: xl (160px) top/bottom.

### Customer Marquee
- A horizontally repeating text-logo strip (e.g., "Stifel", "Yahoo!"). Set items in Headline-xs (19px) or Body-md (17px), weight 550, spaced with md (32px) gaps and separated by thin #d4d4d4 dividers as needed.

### Two Offerings Split (Pro vs API)
- Two cards side-by-side with Headline-md (28px) titles and Body-md copy. Use md (32px) internal padding and lg (80px) section gutters. Primary or link buttons per card.

### Feature Grid
- Four compact features in two columns. Each feature: Headline-sm (21px) title and Body-md description. Use sm (16px) vertical gaps inside items and md (32px) grid gap.

### MCP Callout
- Single-column section with Headline-md and short Body-md, followed by a link. Surround with lg (80px) vertical spacing and a #d4d4d4 top border to distinguish from adjacent content.

### Testimonials
- Blockquote in Body-md with stronger Headline-sm lead-in. Attribution on a new line in secondary (#7c7c7c). Place inside a card (radius 8px) with sm shadow or border.

### Stats Strip
- Four inline KPIs (e.g., Companies covered, Markets covered). Use Headline-xs labels in #7c7c7c and larger numbers in Headline-md or -sm. Separate columns with #d4d4d4 dividers; md (32px) gaps.

### Newsletter + Mobile App CTAs
- Simple two blocks: one for app download, one for "Edge" sign-up. Use card pattern with lg (8px) radius, Body-md copy, and a primary or link button.

## Do's and Don'ts

- Do keep text #101214 on #fbfcfc for primary copy; introduce color via data or media, not UI chrome.
- Do use negative tracking on headlines exactly as specified for the compact, newspaper-like tone.
- Do space sections with lg (80px)–xl (160px) and use md (32px) inside components for breathable rhythm.
- Don't apply heavy or colored shadows; stick to the provided sm/md recipes or a #d4d4d4 border.
- Don't exceed lg (8px) corner radius; roundness is restrained by design.
- Don't rely on secondary (#7c7c7c) for critical actions; contrast and priority may suffer.

## Agent Prompt Guide

Quick reference — Text: #101214; Background: #fbfcfc; Border: #d4d4d4; Accent/CTA: #090a0c.

1) Build the hero
- Container background #fbfcfc, padding-top/bottom 160px.
- Left: h1 set in Inter (Google) at 58px, weight 550, line-height 1.2, letter-spacing -0.05em, color #101214.
- Right: paragraph at 17px, weight 450, line-height 1.4, color #101214.
- Primary button: 40px height; padding 10px 10px; radius 6px; background #090a0c; text #eef0f1.
- Below: card with radius 8px, padding 16px, box-shadow "rgba(0,0,0,0.06) 0 0 0 1px, rgba(0,0,0,0.06) 0 1px 2px -1px, rgba(0,0,0,0.04) 0 2px 4px 0" for the product image.

2) Two-offering split
- Section padding 80px top/bottom; grid gap 32px.
- Each card: background #fbfcfc; radius 8px; padding 16px; title at 28px/1.2, -0.04em; body 17px/1.4.
- Actions: primary button (#090a0c on #eef0f1) or link button (text #101214).

3) Feature grid (2x2)
- Grid with two columns, gap 32px; item vertical spacing 16px.
- Feature title: 21px, weight 550, letter-spacing -0.03em.
- Description: 17px body.
- Optional rule: 1px border #d4d4d4 around the grid or per item.

4) Testimonial card
- Card radius 8px; padding 16px; border 1px solid #d4d4d4 (or sm shadow as above).
- Quote set in 17px body; leading sentence can use 21px headline-sm.
- Attribution in #7c7c7c.

5) Stats strip
- Four columns with 32px gaps and optional dividers #d4d4d4.
- Labels: 19px headline-xs in #7c7c7c.
- Values: 28px headline-md in #101214.

## Similar Brands

- AlphaSense — Similar black-on-white seriousness and research-first messaging; AlphaSense leans more blue and uses heavier imagery.
- PitchBook — Institutional finance tone with restrained color; PitchBook relies on brand blue where Quartr stays nearly achromatic.
- Bloomberg Enterprise — Dense, credible typography and data-led storytelling; Bloomberg's UI is darker and more terminal-like.
- Perplexity — Minimal, typographic interface and monochrome palette; Perplexity is conversational-first, where Quartr is data-source-first.

:root {
  /* Colors */
  --color-primary: #101214;
  --color-secondary: #7c7c7c;
  --color-neutral: #fbfcfc;
  --color-brand-disco-ball: #d4d4d4;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 58px;
  --text-headline-lg-weight: 550;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.05em;
  --text-headline-md-size: 28px;
  --text-headline-md-weight: 550;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.04em;
  --text-headline-sm-size: 21px;
  --text-headline-sm-weight: 550;
  --text-headline-sm-leading: 1.4;
  --text-headline-sm-tracking: -0.03em;
  --text-headline-xs-size: 19px;
  --text-headline-xs-weight: 550;
  --text-headline-xs-leading: 1.4;
  --text-headline-xs-tracking: -0.03em;
  --text-body-md-size: 17px;
  --text-body-md-weight: 450;
  --text-body-md-leading: 1.4;
  --text-body-md-tracking: 0.003em;
  --font-intervariable: "InterVariable";

  /* Rounded */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 80px;
  --spacing-xl: 160px;

  /* Components */
  --button-primary-background-color: #090a0c;
  --button-primary-text-color: #eef0f1;
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 10px 10px;
  --button-primary-height: 40px;
  --button-secondary-background-color: #485259;
  --button-secondary-text-color: #485259;
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 10px 10px;
  --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": "The world’s leading IR data layer—structured for AI, delivered in real-time.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.063,
          0.071,
          0.078
        ],
        "hex": "#101214"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.486,
          0.486,
          0.486
        ],
        "hex": "#7c7c7c"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.984,
          0.988,
          0.988
        ],
        "hex": "#fbfcfc"
      }
    },
    "brand-disco-ball": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.831,
          0.831,
          0.831
        ],
        "hex": "#d4d4d4"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.984,
          0.988,
          0.988
        ],
        "hex": "#fbfcfc"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.063,
          0.071,
          0.078
        ],
        "hex": "#101214"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 32,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 80,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 160,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "InterVariable",
        "fontSize": {
          "value": 58,
          "unit": "px"
        },
        "fontWeight": 550,
        "letterSpacing": {
          "value": -0.05,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "InterVariable",
        "fontSize": {
          "value": 28,
          "unit": "px"
        },
        "fontWeight": 550,
        "letterSpacing": {
          "value": -0.04,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "InterVariable",
        "fontSize": {
          "value": 21,
          "unit": "px"
        },
        "fontWeight": 550,
        "letterSpacing": {
          "value": -0.03,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "InterVariable",
        "fontSize": {
          "value": 19,
          "unit": "px"
        },
        "fontWeight": 550,
        "letterSpacing": {
          "value": -0.03,
          "unit": "em"
        }
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "InterVariable",
        "fontSize": {
          "value": 17,
          "unit": "px"
        },
        "fontWeight": 450,
        "letterSpacing": {
          "value": 0.003,
          "unit": "em"
        }
      }
    }
  }
}