Boomerang Design System

Get DESIGN.md Download View template Works with

Boomerang website template preview detail 2

Boomerang website template preview detail 3

Boomerang is a bright, gallery-like photography portfolio. The UI is black and white, set in Mulish capitals, and stays thin and quiet so the saturated work photos (lemon yellow, sneaker colours, cobalt blue, body paint) do all the talking. Big type is used like a layout device: the hero name spans the width in two lines split by hairline rules, and the services read as huge single lines that alternate left and right. It ends on a black band and a black footer.

Signatures:

The ruled two-line hero. BOOMERANG on the left and PORTFOLIO on the right, each line at 10vw (144px at 1440) weight 600, each with a 1px black-60% rule under it, over a near-white fashion photo. A GET IN TOUCH WITH US outline pill sits at the right end of the first line and four small circular social icons at the left of the second.
Alternating service lines. A CREATIVE MIND, TECHNICAL PHOTOGRAPHY, ATTENTION TO DETAIL, TEAM WORKING at 90px weight 500, each on its own row above a thin rule, alternating left-aligned and right-aligned.
Everything in capitals. Nav, labels, paragraphs, quotes, names and buttons are uppercase Mulish, with small positive tracking (0.2–1px) on labels.
Hairline UI, colourful photos. Cards are white with a 1px black-10% border and 6px radius; images are full-colour, square-cornered and large.

Colors

Surfaces

canvas#FFFFFF

Page background

surface-1#FFFFFF

Same as canvas: testimonial cards are white, set apart only by their border

inverse-canvas#000000

The closing band and the footer

field-placeholder#999999

Input placeholder

Ink

on-primary#FFFFFF

Text on primary

on-secondary#000000

Text on secondary

ink#000000

Headlines, nav, labels

ink-muted#000000

Paragraphs and quotes

ink-subtle#000000 · 60%

Current nav link, the outline pill, hero social icons (opacity: .6)

ink-faint#292525 · 60%

Testimonial roles (CEO - VISION)

inverse-ink#FFFFFF

Text on inverse-canvas

Action

primary#000000

Black pill buttons (.button, SUBMIT NOW)

primary-hover#000000 · 60%

