getquin

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.

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.

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

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

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

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.