---
version: alpha
name: getquin-design-analysis
category: Fintech & Crypto
website: https://www.getquin.com
description: A product design system wearing a marketing site. The canvas is pure black, containers
  are a single flat grey rectangle at 4px, and the whole interface runs on one 4px unit with exactly
  two radii and one shadow used once. Body copy sits in grey while headlines stay white, and the
  primary button is white with a black label — the loudest thing available on this ground. Beneath
  120 semantic tokens lies a palette named like a paint catalogue — Sambuca, Rurikon Blue, Auro
  Metal Saurus.

colors:
  background: "#000000"
  background-raised: "#212122"
  background-band: "#080808"
  outline: "#2b2b2c"
  divider: "#2b2b2c"
  list-hover: "#2b2b2c"
  overlay: "rgba(0, 0, 0, 0.8)"
  text-primary: "#ffffff"
  text-secondary: "#999999"
  text-disabled: "#373737"
  text-contrast: "#000000"
  icon-primary: "#ffffff"
  icon-secondary: "#999999"
  icon-background: "#373737"
  gray-900: "#151515"
  gray-600: "#373737"
  gray-500: "#424141"
  gray-400: "#787777"
  gray-300: "#999999"
  gray-100: "#f2f2f2"
  gray-50: "#f9f9f9"
  button-primary: "#ffffff"
  button-primary-label: "#000000"
  button-primary-disabled: "#373737"
  button-primary-border: "#373737"
  button-action: "#253bbd"
  button-action-disabled: "rgba(37, 59, 189, 0.3)"
  button-warning: "#f13824"
  button-warning-disabled: "rgba(241, 56, 36, 0.3)"
  button-secondary: "#999999"
  button-secondary-disabled: "#787777"
  button-inverted-border: "#cccccc"
  button-link: "#6a80ff"
  tag-green: "#59e184"
  tag-green-bg: "#2c4234"
  tag-red: "#f13824"
  tag-red-bg: "#30110d"
  tag-yellow: "#efa043"
  tag-yellow-bg: "#30200d"
  tag-blue: "#6a80ff"
  tag-blue-bg: "#0f184c"
  tag-violet: "#7e51fd"
  tag-violet-bg: "#332a4e"
  tag-gray: "#999999"
  tag-gray-bg: "#2b2b2c"
  accent-malachite: "#59e184"
  accent-aquamarine: "#4de4a6"
  accent-turquoise: "#33e0c1"
  accent-sky: "#57deea"
  accent-violet: "#7e51fd"
  accent-orchid: "#b26eb3"
  accent-jaffa: "#efa043"
  accent-golden: "#ffe600"
  accent-venetian: "#ef5343"
  accent-klein-blue: "#001fa3"
  accent-royal-indigo: "#3f4b9d"
  accent-rurikon: "#172642"
  accent-chinese-black: "#0a1225"

typography:
  marketing-hero:
    fontFamily: "Unica77LL, Inter, Helvetica Neue, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0em
  headline-hero:
    fontFamily: "Unica77LL, Inter, Helvetica Neue, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0em
  headline-large:
    fontFamily: "Unica77LL, Inter, Helvetica Neue, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.35
    letterSpacing: 0em
  headline-medium:
    fontFamily: "Unica77LL, Inter, Helvetica Neue, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.35
    letterSpacing: 0em
  headline-small:
    fontFamily: "Unica77LL, Inter, Helvetica Neue, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0em
  headline-tiny:
    fontFamily: "Unica77LL, Inter, Helvetica Neue, sans-serif"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0em
  body-large:
    fontFamily: "Unica77LL, Inter, Helvetica Neue, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body:
    fontFamily: "Unica77LL, Inter, Helvetica Neue, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0em
  body-small:
    fontFamily: "Unica77LL, Inter, Helvetica Neue, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0em
  body-tiny:
    fontFamily: "Unica77LL, Inter, Helvetica Neue, sans-serif"
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
  link:
    fontFamily: "Unica77LL, Inter, Helvetica Neue, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  mono:
    fontFamily: "Unica77MonoLL, Unica77LL, ui-monospace, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0em

rounded:
  none: 0px
  default: 4px
  media: 6px
  circle: 50%

spacing:
  unit: 4px
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 64px

