Bryn Design System

Get DESIGN.md Download View template Works with

Bryn is a loud, single-colour portfolio for a digital designer or a small agency. Almost everything on a white page is royal blue #2E5CFF: the uppercase General Sans headlines, the frames, the buttons and the two square tiles pinned to the top corners. Colour beyond the blue comes from flat, saturated backgrounds in the work (lime green, golden yellow, hot pink) and from playful photography.

The published preview opens on a presentation page (Meet Bryn, Home Demo, Work Demo, Contact Demo, Blog Demo) that shows every page of the template as a framed thumbnail. Those thumbnails, the CSS and the presentation page together define the system below.

Four signatures make it recognisable:

Corner tiles. An 85×85px blue square at the top left holds the BR / YN stacked wordmark in white; a matching blue square at the top right holds a two-bar hamburger. Both are position: fixed and stay in the corners while the page scrolls.
Uppercase blue General Sans. Headlines, labels, intros and even long statements (HEY! I'M BRYN DOE / I'M AWARD WINNING DIGITAL DESIGNER…) are set in uppercase blue, weight 500–600, with line height around 1.0–1.3.
The line-and-label marker. Section labels start with a short 30px horizontal rule, then a tracked uppercase word: —— HOME DEMO, —— WHAT IS INCLUDED IN BRYN TEMPLATE. Inside the pages the same rule sits before a small index.
The black menu with serif flips. The hamburger opens a full-screen #151619 overlay with four 100px uppercase blue links (WORK, ABOUT, NEWS, HIRE ME); the hovered link flips to EB Garamond italic.

Bryn is a light design with dark moments (the menu, some contact and work pages).

Colors

Surfaces

canvas#FFFFFF

Page background

surface-1#F5F5F5

Light grey fills behind previews and image placeholders

field#FFFFFF

Form inputs and their 1px border

field-line#C3C8CC · 60%

With field: Form inputs and their 1px border

inverse-canvas#151619

Menu overlay, dark work and contact pages

Ink

on-primary#FFFFFF

Text and icons on blue

ink#2E5CFF

Headlines, labels, links, intros

ink-muted#616161

Paragraphs (p), the footer line © This is a Masterthemes template, input text

ink-muted-hover#A3A3A3

Footer dark-link on hover

inverse-ink#FFFFFF

Text on the dark service cards and on the blue band

Action

primary#2E5CFF

Filled pill buttons, the blue band, the corner tiles

primary-hover#033BFF

.button:hover, a deeper blue

accent#FFD22E

Golden yellow: full-bleed work backgrounds, the style-guide swatch

accent-lime#5BFF2E

Lime green: full-bleed work backgrounds, the style-guide swatch

Lines & effects

line#2E5CFF

2px solid frames around previews and service boxes

inverse-surface#1A1B1F

Dark service cards (service-card-wrapper)

Typography

General Sans · display-menu

The quick brown fox jumps

Overlay menu links (.navlinks), uppercase. 100px · 600 · 1.0

General Sans · headline-lg

The quick brown fox jumps

.title-2 section titles (WHAT I DO, SELECTED WORK), uppercase. 48px · 600 · 1.15

General Sans · title-lg

The quick brown fox jumps

Base h3. 24px · 600 · 1.25

General Sans · body-lead

The quick brown fox jumps

Hero intro, uppercase. 20px · 500 · 1.3

General Sans · label-button

The quick brown fox jumps

Pill buttons, sentence case. 16px · 500 · 1.2

General Sans · eyebrow

The quick brown fox jumps

Section labels after the 30px rule, uppercase. 15px · 600 · 1.2 · 1px

Spacing & shape

Purpose	Value
Container	.container max 1200px, centred, flex column; .medium-container max 1100px for the footer
Section rhythm	.section is 100px top and bottom with 5% side padding (72px at 1440); top and bottom drop to 50px at ≤991px
Breakpoints	991px, 767px and 479px, plus min-width steps at 768, 1280, 1440 and 1920px (plain .title-1 is 7vw at ≥1280px and 6vw at ≥1920px)

Spacing scale

Token	Value	Preview
`xs`	5px
`sm`	10px
`md`	16px
`lg`	20px
`xl`	30px
`2xl`	60px

Layout spacing

Token	Value	Preview
`column-gap`	30px
`tile`	85px
`section`	100px
`menu-pad`	100px
`hero-top`	150px

Border radius

field4px

