Piñt Design System

Get DESIGN.md Download View template Works with

Piñt is a warm, dark agency site. It feels like gold foil on black card stock: a soft black page (#0E0D0D), nearly every word in a warm wheat tone (#EAD2AB), and the brand's personality carried by Satoshi, a clean geometric sans used large and calm. Controls are outlined, not filled: 2px wheat pills and 2px wheat boxes. Colour beyond wheat appears only in motion (a violet flood on hover) and in small category tags.

Four signatures make it recognisable:

Wheat on black. All text, borders and icons are #EAD2AB on #0E0D0D. The hero's last word (Concept.) is the only resting text in pure white.
Outline pills with a violet flood. Buttons are 2px wheat outlines (VIEW ALL WORK, BUY PINT NOW, MENU); on hover the large ones get a #8338EC violet shape that slides in behind the label and its corners round off over almost a second.
Full-stop headline triptych. The hero reads Design. Development. Concept. at 115px weight 500, each word ending in a full stop.
Uppercase tracked links over a hairline. Small actions (MORE ABOUT US, VIEW MORE) are 15px bold uppercase with 2px tracking over a 1px white-20% rule that a wheat line wipes across.

Piñt is a dark-only design.

Colors

Surfaces

canvas#0E0D0D

Page background and every section (--black)

surface-1#111314

The one slightly lifted panel measured on the home page

surface-2#181616

A second dark step defined in the variables (--black-2)

Ink

on-primary#0E0D0D

Text on primary

ink#EAD2AB

All headings, paragraphs, links, borders and icons (--wheat)

ink-muted#EAD2AB

Body text is full wheat, the same as headings

ink-subtle#EAD2AB · 48%

Testimonial roles only

ink-bright#FFFFFF

Concept

on-tag#FFFFFF

Action

primary#EAD2AB

The only filled button (form submit Contact Us) and the lightbox-link hover fill

accent#8338EC

Violet hover flood inside outline buttons (--blue-violet)

Lines & effects

line#EAD2AB

2px borders on buttons, cards, inputs and the blockquote

line-subtle#FFFFFF · 20%

1px resting rule under uppercase links

tag-coral#FF705A

Blog category pills (Marketing, Design, Code), white text

tag-blue#3C5CCF

Blog category pills (Marketing, Design, Code), white text

tag-green#3CCF91

Blog category pills (Marketing, Design, Code), white text

Typography

Satoshi · display-cta

The quick brown fox jumps

Closing Let's talk. 150px · 700 · 1.2

Satoshi · headline-lg

The quick brown fox jumps

Section titles (Our Work). 60px · 700 · 1.1

Satoshi · title-lg

The quick brown fox jumps

Work card titles (Fusce Vel). 30px · 700 · 1.0

Satoshi · body-lg

The quick brown fox jumps

Paragraphs. 20px · 500 · 1.3

Satoshi · label-footer

The quick brown fox jumps

Footer links. 18px · 500 · 1.11

Satoshi · eyebrow

The quick brown fox jumps

Small labels, the most frequent style on the page (18 uses), and UP. 14px · 700 · 1.71 · 2px

Spacing & shape

Purpose	Value
Container	max 1200px, centred
Breakpoints	991px, 767px and 479px, plus a few min-width: 768px rules

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	16px
`md`	30px
`lg`	40px
`xl`	50px
`2xl`	80px

Layout spacing

Token	Value	Preview
`hero-bottom`	60px
`cta`	70px
`section-x`	72px
`section`	100px
`column-gap`	100px
`hero-top`	140px

Border radius

pill30px

pill-lg39px

full9999px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-1

Level 3surface-2

Motion

Button flood	Violet shape moves in from translate(-57px, 32%); border-radius transition 0.975s ease-out
Label roll	Label moves y 0% → −100% while a copy comes in, 300ms ease (400ms inOutCubic on some)
Link underline	width 0 → 100%, 300ms ease
Menu open	Overlay shows; items move y 100% → 0%, 300–600ms ease
Page load	Logo loader (80px), then opacity 0 → 1, 1000ms outQuart
Scroll reveal	Opacity changes on scroll-into-view: 500ms (to 0) and 1000ms outQuart (to 1)
Icon hover	scale 1 → 1.1, 100ms ease
Colour hover	transition: all 0.3s on blog titles; opacity 0.76 on tags

Do’s and don’ts

Keep the page #0E0D0D and every word, border and icon in wheat #EAD2AB.
Use 2px wheat outline pills (39px radius, 55px tall) for actions, with the #8338EC violet flood on hover.
Set headings in Satoshi 500–700 with no tracking (1px only on the 36px split-section titles), and buttons and links in uppercase with 1–2px tracking.
Keep images and cards square-cornered; only buttons, inputs, tags and avatars are round.
Use one white word or a white hover as the only highlight.
Keep sections at 100px vertical padding and 5% sides.
Use ink-subtle (wheat at 48%, about 3.8:1) for anything but short 16px testimonial roles.
Use the coral #FF705A or green #3CCF91 tag colours for anything but one-word 11px category pills: white on them is only 2.7:1 and 2.0:1.
Use violet as a resting fill or as text.
Fill buttons by default; only the form submit is filled.
Add shadows, gradients or rounded image corners.
Load Inter; only Satoshi is used.

Example prompt

Any page in the Piñt style

Prompt

Build your page in the Piñt style. Background #0E0D0D; all text, borders and icons in #EAD2AB, set in Satoshi. Hero: "Design. Development. Concept." at 8vw (115px at 1440px), weight 500, line height 1.1, with the last word in white. Section titles 60px weight 700; paragraphs 20px weight 500, line height 1.3. Buttons are transparent pills with a 2px #EAD2AB border, 39px radius, 55px tall, padding 0 40px, 16px bold uppercase with 1px tracking; on hover a #8338EC fill slides in behind the label. Small links are 15px bold uppercase with 2px tracking over a 1px rgba(255,255,255,0.2) line. Cards are square-cornered boxes with a 2px #EAD2AB border and 32px padding. Images have no radius. Sections: 100px vertical padding, 5% sides, 1200px container. No shadows, no gradients.

# Piñt Design System

> Measured from the Piñt template. Drop it into Claude,
> ChatGPT, Gemini, Cursor or v0.

## Overview

Piñt is a warm, dark agency site. It feels like gold
foil on black card stock: a soft black page (#0E0D0D),
nearly every word in a warm wheat tone (#EAD2AB), and
the brand's personality carried by Satoshi, a clean
geometric sans used large and calm. Controls are

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #0E0D0D     | Page background and eve… |
| surface-1    | #111314     | The one slightly lifted… |
| surface-2    | #181616     | A second dark step defi… |
| on-primary   | #0E0D0D     | Text on primary          |
| ink          | #EAD2AB     | All headings, paragraph… |
| ink-muted    | #EAD2AB     | Body text is full wheat… |
| ink-subtle   | #EAD2AB 48% | Testimonial roles only   |
| ink-bright   | #FFFFFF     | Concept                  |
| on-tag       | #FFFFFF     |                          |
| primary      | #EAD2AB     | The only filled button … |
| accent       | #8338EC     | Violet hover flood insi… |
| line         | #EAD2AB     | 2px borders on buttons,… |
| line-subtle  | #FFFFFF 20% | 1px resting rule under … |
| tag-coral    | #FF705A     | Blog category pills (Ma… |

## Typography

- display-cta: Satoshi 150px / 700
- display-hero: Satoshi 115px / 500
- display-menu: Satoshi 70px / 500
- headline-lg: Satoshi 60px / 700

{
  "$description": "Piñt design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#EAD2AB",
      "$description": "The only filled button (form submit Contact Us) and the lightbox-link hover fill"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#0E0D0D",
      "$description": "Text on primary"
    },
    "accent": {
      "$type": "color",
      "$value": "#8338EC",
      "$description": "Violet hover flood inside outline buttons (--blue-violet)"
    },
    "canvas": {
      "$type": "color",
      "$value": "#0E0D0D",
      "$description": "Page background and every section (--black)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#111314",
      "$description": "The one slightly lifted panel measured on the home page"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#181616",
      "$description": "A second dark step defined in the variables (--black-2)"
    },
    "ink": {
      "$type": "color",
      "$value": "#EAD2AB",
      "$description": "All headings, paragraphs, links, borders and icons (--wheat)"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#EAD2AB",
      "$description": "Body text is full wheat, the same as headings"
    },
    "ink-subtle": {
      "$type": "color",
      "$value": "#EAD2AB7A",

/* Piñt theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-headline-lg, rounded-pill, p-lg */

@theme {
  /* Colors */
  --color-primary: #EAD2AB;
  --color-on-primary: #0E0D0D;
  --color-accent: #8338EC;
  --color-canvas: #0E0D0D;
  --color-surface-1: #111314;
  --color-surface-2: #181616;
  --color-ink: #EAD2AB;
  --color-ink-muted: #EAD2AB;
  --color-ink-subtle: #EAD2AB7A;
  --color-ink-bright: #FFFFFF;
  --color-line: #EAD2AB;
  --color-line-subtle: #FFFFFF33;
  --color-tag-coral: #FF705A;
  --color-tag-blue: #3C5CCF;
  --color-tag-green: #3CCF91;
  --color-on-tag: #FFFFFF;

  /* Fonts */
  --font-sans: "Satoshi", "Inter", sans-serif;
  --font-satoshi: "Satoshi", "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-cta: 150px;
  --text-display-cta--line-height: 1.2;
  --text-display-cta--letter-spacing: 0px;
  --text-display-cta--font-weight: 700;
  --text-display-hero: 115px;
  --text-display-hero--line-height: 1.1;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 500;
  --text-display-menu: 70px;
  --text-display-menu--line-height: 1.0;
  --text-display-menu--letter-spacing: 0px;
  --text-display-menu--font-weight: 500;
  --text-headline-lg: 60px;
  --text-headline-lg--line-height: 1.1;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 700;
  --text-headline-md: 38px;
  --text-headline-md--line-height: 1.32;

/* Piñt design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #EAD2AB; /* The only filled button (form submit Contact Us) and the lightbox-link hover fill */
  --color-on-primary: #0E0D0D; /* Text on primary */
  --color-accent: #8338EC; /* Violet hover flood inside outline buttons (--blue-violet) */
  --color-canvas: #0E0D0D; /* Page background and every section (--black) */
  --color-surface-1: #111314; /* The one slightly lifted panel measured on the home page */
  --color-surface-2: #181616; /* A second dark step defined in the variables (--black-2) */
  --color-ink: #EAD2AB; /* All headings, paragraphs, links, borders and icons (--wheat) */
  --color-ink-muted: #EAD2AB; /* Body text is full wheat, the same as headings */
  --color-ink-subtle: #EAD2AB7A; /* Testimonial roles only */
  --color-ink-bright: #FFFFFF; /* Concept */
  --color-line: #EAD2AB; /* 2px borders on buttons, cards, inputs and the blockquote */
  --color-line-subtle: #FFFFFF33; /* 1px resting rule under uppercase links */
  --color-tag-coral: #FF705A; /* Blog category pills (Marketing, Design, Code), white text */
  --color-tag-blue: #3C5CCF; /* Blog category pills (Marketing, Design, Code), white text */
  --color-tag-green: #3CCF91; /* Blog category pills (Marketing, Design, Code), white text */
  --color-on-tag: #FFFFFF;

  /* Fonts */
  --font-satoshi: "Satoshi", "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-cta: 150px;
  --text-display-cta-font: var(--font-satoshi);
  --text-display-cta-weight: 700;
  --text-display-cta-line-height: 1.2;
  --text-display-cta-tracking: 0px;
  --text-display-hero: 115px;
  --text-display-hero-font: var(--font-satoshi);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 1.1;
  --text-display-hero-tracking: 0px;
  --text-display-menu: 70px;
  --text-display-menu-font: var(--font-satoshi);
  --text-display-menu-weight: 500;
  --text-display-menu-line-height: 1.0;
  --text-display-menu-tracking: 0px;
  --text-headline-lg: 60px;
  --text-headline-lg-font: var(--font-satoshi);
  --text-headline-lg-weight: 700;
  --text-headline-lg-line-height: 1.1;
  --text-headline-lg-tracking: 0px;

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

Agency design systems, the same colors first.

Browse all 398

Bring any of them to your AI tool

All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.

Get All Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Satoshi · display-cta

Satoshi · headline-lg

Satoshi · title-lg

Satoshi · body-lg

Satoshi · label-footer

Satoshi · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Piñt style

More design systems like this

Altrum

Jore

Agencā

AgencQ

Bring any of them to your AI tool