components:
  header:
    backgroundColor: "{colors.background}"
    textColor: "{colors.text-primary}"
    typography: "{typography.link}"
    height: 48px
  button-primary:
    backgroundColor: "{colors.button-primary}"
    textColor: "{colors.button-primary-label}"
    typography: "{typography.headline-small}"
    rounded: "{rounded.default}"
    height: 40px
    padding: 0 16px
  button-primary-disabled:
    backgroundColor: "{colors.button-primary-disabled}"
    textColor: "{colors.text-secondary}"
    rounded: "{rounded.default}"
  button-outlined:
    backgroundColor: transparent
    textColor: "{colors.text-primary}"
    borderColor: "{colors.text-disabled}"
    typography: "{typography.headline-small}"
    rounded: "{rounded.default}"
    height: 40px
    padding: 0 16px
  button-raised:
    backgroundColor: "{colors.background-raised}"
    textColor: "{colors.text-primary}"
    borderColor: "{colors.text-disabled}"
    typography: "{typography.headline-small}"
    rounded: "{rounded.default}"
    height: 40px
    padding: 0 16px
  button-action:
    backgroundColor: "{colors.button-action}"
    textColor: "{colors.text-primary}"
    typography: "{typography.headline-small}"
    rounded: "{rounded.default}"
    height: 40px
    padding: 0 16px
  button-warning:
    backgroundColor: "{colors.button-warning}"
    textColor: "{colors.text-primary}"
    typography: "{typography.headline-small}"
    rounded: "{rounded.default}"
    height: 40px
    padding: 0 16px
  widget:
    backgroundColor: "{colors.background-raised}"
    borderColor: "{colors.outline}"
    rounded: "{rounded.default}"
    padding: "{spacing.base}"
  tag:
    backgroundColor: "{colors.tag-green-bg}"
    textColor: "{colors.tag-green}"
    typography: "{typography.body-small}"
    rounded: "{rounded.default}"
  text-link:
    backgroundColor: transparent
    textColor: "{colors.button-link}"
    typography: "{typography.body}"
  footer:
    backgroundColor: "{colors.divider}"
    textColor: "{colors.text-primary}"
    typography: "{typography.link}"
---

## Overview

getquin is **a product design system that happens to be running a marketing site**. The token names
give it away: `widget-background`, `list-hover`, `checkbox-unchecked-bg`, `progress-bar-dark-gray`,
a complete tag palette, and a type ladder whose smallest step is 8px. These are the concerns of a
portfolio dashboard, and the marketing pages are built from the same parts.

