Benji Design System

Get DESIGN.md Download View template Works with

Benji is a dark, quiet agency site that opens loud. The first screen is a full-viewport electric-violet field with a centred founder quote set huge in white General Sans. Everything after it sits on a near-black canvas (#1A1B1F) in white and 70% white, with small uppercase labels, hairline rules between sections and bright, studio-lit product photography with square corners.

Four signatures make it recognisable:

The violet quote hero. A 100vh band of accent #6F00FF with a soft magenta glow in the corners, a quote-mark glyph, a two-line display-hero statement centred (Every brilliant design has a rich narrative.), a short white rule, and an attribution split in two tones: LIAM BENNETT, in white and BENJI FOUNDER dimmed.
One weight, mostly. Nearly all text is General Sans 500: headlines, quotes, body and labels. Weight 600 is kept for nav links and buttons. There is no bold display weight.
Uppercase tracked labels. Section headers (SELECTED PROJECT ↘, TESTIMONIALS), nav links, card categories (USER INTERFACE, 2px tracking) and footer titles are all caps. Big text is always sentence case.
Outlined pill tags. Services and categories show as 30px-radius pills with a 1px white-15% outline and no fill.

Benji is a dark-only design, broken once by a white marquee band.

Colors

Surfaces

canvas#1A1B1F

Page, sections and footer background (--black)

surface-1#27282B

Filled buttons and form fields

field#27282B

inverse-canvas#FFFFFF

The white marquee band

Ink

on-primary#FFFFFF

Text on primary

on-accent#FFFFFF

Text on accent

ink#FFFFFF

Headlines, quotes, nav, labels, tags

ink-muted#FFFFFF · 70%

All paragraphs (p base style)

ink-subtle#FFFFFF · 60%

Footer column titles (opacity .6)

ink-faint#FFFFFF · 40%

Second half of an attribution (BENJI FOUNDER)

inverse-ink#1A1B1F

Text on inverse-canvas

Action

primary#27282B

The filled pill button (Send Message)

primary-hover#FFFFFF

Button hover fill; text turns #1A1B1F

accent#6F00FF

Hero background (--blue-violet), .button-first, avatar backdrops

Lines & effects

line#FFFFFF · 12%

1px bottom border on every .section

line-strong#FFFFFF · 20%

Rules between testimonials, footer divider

outline#FFFFFF · 15%

1px border of the meta-tag pill

quote-rule#FFFFFF · 21%

Left border of blockquotes in rich text

price#8A8A8A

Price lines in shop cards

Typography

General Sans · display-hero

The quick brown fox jumps

Hero quote (.hero-title, h1). 103px · 500 · 1.1

General Sans · headline-md

The quick brown fox jumps

Intro statement Greetings! We're Benji, a Tokyo based creative agency. 34px · 500 · 1.2

General Sans · title-lg

The quick brown fox jumps

Testimonial quotes. 30px · 500 · 1.2

General Sans · body

The quick brown fox jumps

Paragraphs, at 70% white. 16px · 500 · 1.4

General Sans · label-section

The quick brown fox jumps

Section labels SELECTED PROJECT, TESTIMONIALS. 17px · 500 · 1.76

General Sans · eyebrow

The quick brown fox jumps

Footer column titles; 600 weight with 1px tracking for the 3D text button. 13px · 500 · 1.2 · 2px

Spacing & shape

Purpose	Value
Container	.container max 1200px, centred, a flex column
Section rhythm	.section has 100px top and bottom padding (80px with 5% sides at ≤991px, 60px at ≤479px) and a 1px line bottom border, so every block is closed by a hairline
Breakpoints	991px, 767px and 479px, plus a 1280px+ step

Spacing scale

Token	Value	Preview
`xs`	5px
`sm`	10px
`md`	15px
`lg`	20px
`xl`	30px
`2xl`	50px
`3xl`	70px

Layout spacing

Token	Value	Preview
`nav-y`	20px
`column-gap`	30px
`section`	100px
`section-cta`	150px

Border radius

field4px

pill30px

full9999px

Surfaces

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

Level 1canvas

Level 2surface-1

Motion

Scroll-in reveal	opacity 0 → 1 over 1000ms outQuart, with moves of y 50px / 100px → 0 over 500ms
Marquee	x 0% → −100% over 40000ms, linear loop, reset at 0ms
Mouse-move parallax	Layers shift x/y ±5px over 500ms, some ±20px
Line grow on hover	Size changes at 300ms ease
Arrow turn	rotate at 300ms ease on arrow icons
Button hover	transition: all .3s, background to white, text to #1A1B1F
Nav link hover	Opacity to 0.8 and white 2px underline
Text button	transform .2s

Do’s and don’ts

Open with a full-screen #6F00FF hero carrying one centred sentence in display-hero (103px, weight 500, line height 1.1).
Keep the canvas #1A1B1F and close each section with a 1px #FFFFFF1F bottom border.
Set paragraphs at 16px / 500 / 1.4 in white at 70% (#FFFFFFB3).
Label sections with small uppercase text and an arrow, not big titles.
Use 30px pills for both buttons (#27282B fill) and tags (1px #FFFFFF26 outline).
Leave photos square-cornered and let their set colour carry the page.
Use bold (700) weights or a serif. EB Garamond is loaded but not part of the look.
Add shadows, blur or rounded image corners.
Use violet for text, rules or small UI; it is for the hero field, avatars and the one accent button.
Set the 40% white (ink-faint) role text below 16px or use it for paragraphs; keep it for the second half of attributions.
Put uppercase on headlines or quotes.
Invent a hover colour: the only measured button hover is #27282B to #FFFFFF with #1A1B1F text.

Example prompt

Any page in the Benji style

Prompt

Build your page in the Benji style. Start with a 100vh hero in #6F00FF with a centred quote glyph, one sentence in General Sans 103px weight 500 line height 1.1 in white, a short white rule, and "NAME, ROLE" in 16px uppercase (role at 40% white). Below it use a #1A1B1F canvas, a 1200px container, 100px section padding and a 1px #FFFFFF1F border under every section. Label each section with 17px uppercase text, optionally followed by a ↘ arrow. Body text is 16px / 500 / 1.4 in white at 70%. Tags are transparent 30px pills with a 1px #FFFFFF26 outline, padding 10px 20px. Buttons are #27282B pills, 17px weight 600, padding 17px 30px, turning white with #1A1B1F text on hover over 300ms. Photos are square-cornered product shots on flat coloured sets. No shadows. Reveal content on scroll with a 1000ms opacity fade and a 50px rise.

# Benji Design System

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

## Overview

Benji is a dark, quiet agency site that opens loud. The
first screen is a full-viewport electric-violet field
with a centred founder quote set huge in white General
Sans. Everything after it sits on a near-black canvas
(#1A1B1F) in white and 70% white, with small uppercase

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #1A1B1F     | Page, sections and foot… |
| surface-1    | #27282B     | Filled buttons and form… |
| field        | #27282B     |                          |
| inverse-can… | #FFFFFF     | The white marquee band   |
| on-primary   | #FFFFFF     | Text on primary          |
| on-accent    | #FFFFFF     | Text on accent           |
| ink          | #FFFFFF     | Headlines, quotes, nav,… |
| ink-muted    | #FFFFFF 70% | All paragraphs (p base … |
| ink-subtle   | #FFFFFF 60% | Footer column titles (o… |
| ink-faint    | #FFFFFF 40% | Second half of an attri… |
| inverse-ink  | #1A1B1F     | Text on inverse-canvas   |
| primary      | #27282B     | The filled pill button … |
| primary-hov… | #FFFFFF     | Button hover fill; text… |
| accent       | #6F00FF     | Hero background (--blue… |

## Typography

- display-hero: General Sans 103px / 500
- display-marquee: General Sans 120px / 500
- headline-md: General Sans 34px / 500
- headline-sm: General Sans 32px / 500

{
  "$description": "Benji design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#27282B",
      "$description": "The filled pill button (Send Message)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Button hover fill; text turns #1A1B1F"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "accent": {
      "$type": "color",
      "$value": "#6F00FF",
      "$description": "Hero background (--blue-violet), .button-first, avatar backdrops"
    },
    "on-accent": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on accent"
    },
    "canvas": {
      "$type": "color",
      "$value": "#1A1B1F",
      "$description": "Page, sections and footer background (--black)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#27282B",
      "$description": "Filled buttons and form fields"
    },
    "field": {
      "$type": "color",
      "$value": "#27282B"
    },
    "ink": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Headlines, quotes, nav, labels, tags"

/* Benji 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-title-lg, rounded-field, p-lg */

@theme {
  /* Colors */
  --color-primary: #27282B;
  --color-primary-hover: #FFFFFF;
  --color-on-primary: #FFFFFF;
  --color-accent: #6F00FF;
  --color-on-accent: #FFFFFF;
  --color-canvas: #1A1B1F;
  --color-surface-1: #27282B;
  --color-field: #27282B;
  --color-ink: #FFFFFF;
  --color-ink-muted: #FFFFFFB3;
  --color-ink-subtle: #FFFFFF99;
  --color-ink-faint: #FFFFFF66;
  --color-line: #FFFFFF1F;
  --color-line-strong: #FFFFFF33;
  --color-outline: #FFFFFF26;
  --color-quote-rule: #FFFFFF36;
  --color-price: #8A8A8A;
  --color-inverse-canvas: #FFFFFF;
  --color-inverse-ink: #1A1B1F;

  /* Fonts */
  --font-sans: "General Sans", "Inter", sans-serif;
  --font-general-sans: "General Sans", "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 103px;
  --text-display-hero--line-height: 1.1;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 500;
  --text-display-marquee: 120px;
  --text-display-marquee--line-height: 1.4;
  --text-display-marquee--letter-spacing: 1px;
  --text-display-marquee--font-weight: 500;
  --text-headline-md: 34px;
  --text-headline-md--line-height: 1.2;
  --text-headline-md--letter-spacing: 0px;
  --text-headline-md--font-weight: 500;
  --text-headline-sm: 32px;
  --text-headline-sm--line-height: 1.0;
  --text-headline-sm--letter-spacing: 0px;

/* Benji 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: #27282B; /* The filled pill button (Send Message) */
  --color-primary-hover: #FFFFFF; /* Button hover fill; text turns #1A1B1F */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-accent: #6F00FF; /* Hero background (--blue-violet), .button-first, avatar backdrops */
  --color-on-accent: #FFFFFF; /* Text on accent */
  --color-canvas: #1A1B1F; /* Page, sections and footer background (--black) */
  --color-surface-1: #27282B; /* Filled buttons and form fields */
  --color-field: #27282B;
  --color-ink: #FFFFFF; /* Headlines, quotes, nav, labels, tags */
  --color-ink-muted: #FFFFFFB3; /* All paragraphs (p base style) */
  --color-ink-subtle: #FFFFFF99; /* Footer column titles (opacity .6) */
  --color-ink-faint: #FFFFFF66; /* Second half of an attribution (BENJI FOUNDER) */
  --color-line: #FFFFFF1F; /* 1px bottom border on every .section */
  --color-line-strong: #FFFFFF33; /* Rules between testimonials, footer divider */
  --color-outline: #FFFFFF26; /* 1px border of the meta-tag pill */
  --color-quote-rule: #FFFFFF36; /* Left border of blockquotes in rich text */
  --color-price: #8A8A8A; /* Price lines in shop cards */
  --color-inverse-canvas: #FFFFFF; /* The white marquee band */
  --color-inverse-ink: #1A1B1F; /* Text on inverse-canvas */

  /* Fonts */
  --font-general-sans: "General Sans", "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 103px;
  --text-display-hero-font: var(--font-general-sans);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 1.1;
  --text-display-hero-tracking: 0px;
  --text-display-marquee: 120px;
  --text-display-marquee-font: var(--font-general-sans);
  --text-display-marquee-weight: 500;
  --text-display-marquee-line-height: 1.4;
  --text-display-marquee-tracking: 1px;
  --text-headline-md: 34px;
  --text-headline-md-font: var(--font-general-sans);
  --text-headline-md-weight: 500;
  --text-headline-md-line-height: 1.2;
  --text-headline-md-tracking: 0px;
  --text-headline-sm: 32px;
  --text-headline-sm-font: var(--font-general-sans);

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

General Sans · display-hero

General Sans · headline-md

General Sans · title-lg

General Sans · body

General Sans · label-section

General Sans · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Benji style

More design systems like this

Twin Studio

Agencium

AGNCY

AgencZ

Bring any of them to your AI tool