card10px

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 fade	opacity 0 → 1, 1000ms outQuart; or 500ms outExpo paired with y 30px → 0
Lift on load	y -50px → 0 and y 30px → 0, 500ms, outExpo
Mouse-follow parallax	Images move x/y ±5px or ±10px with the cursor, 500ms
Menu open	display: none → flex, then opacity fade; scale 0 → 1 on menu parts, 500ms
Menu link flip	Hover moves the link's stack within its 100px mask to reveal the EB Garamond italic copy, 500ms
Hover rotate and resize	rotate 300ms ease; size 300ms ease on small icons and lines
Button hover	transition: all .3s, colour #2E5CFF → #033BFF

Do’s and don’ts

Set headlines and labels in uppercase General Sans in ink #2E5CFF on canvas #FFFFFF.
Keep the two 85×85px #2E5CFF corner tiles (logo left, hamburger right) on every page.
Open each section with the 30px blue rule and a 15px weight-600 tracked label.
Use the #2E5CFF pill (30px radius, 53px tall, 17px 30px padding) for the main action and .button-line for the second.
Frame previews and service boxes with 2px solid #2E5CFF and square corners.
Use #FFD22E and #5BFF2E only as whole backgrounds behind blue type.
Add a second brand colour for text or buttons. Blue is the only text colour besides #616161 body copy.
Round images or cards beyond the scale: 0px images, 10px dark cards, 30px pills, circles for portraits.
Use EB Garamond anywhere except the italic hover flip in the menu.
Put blue #2E5CFF text on #151619 below display size; it is only about 3.5:1 there.
Add drop shadows beyond the single 11px 11px 30px #00000026 shadow on floating previews.
Use letter spacing on headlines; only labels and line links get 1px.

Example prompt

Any page in the Bryn style

Prompt

Build your page in the Bryn style. White #FFFFFF background; all headlines and labels in General Sans, uppercase, royal blue #2E5CFF. Pin an 85×85px #2E5CFF square to the top left with a white stacked "BR/YN" logo and another to the top right with a white two-bar hamburger that opens a full-screen #151619 menu of 100px uppercase blue links (weight 600, line height 1) that flip to EB Garamond italic on hover. Sections are 100px top and bottom, 5% sides, 1200px container. Open each section with a 30px blue rule and a 15px weight-600 uppercase label with 1px tracking. Section titles are 48px weight 600, line height 1.15. Paragraphs are 17px weight 500 #616161. Main button: #2E5CFF pill, white 16px weight 500 text, 53px tall, padding 17px 30px, radius 30px, hover #033BFF over 0.3s. Frame images and boxes with 2px solid #2E5CFF and square corners. Use flat #FFD22E or #5BFF2E backgrounds for work showcases. Motion: fade and rise 30px over 500ms outExpo.

# Bryn Design System

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

## Overview

Bryn is a loud, single-colour portfolio for a digital
designer or a small agency. Almost everything on a white
page is royal blue #2E5CFF: the uppercase General Sans
headlines, the frames, the buttons and the two square
tiles pinned to the top corners. Colour beyond the blue

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background          |
| surface-1    | #F5F5F5     | Light grey fills behind… |
| field        | #FFFFFF     | Form inputs and their 1… |
| field-line   | #C3C8CC 60% | With field: Form inputs… |
| inverse-can… | #151619     | Menu overlay, dark work… |
| on-primary   | #FFFFFF     | Text and icons on blue   |
| ink          | #2E5CFF     | Headlines, labels, link… |
| ink-muted    | #616161     | Paragraphs (p), the foo… |
| ink-muted-h… | #A3A3A3     | Footer dark-link on hov… |
| inverse-ink  | #FFFFFF     | Text on the dark servic… |
| primary      | #2E5CFF     | Filled pill buttons, th… |
| primary-hov… | #033BFF     | .button:hover, a deeper… |
| accent       | #FFD22E     | Golden yellow: full-ble… |
| accent-lime  | #5BFF2E     | Lime green: full-bleed … |

## Typography

- display-menu: General Sans 100px / 600
- display-menu-serif: EB Garamond 100px / 400
- display-hero: General Sans 86px / 600
- headline-lg: General Sans 48px / 600