The canvas is `{colors.background}` — **pure black**, not the near-black most dark interfaces
settle for. Everything raised sits on `{colors.background-raised}` (#212122) inside a 1px
`{colors.outline}` rule at `{rounded.default}` (4px), and that single rectangle is the only
container in the system. There is one shadow in the entire stylesheet and it appears exactly once.

Two decisions carry the reading. Body copy is `{colors.text-secondary}` (#999) while headlines stay
`{colors.text-primary}` (#fff), so hierarchy comes from brightness rather than size — the marketing
pages need only two type steps to feel structured. And `{component.button-primary}` is white with a
black label: on this ground, white is the loudest value available, so it goes to the action rather
than to the brand.

**Key Characteristics:**
- Pure black canvas; a single raised grey (#212122) inside a 1px outline is the only container.
- One spacing unit (4px), two radii (4px, 6px), one shadow — used once on the whole page.
- Body copy is grey, headlines white. Brightness is the hierarchy.
- The primary button is white with a black label; the brand blue is a *link* colour.
- Two parallel type ladders, `headline-*` and `body-*`, sharing sizes down to 8px.
- Marketing overrides the app scale: headlines render at 48px where the token ladder stops at 32px.
- A complete dark-mode tag system: saturated text on a desaturated ground of the same hue.
- ~120 semantic `--palette-*` tokens sit on a base palette named like a paint catalogue.
- One easing everywhere: `cubic-bezier(.645, .045, .355, 1)` at 0.2s, on background-color.

## Colors

> **Source pages analyzed:** the Portfolio Tracker product page, the pricing page and the
> security page, plus the header and footer chrome shared across all three.

### Brand & Accent
There is no single brand accent in the chrome. The blue that exists is functional:
- **Link Blue** (`{colors.button-link}` — #6a80ff): Text links and the focused-input border. The most "brand-like" colour, and it is a link colour.
- **Action Blue** (`{colors.button-action}` — #253bbd): A deep blue reserved for a distinct action class, not for the main CTA.
- **Warning Red** (`{colors.button-warning}` — #f13824): Destructive actions.
- The base palette carries a long list of named hues — Klein Blue, Royal Indigo, Turquoise, Jaffa, Golden Yellow, Orchid — that feed charts and illustration rather than interface chrome.

### Surface
- **Canvas** (`{colors.background}` — #000000): The page. Committed pure black.
- **Raised** (`{colors.background-raised}` — #212122): Every card, panel and widget.
- **Band** (`{colors.background-band}` — #080808): A barely-there section band, one step off the canvas.
- **Outline / Divider / List hover** (`{colors.outline}` — #2b2b2c): One value doing three jobs — the container edge, the rule between rows, and the hovered row fill. It is also the footer's ground.
- **Overlay** (`{colors.overlay}` — rgba(0,0,0,.8)): Behind modals.

### Text
- **Primary** (`{colors.text-primary}` — #ffffff): Headlines and interactive labels.
- **Secondary** (`{colors.text-secondary}` — #999999): **Default body copy**, sub-labels, footer headings.
- **Disabled** (`{colors.text-disabled}` — #373737): Disabled text, and the border on outlined controls.
- **Contrast** (`{colors.text-contrast}` — #000000): Text on a light fill — that is, on the primary button.

### Greys
A six-step neutral ramp under the semantic layer: `{colors.gray-900}` #151515 · `{colors.gray-600}`
#373737 · `{colors.gray-500}` #424141 · `{colors.gray-400}` #787777 · `{colors.gray-300}` #999999,
then a light pair `{colors.gray-100}` #f2f2f2 and `{colors.gray-50}` #f9f9f9 that the dark surfaces
never use — evidence of a light theme the site does not ship.

### Tags
The most complete part of the system, and pure dark-mode craft: each hue pairs a saturated text
colour with a desaturated ground of the *same* hue, so a label reads as coloured without glowing.

| Tag | Text | Ground |
|---|---|---|
| Green | `{colors.tag-green}` #59e184 | `{colors.tag-green-bg}` #2c4234 |
| Red | `{colors.tag-red}` #f13824 | `{colors.tag-red-bg}` #30110d |
| Yellow | `{colors.tag-yellow}` #efa043 | `{colors.tag-yellow-bg}` #30200d |
| Blue | `{colors.tag-blue}` #6a80ff | `{colors.tag-blue-bg}` #0f184c |
| Violet | `{colors.tag-violet}` #7e51fd | `{colors.tag-violet-bg}` #332a4e |
| Gray | `{colors.tag-gray}` #999999 | `{colors.tag-gray-bg}` #2b2b2c |

### Brand Gradient
**No gradient tokens.** Depth is the two-step surface change plus the outline. Nothing ramps.

## Typography

### Font Family
- **Unica77LL** — the only text face, weights 400 and 700. A neo-grotesque licensed from Lineto.
- **Unica77MonoLL** — the monospace companion, published as `{typography.mono}` but not observed in use on the analyzed pages.

### Hierarchy

The system publishes **two parallel ladders** that share sizes: `headline-*` at weight 700 and
`default-*` at weight 400. Picking a step therefore means picking a weight, not a size.

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.marketing-hero}` | 48px | 700 | 1.1 | **Marketing only.** Every `h1` and top-level `h2` on the analyzed pages |
| `{typography.headline-hero}` | 32px | 700 | 1.25 | The largest step the token ladder itself defines |
| `{typography.headline-large}` | 22px | 700 | 1.35 | Plan names, card titles |
| `{typography.headline-medium}` | 15px | 700 | 1.35 | Section headings |
| `{typography.headline-small}` | 13px | 700 | 1.25 | **Button labels**, FAQ questions |
| `{typography.headline-tiny}` | 10px | 700 | 1.25 | Micro labels |
| `{typography.body-large}` | 15px | 400 | 1.5 | **Default paragraph**, in `{colors.text-secondary}` |
| `{typography.body}` | 13px | 400 | 1.25 | Dense UI copy, table cells |
| `{typography.body-small}` | 10px | 400 | 1.25 | Captions, tag labels |
| `{typography.body-tiny}` | 8px | 400 | 1 | Micro annotations — the smallest published step |
| `{typography.link}` | 16px | 400 | 1.5 | Navigation and footer links |

### Principles
- **Zero tracking everywhere.** No step carries a letter-spacing value, at any size. This is unusual at 48px and is part of why the headlines read as plain rather than styled.
- **Only two weights.** 400 and 700. There is no medium, and no 600 in the published set.
- **Line-height is a four-value token set** — 1, 1.25, 1.35, 1.5 — applied by step rather than computed.
- **Marketing breaks the ladder, deliberately.** 48px exists nowhere in the tokens; the product ladder stops at 32px. Treat 48px as a marketing-only step.
- **Body copy is grey.** Setting paragraphs in `{colors.text-primary}` flattens the page — the contrast between white headline and grey body is doing the structural work.

### Note on Font Substitutes
Unica77 is licensed from Lineto. It is a Haas Unica revival — a neo-grotesque sitting between
Helvetica and Univers, slightly narrower than Helvetica with open apertures.

- Closest free substitute: **Inter** at 400/700. Keep tracking at zero; Inter's default fit is close enough that adding any would break the plain quality.
- **Archivo** is a nearer width match if the layout depends on line breaks holding.
- Avoid Roboto and Open Sans — both are humanist enough to lose the neutral, instrument-like tone.
- For `{typography.mono}`, **JetBrains Mono** or **IBM Plex Mono** at 400.

## Layout

### Spacing System
- **One published unit:** `--spacing: 4px`. Everything is a multiple of it; there is no named t-shirt scale in the token set.
- The measured working values are `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 64px.
- `{component.widget}` padding is `{spacing.base}` (16px) everywhere — cards do not vary their inset by size.

### Grid & Container
| Context | Width |
|---|---|
| Page container | 1280px |
| Card column | ~349–371px |
| Prose blocks | 337 / 475 / 506 / 656px |

The header is a published `48px`, and the system defines `100dvh` and `100vh` helpers — again, app
concerns rather than marketing ones.

### Whitespace Philosophy
Restrained. A 4px unit and a fixed 16px card inset produce a page that is dense by marketing
standards, and the space that exists is vertical rather than around elements. This is a layout
built to hold a dashboard, applied to a landing page.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | Canvas `{colors.background}` | Sections |
| Band | `{colors.background-band}` #080808 | A section one step off black |
| Raised | `{colors.background-raised}` + 1px `{colors.outline}` | **Every container** |
| Overlay | `{colors.overlay}` behind the surface | Modals |
| Shadow | `0 7px 70px rgba(0,0,0,.25)` | The only shadow in the stylesheet — one element |

**Shadow philosophy.** On pure black a cast shadow is invisible, so the system does not use one:
elevation is the two-step surface change plus a lighter outline. The single large soft shadow that
does exist is a decorative glow behind one hero element, not a UI device. If a container needs to
lift, it goes to `{colors.background-raised}` and gains an outline — never a shadow.

### Decorative Depth
- **The outline carries the edge.** `{colors.outline}` is simultaneously the border, the divider and the hover fill, which is why the interface reads as one material.
- **No gradients, no blur.** The header does not blur; it sits on the canvas.

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Full-bleed sections |
| `{rounded.default}` | 4px | **Everything** — buttons, cards, widgets, tags, inputs. 42 of 55 rounded elements |
| `{rounded.media}` | 6px | Images and media frames, the only step above default |
| `{rounded.circle}` | 50% | Avatars, icon buttons — 12 uses |

This is the flattest radius grammar in the collection: **one radius for interface, one for media**.
There is no pill anywhere, which is what makes the buttons read as software rather than marketing.

### Media Geometry
Media sits at `{rounded.media}` (6px). Product screenshots are shown inside
`{component.widget}` frames, so the app UI in the imagery matches the page around it.

## Components

### Top Navigation
**`header`** — a published 48px, ground `{colors.background}`, links in `{typography.link}`
(16px / 400) at `{colors.text-primary}`. No blur, no border, no translucency: it simply sits on
the black.

### Buttons
All variants share the same geometry: **40px tall, `{rounded.default}`, `0 16px` padding,
`{typography.headline-small}` (13px / 700)**. Only the fill changes.

**`button-primary`** — `{colors.button-primary}` (white) with `{colors.button-primary-label}`
(black). The main call to action. Disabled becomes `{component.button-primary-disabled}`.

**`button-outlined`** — transparent with a 1px `{colors.text-disabled}` border and white label.
The standard secondary.

**`button-raised`** — `{colors.background-raised}` fill with the same border. Used where a
secondary action sits directly on the canvas rather than inside a widget.

**`button-action`** — `{colors.button-action}` (#253bbd) with a white label, for a distinct action
class. **`button-warning`** — `{colors.button-warning}` for destructive actions.

Transition on every one: `background-color 0.2s cubic-bezier(.645, .045, .355, 1)`.

### Cards & Containers
**`widget`** — the single container: `{colors.background-raised}` fill, 1px `{colors.outline}`
border, `{rounded.default}`, `{spacing.base}` padding, **no shadow**. Measured identically on every
card across all three surfaces.

### Tags
**`tag`** — `{rounded.default}`, `{typography.body-small}`, one of the six text/ground pairs above.
The tokens are complete but the marketing pages do not use them; they belong to the app.

### Inputs & Forms
The token family is published — `checkbox-unchecked-bg` #212122, `radio-bg` #212122,
`dropdown-focus-background` #787777, `text-type-focused-border` #6a80ff — but no rendered input was
present on the analyzed pages. See `## Known Gaps`.

### Footer
**`footer`** — ground `{colors.divider}` (#2b2b2c), the one place the outline value is used as a
surface. Links in `{typography.link}` at `{colors.text-primary}`; column headings drop to 13px in
`{colors.text-secondary}`.

## Do's and Don'ts

### Do
- Build on pure `{colors.background}`; raise with `{colors.background-raised}` plus a 1px `{colors.outline}`.
- Set body copy in `{colors.text-secondary}` and headlines in `{colors.text-primary}`.
- Give every button 40px height, `{rounded.default}` and `{typography.headline-small}`.
- Make the primary action white with a black label.
- Keep tracking at zero at every size, including 48px.
- Use `{rounded.default}` for interface and `{rounded.media}` for media — nothing else.
- Pair tag text with the ground of its own hue.
- Animate `background-color` over 0.2s on `cubic-bezier(.645, .045, .355, 1)`.

### Don't
- Don't add a shadow to lift a container; change the surface and add the outline.
- Don't reach for a pill radius — the flat 4px is the signal that this is software.
- Don't set paragraphs in white; the grey/white split is the hierarchy.
- Don't introduce a weight between 400 and 700.
- Don't use `{colors.button-action}` as the main CTA — the white button is.
- Don't use the light greys (`{colors.gray-100}`, `{colors.gray-50}`) on a dark surface; they belong to a theme this site does not ship.
- Don't add letter-spacing to the 48px marketing headline.

## Responsive Behavior

### Breakpoints
No breakpoint tokens are published. The layout is container-driven — a 1280px page cap with card
columns around 350px — and the type ladder holds its sizes rather than scaling fluidly. The 48px
marketing headline is the one step that must be reduced by hand at narrow widths.

### Touch Targets
Buttons are 40px, slightly under the 44px convention — a desktop-density choice consistent with the
rest of the system. The mobile apps are separate products.

### Collapsing Strategy
- **Header:** the 48px bar persists; navigation collapses behind a trigger.
- **Cards:** the ~350px column stacks; `{component.widget}` padding stays 16px at every width.
- **Type:** steps hold; only the marketing hero needs reducing.

### Image Behavior
Media keeps `{rounded.media}` across widths and is usually shown inside a `{component.widget}`.

## Iteration Guide

1. Work on one component at a time, addressed by its YAML key (`{component.widget}`, `{component.button-primary}`).
2. Use `{token.refs}` everywhere; never inline a hex once a token exists.
3. Document default and active/pressed states only — never hover.
4. The two rules that define this system: **elevation is a surface change plus an outline, never a shadow**, and **body copy is grey while headlines are white**.
5. There is one radius for interface and one for media. Adding a third breaks the flatness.
6. Everything is a multiple of 4px. If a value is not, it is wrong.
7. Before adding a colour, check the ~120 `--palette-*` tokens — the semantic name almost certainly exists already.

## Known Gaps

- **No rendered form control was observed.** The token family for checkboxes, radios, dropdowns and focused inputs is complete and documented above, but the three analyzed pages contained no input in any state.
- **The tag system was not seen in use.** All six text/ground pairs are published; none appeared on the marketing surfaces. They are documented from tokens, not from a rendered example.
- **No light theme is shipped, but one is implied.** `{colors.gray-100}` and `{colors.gray-50}` exist in the ramp and are unused on every dark surface measured.
- **The app itself was not analyzed.** These findings come from the marketing site; the dashboard behind the login almost certainly exercises far more of the 120-token palette.
- **Spacing above the 4px unit is derived.** getquin publishes a single `--spacing: 4px`; the named steps here are the dominant measured multiples, not published semantics.
- **Motion is thinly represented.** One easing at one duration was observed, on `background-color` only. No reveal, transform or stagger behaviour surfaced on the analyzed pages.
- **`{typography.mono}` was not observed in use.** The face is loaded and the token published; nothing on the analyzed pages rendered in it.