Button hover (background-color: #0009)

secondary#FFFFFF

The white pill WORK WITH US on the black band

Lines & effects

line#000000 · 10%

Testimonial card borders

line-strong#000000 · 60%

Hero rules, service rules, the looping-text borders, section-label rules

inverse-line#FFFFFF · 60%

Footer field borders and the copyright rule

Typography

Mulish · display-hero

The quick brown fox jumps

BOOMERANG / PORTFOLIO (.hero-title, 10vw). 144px · 600 · 1.0

Mulish · headline-lg

The quick brown fox jumps

A PICTURE IS WORTH A THOUSAND WORDS on the black band. 60px · 600 · 1.2

Mulish · title-lg

The quick brown fox jumps

Blog titles. 24px · 700 · 1.2 · 0.25px

Mulish · body

The quick brown fox jumps

Paragraphs and testimonial quotes. 18px · 400 · 1.33

Mulish · label-button

The quick brown fox jumps

Pill button labels. 18px · 600 · 1.0

Mulish · caption

The quick brown fox jumps

Spacing & shape

Purpose	Value
Container	max-width: 1600px, inside sections padded 100px 3% (43px sides at 1440px)
Breakpoints	991px, 767px, 479px, plus min-width 768px and 1920px

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	20px
`md`	30px
`lg`	40px
`xl`	60px
`2xl`	100px

Layout spacing

Token	Value	Preview
`gutter`	43px
`nav-height`	99px
`section`	100px

Border radius

card6px

pill-sm50px

pill60px

full9999px

Motion

Scroll reveal	Elements start at opacity 0 offset 100px (from left, right or below) and settle to opacity 1, x/y 0px in 1000ms outQuart
Image filter	A filter transition of 600ms ease on nine hover targets
Link hover	transition: all .3s; nav border appears, footer links and blog titles fade to 0.6
Outline pill and icons	Opacity 0.6 → 1, 300ms
Button hover	Background black → black 60%, 300ms
Inputs	transition: all .4s
Looping text	Moves with page scroll (page-scroll interactions)

Do’s and don’ts

Keep the UI black #000000 on white #FFFFFF, with greys made from black at 60% or 10%.
Set all text in Mulish capitals: 14px weight 700 nav, 18px weight 400 body.
Run the hero and service titles across the full width at 10vw and 90px, each with a 1px black-60% rule below.
Alternate service lines left and right.
Use black 60px-radius pill buttons that fade to 60% on hover, and the 50px outline pill for secondary actions.
Let large square-cornered colour photos carry the page.
Add a brand colour, gradients or shadows to the UI.
Use ink-faint (#292525 at 60%) for anything but small role lines under a name; it sits just under 4.5:1 on white, so keep it at 16px and never use it for paragraphs.
Round images, or use radii outside 6px, 50px, 60px and circles.
Set labels in sentence case or drop the small tracking.
Use thicker or darker rules than 1px black at 60%.
Put coloured overlays on the photography.

Example prompt

Any page in the Boomerang style

Prompt

Build your page in the Boomerang style. White #FFFFFF page, black #000000 text, all text in Mulish uppercase. Body is 18px weight 400, line height 1.33; nav links are 14px weight 700 with +0.25px tracking and a 1px black underline on hover. Use display titles at 10vw weight 600, line height 1.0, laid out as full-width rows with a 1px black-60% rule under each, and service phrases at 90px weight 500 alternating left and right. Sections pad 100px 3% inside a 1600px container with 40px grid gaps. Buttons are black pills (60px radius, padding 15px 25px, 18px weight 600 white) that fade to black 60% on hover in 300ms; secondary is an outline pill (1px black, 50px radius, padding 10px 15px, 14px weight 600, at 60% opacity). Cards are white with a 1px black-10% border, 6px radius, 40px padding. Images are square-cornered and full colour. End with a black band and black footer in white type with white-60% rules. Reveal content with a 100px slide and fade over 1000ms outQuart.

# Boomerang Design System

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

## Overview

Boomerang is a bright, gallery-like photography
portfolio. The UI is black and white, set in Mulish
capitals, and stays thin and quiet so the saturated work
photos (lemon yellow, sneaker colours, cobalt blue, body
paint) do all the talking. Big type is used like a

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background          |
| surface-1    | #FFFFFF     | Same as canvas: testimo… |
| inverse-can… | #000000     | The closing band and th… |
| field-place… | #999999     | Input placeholder        |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #000000     | Text on secondary        |
| ink          | #000000     | Headlines, nav, labels   |
| ink-muted    | #000000     | Paragraphs and quotes    |
| ink-subtle   | #000000 60% | Current nav link, the o… |
| ink-faint    | #292525 60% | Testimonial roles (CEO … |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| primary      | #000000     | Black pill buttons (.bu… |
| primary-hov… | #000000 60% | Button hover (backgroun… |
| secondary    | #FFFFFF     | The white pill WORK WIT… |

## Typography

- display-hero: Mulish 144px / 600
- display-service: Mulish 90px / 500
- headline-lg: Mulish 60px / 600
- headline-md: Mulish 40px / 700

{
  "$description": "Boomerang design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Black pill buttons (.button, SUBMIT NOW)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#00000099",
      "$description": "Button hover (background-color: #0009)"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "The white pill WORK WITH US on the black band"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Same as canvas: testimonial cards are white, set apart only by their border"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Headlines, nav, labels"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#000000",

/* Boomerang 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-card, p-lg */

@theme {
  /* Colors */
  --color-primary: #000000;
  --color-primary-hover: #00000099;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FFFFFF;
  --color-on-secondary: #000000;
  --color-canvas: #FFFFFF;
  --color-surface-1: #FFFFFF;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-ink-subtle: #00000099;
  --color-ink-faint: #29252599;
  --color-line: #0000001A;
  --color-line-strong: #00000099;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-line: #FFFFFF99;
  --color-field-placeholder: #999999;

  /* Fonts */
  --font-sans: "Mulish", sans-serif;
  --font-mulish: "Mulish", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 144px;
  --text-display-hero--line-height: 1.0;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 600;
  --text-display-service: 90px;
  --text-display-service--line-height: 1.0;
  --text-display-service--letter-spacing: 0px;
  --text-display-service--font-weight: 500;
  --text-headline-lg: 60px;
  --text-headline-lg--line-height: 1.2;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 600;
  --text-headline-md: 40px;
  --text-headline-md--line-height: 1.2;
  --text-headline-md--letter-spacing: 0px;
  --text-headline-md--font-weight: 700;
  --text-headline-sm: 38px;

/* Boomerang 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: #000000; /* Black pill buttons (.button, SUBMIT NOW) */
  --color-primary-hover: #00000099; /* Button hover (background-color: #0009) */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #FFFFFF; /* The white pill WORK WITH US on the black band */
  --color-on-secondary: #000000; /* Text on secondary */
  --color-canvas: #FFFFFF; /* Page background */
  --color-surface-1: #FFFFFF; /* Same as canvas: testimonial cards are white, set apart only by their border */
  --color-ink: #000000; /* Headlines, nav, labels */
  --color-ink-muted: #000000; /* Paragraphs and quotes */
  --color-ink-subtle: #00000099; /* Current nav link, the outline pill, hero social icons (opacity: .6) */
  --color-ink-faint: #29252599; /* Testimonial roles (CEO - VISION) */
  --color-line: #0000001A; /* Testimonial card borders */
  --color-line-strong: #00000099; /* Hero rules, service rules, the looping-text borders, section-label rules */
  --color-inverse-canvas: #000000; /* The closing band and the footer */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-inverse-line: #FFFFFF99; /* Footer field borders and the copyright rule */
  --color-field-placeholder: #999999; /* Input placeholder */

  /* Fonts */
  --font-mulish: "Mulish", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 144px;
  --text-display-hero-font: var(--font-mulish);
  --text-display-hero-weight: 600;
  --text-display-hero-line-height: 1.0;
  --text-display-hero-tracking: 0px;
  --text-display-service: 90px;
  --text-display-service-font: var(--font-mulish);
  --text-display-service-weight: 500;
  --text-display-service-line-height: 1.0;
  --text-display-service-tracking: 0px;
  --text-headline-lg: 60px;
  --text-headline-lg-font: var(--font-mulish);
  --text-headline-lg-weight: 600;
  --text-headline-lg-line-height: 1.2;
  --text-headline-lg-tracking: 0px;
  --text-headline-md: 40px;
  --text-headline-md-font: var(--font-mulish);
  --text-headline-md-weight: 700;
  --text-headline-md-line-height: 1.2;

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

Mulish · display-hero

Mulish · headline-lg

Mulish · title-lg

Mulish · body

Mulish · label-button

Mulish · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Motion

Do’s and don’ts

Example prompt

Any page in the Boomerang style

More design systems like this

Mōno™

Omnera

Nuvin

Moon Studio

Bring any of them to your AI tool