Skip to content
DesignMunkDesignMunk Submit a site

Tighten

tighten.com
We build and rescue web apps and dev teams
Agency Tailwind Homepage Inter Signifier
Share Visit site
tighten.com DESKTOP · 1440
Tighten

AI Breakdown

Design export

# Design brief: the Tighten design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/06090843/tighten-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/06090843/tighten-com-featured.webp
- On DesignMunk: https://designmunk.com/tighten/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Tighten: Black Canvas with Gold Serif Headlines

## Overview

A dark, editorial presentation aimed at engineering leaders and founders evaluating a Laravel-focused consultancy. The UI is serious, minimal, and typographic, using a black surface with measured gold accents to communicate confidence. Spacing is generous and consistent, letting long-form case studies and team content read without clutter. When tokens are missing, prefer legible dark-mode defaults with restrained use of the primary accent.

## Colors

- **primary (#ffbc00):** Signal gold for accents, CTAs, icons, and card text.
- **secondary (#7c5c04):** Burnt amber for subtle tonal steps, hover states, or secondary emphasis.
- **neutral (#000000):** Ink black for the global surface and high-contrast elements.
- **border (#374151):** Slate edge for input outlines, dividers, and subtle delineation.
- **surface (#000000):** Canvas black — the working background across sections and cards.
- **on-surface (#ffbc00):** Gold accent text on dark surfaces; reserve for headings, highlights, and UI cues.

## Typography

- Headings use Signifier, a custom serif with high contrast and refined curves. It is self-hosted (custom) and not generally available for agents. Practical substitutes: Spectral, EB Garamond, or Cormorant (all Google) — choose light weights to mimic the airy feel.
- Display scale: headline-lg 96px/1.04, headline-md 72px/1.04, headline-sm 36px/1.06, all at weight 200. Use for hero, section titles, and pull quotes.
- Sans-serif: Inter (Google) for headline-xs 18px/1.22 and body-md 16px/2.14. Inter is freely available and should be the default for UI labels, navigation, forms, and long copy.
- Emoji: Noto Color Emoji (Google) for consistent emoji rendering.
- Pitch Sans is listed as custom; if needed, substitute with IBM Plex Sans, Work Sans, or Manrope.

## Layout

- Spacing follows an 8px base: xs 8, sm 16, md 32, lg 72, xl 96.
- Use lg (72px)–xl (96px) for vertical section padding on the black surface; sm (16px)–md (32px) for internal component gutters.
- Cards and tiles pad to 16px internally; grid gutters typically align to 16px or 32px.
- For long sections (case studies, team), maintain a consistent multi-column grid at larger breakpoints with 16–32px gutters to preserve rhythm.

## Elevation & Depth

Shadows are disabled across scales. Hierarchy relies on: 1) strong type contrast (serif display vs Inter body), 2) tonal blocks of #000000 vs gold accents, and 3) borders using #374151 for inputs and dividers. Use whitespace (lg/xl) to separate sections instead of elevation.

## Shapes

Two radii set the language: sm 8px for cards, inputs, and form elements; full 9999px for pill buttons and chips. Pills signal primary actions and movement; 8px corners communicate informational containers.

## Components

- Button — Primary: #ffbc00 background, #ffffff text, 62px tall, 10px×20px padding, pill (9999px). Use for the main CTA in each section.
- Button — Secondary: #000000 background, #ffffff text, 62px tall, pill. Use when the background is warm or busy, or as a quieter alternative.
- Button — Link: #999999 text, square corners. Use inline within copy and meta actions.
- Card: #000000 background, #ffbc00 text, 8px radius, 16px padding. Use for results tiles and promos.

### Hiring Banner
- Slim top bar announcing roles; use body-md (16px) Inter. Background may stay #000000 with gold text (#ffbc00) for visibility.

### Hero Masthead
- Headline set in headline-lg (96px) Signifier or substitute; tight 1.04 line-height. Use neutral surface (#000000) or a restrained warm overlay. Primary or secondary button follows at 62px tall.

### Results Tile Grid
- Implement with Card token: 8px radius, 16px padding, gold text (#ffbc00). Use headline-sm (36px) for client name and body-md (16px) for summary and link.

### Community Promo Trio
- Three small cards linking to podcasts/resources. Use card styling with 16px padding; headings at headline-sm (36px) or headline-xs (18px) depending on density.

### Team Member Card
- Portrait/content tile using 8px corners. Name in headline-sm (36px), role and contributions in body-md (16px). Use border (#374151) separators between contribution links.

### Testimonial Quote
- Pull quote using headline-md or headline-sm in the serif; attribution in Inter body-md. Keep generous top/bottom spacing (lg).

### Newsletter Signup
- Inputs with 8px corners, 16px vertical spacing, border #374151. Submit as Primary button (62px pill).

### Contact Form Stack
- Multi-field form using 8px corners, border #374151, and 16–32px gutters. Primary submit is 62px pill; legal copy in body-md.

## Do's and Don'ts

- Do reserve #ffbc00 for headings, CTAs, and highlights; keep most backgrounds and large surfaces #000000.
- Do use the headline scale exactly (96/72/36/18) with light weights to preserve the editorial tone.
- Do separate dense sections with lg/xl spacing instead of shadows or heavy rules.
- Don't introduce drop shadows; use #374151 borders for structure.
- Don't mix square and pill buttons in the same context; actions are pills, containers are 8px.
- Don't overuse the secondary amber; keep it to subtle states and supporting accents.

## Agent Prompt Guide

Quick color reference:
- Text (accent/headings): #ffbc00
- Background: #000000
- Border: #374151
- Accent: #ffbc00

1) Build a hero block on black with editorial serif
- Section background: #000000; padding-top: 96px; padding-bottom: 96px
- Heading: Spectral, 96px, weight 200, line-height 1.04, color #ffbc00 (use Signifier if available)
- Subhead/body: Inter, 16px, line-height 2.14, color #ffbc00 at reduced opacity if needed
- Primary button: background #ffbc00, text #ffffff, height 62px, padding 10px 20px, border-radius 9999px

2) Results tile grid using card token values
- Card background: #000000; text: #ffbc00; border-radius 8px; padding 16px
- Title: Spectral 36px/1.06 weight 200 (or Signifier), color #ffbc00
- Body: Inter 16px/2.14; link styled as button-link (#999999) or gold accent
- Grid gutters: 32px; section padding: 72px

3) Newsletter signup in dark mode
- Inputs: background #000000; border 1px solid #374151; border-radius 8px; padding 16px
- Labels: Inter 18px/1.22, color #ffbc00
- Submit: background #ffbc00; text #ffffff; height 62px; radius 9999px

4) Team member card
- Container: background #000000; radius 8px; padding 16px; divider color #374151
- Name: Spectral 36px/1.06 weight 200; Role: Inter 16px/2.14
- Links list uses button-link styling (#999999)

5) Testimonial block
- Quote: Spectral 72px/1.04 weight 200 on #000000; color #ffbc00
- Attribution: Inter 16px/2.14; top/bottom spacing 72px; optional CTA uses Secondary button (#000000 with #ffffff text, radius 9999px)

## Similar Brands

- thoughtbot — Consultancy site with typographic emphasis and case-study grids; lighter theme and red accent where Tighten uses dark mode and gold.
- Postlight — Editorial voice and casework-first layout; more neutral gray palette versus Tighten's high-contrast black and gold.
- Vercel — Dark, minimal presentation with disciplined accent color; more product-led and motion-heavy than Tighten's content-forward approach.
- Hashrocket — Developer consultancy with prominent case studies; employs brighter surfaces and monospace touches instead of Tighten's refined serif.
- Laravel — Brand site with bold headlines and high-contrast sections; more framework-centric content, while Tighten focuses on consultancy credibility.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #ffbc00;
  --color-secondary: #7c5c04;
  --color-neutral: #000000;
  --color-border: #374151;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 96px;
  --text-headline-lg-weight: 200;
  --text-headline-lg-leading: 1.04;
  --text-headline-md-size: 72px;
  --text-headline-md-weight: 200;
  --text-headline-md-leading: 1.04;
  --text-headline-sm-size: 36px;
  --text-headline-sm-weight: 200;
  --text-headline-sm-leading: 1.06;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 200;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 200;
  --text-body-md-leading: 2.14;
  --font-signifier: "Signifier";
  --font-inter: "Inter";

  /* Rounded */
  --radius-sm: 8px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 72px;
  --spacing-xl: 96px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: #ffffff;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 10px 20px;
  --button-primary-height: 62px;
  --button-secondary-background-color: var(--color-neutral);
  --button-secondary-text-color: #ffffff;
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 10px 20px;
  --button-secondary-height: 62px;
  --button-link-text-color: #999999;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #ffbc00;
  --color-secondary: #7c5c04;
  --color-neutral: #000000;
  --color-border: #374151;
  --color-surface: #000000;
  --color-on-surface: #ffbc00;
  --font-headline-lg: "Signifier";
  --font-headline-md: "Signifier";
  --font-headline-sm: "Signifier";
  --font-headline-xs: "Inter";
  --font-body-md: "Inter";
  --text-headline-lg: 96px;
  --text-headline-md: 72px;
  --text-headline-sm: 36px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --font-weight-headline-lg: 200;
  --font-weight-headline-md: 200;
  --font-weight-headline-sm: 200;
  --font-weight-headline-xs: 200;
  --font-weight-body-md: 200;
  --radius-sm: 8px;
  --radius-full: 9999px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 72px;
  --spacing-xl: 96px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    0.737,
                    0
                ],
                "hex": "#ffbc00"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.361,
                    0.016
                ],
                "hex": "#7c5c04"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.216,
                    0.255,
                    0.318
                ],
                "hex": "#374151"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    0.737,
                    0
                ],
                "hex": "#ffbc00"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 32,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 72,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Signifier",
                "fontSize": {
                    "value": 96,
                    "unit": "px"
                },
                "fontWeight": 200
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Signifier",
                "fontSize": {
                    "value": 72,
                    "unit": "px"
                },
                "fontWeight": 200
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Signifier",
                "fontSize": {
                    "value": 36,
                    "unit": "px"
                },
                "fontWeight": 200
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 200
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 200
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Tighten**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Agency →
fureyfs.com
Furey Agency
Furey
gogetta.com
GoGetta Agency
GoGetta
h2.studio
H2 Agency
H2
kononenkogroup.com
Kononenko Agency
Kononenko