{
  "$description": "Bryn design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#2E5CFF",
      "$description": "Filled pill buttons, the blue band, the corner tiles"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#033BFF",
      "$description": ".button:hover, a deeper blue"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text and icons on blue"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F5F5F5",
      "$description": "Light grey fills behind previews and image placeholders"
    },
    "ink": {
      "$type": "color",
      "$value": "#2E5CFF",
      "$description": "Headlines, labels, links, intros"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#616161",
      "$description": "Paragraphs (p), the footer line © This is a Masterthemes template, input text"
    },
    "ink-muted-hover": {
      "$type": "color",
      "$value": "#A3A3A3",
      "$description": "Footer dark-link on hover"
    },
    "line": {
      "$type": "color",
      "$value": "#2E5CFF",

/* Bryn 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-field, p-lg */

@theme {
  /* Colors */
  --color-primary: #2E5CFF;
  --color-primary-hover: #033BFF;
  --color-on-primary: #FFFFFF;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F5F5F5;
  --color-ink: #2E5CFF;
  --color-ink-muted: #616161;
  --color-ink-muted-hover: #A3A3A3;
  --color-line: #2E5CFF;
  --color-field: #FFFFFF;
  --color-field-line: #C3C8CC99;
  --color-accent: #FFD22E;
  --color-accent-lime: #5BFF2E;
  --color-inverse-canvas: #151619;
  --color-inverse-surface: #1A1B1F;
  --color-inverse-ink: #FFFFFF;

  /* Fonts */
  --font-sans: "General Sans", "Inter", sans-serif;
  --font-general-sans: "General Sans", "Inter", sans-serif;
  --font-eb-garamond: "EB Garamond", serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-menu: 100px;
  --text-display-menu--line-height: 1.0;
  --text-display-menu--letter-spacing: 0px;
  --text-display-menu--font-weight: 600;
  --text-display-menu-serif: 100px;
  --text-display-menu-serif--line-height: 1.0;
  --text-display-menu-serif--letter-spacing: 0px;
  --text-display-menu-serif--font-weight: 400;
  --text-display-hero: 86px;
  --text-display-hero--line-height: 1.0;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 600;
  --text-headline-lg: 48px;
  --text-headline-lg--line-height: 1.15;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 600;
  --text-headline-md: 38px;

/* Bryn 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: #2E5CFF; /* Filled pill buttons, the blue band, the corner tiles */
  --color-primary-hover: #033BFF; /* .button:hover, a deeper blue */
  --color-on-primary: #FFFFFF; /* Text and icons on blue */
  --color-canvas: #FFFFFF; /* Page background */
  --color-surface-1: #F5F5F5; /* Light grey fills behind previews and image placeholders */
  --color-ink: #2E5CFF; /* Headlines, labels, links, intros */
  --color-ink-muted: #616161; /* Paragraphs (p), the footer line © This is a Masterthemes template, input text */
  --color-ink-muted-hover: #A3A3A3; /* Footer dark-link on hover */
  --color-line: #2E5CFF; /* 2px solid frames around previews and service boxes */
  --color-field: #FFFFFF; /* Form inputs and their 1px border */
  --color-field-line: #C3C8CC99; /* With field: Form inputs and their 1px border */
  --color-accent: #FFD22E; /* Golden yellow: full-bleed work backgrounds, the style-guide swatch */
  --color-accent-lime: #5BFF2E; /* Lime green: full-bleed work backgrounds, the style-guide swatch */
  --color-inverse-canvas: #151619; /* Menu overlay, dark work and contact pages */
  --color-inverse-surface: #1A1B1F; /* Dark service cards (service-card-wrapper) */
  --color-inverse-ink: #FFFFFF; /* Text on the dark service cards and on the blue band */

  /* Fonts */
  --font-general-sans: "General Sans", "Inter", sans-serif;
  --font-eb-garamond: "EB Garamond", serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-menu: 100px;
  --text-display-menu-font: var(--font-general-sans);
  --text-display-menu-weight: 600;
  --text-display-menu-line-height: 1.0;
  --text-display-menu-tracking: 0px;
  --text-display-menu-serif: 100px;
  --text-display-menu-serif-font: var(--font-eb-garamond);
  --text-display-menu-serif-weight: 400;
  --text-display-menu-serif-line-height: 1.0;
  --text-display-menu-serif-tracking: 0px;
  --text-display-hero: 86px;
  --text-display-hero-font: var(--font-general-sans);
  --text-display-hero-weight: 600;
  --text-display-hero-line-height: 1.0;
  --text-display-hero-tracking: 0px;
  --text-headline-lg: 48px;
  --text-headline-lg-font: var(--font-general-sans);
  --text-headline-lg-weight: 600;
  --text-headline-lg-line-height: 1.15;

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

Portfolio 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-menu

General Sans · headline-lg

General Sans · title-lg

General Sans · body-lead

General Sans · label-button

General Sans · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Bryn style

More design systems like this

Kai's

Flaue Udo

Artist

Brian Miller

Bring any of them to your AI tool