DESIGN.md · Free

Brickfolio design system

Personal portfolio website: a near-black page, light grey text in Inter, translucent white cards with hairlines and one orange accent for buttons, labels and hovers.

The style

Brickfolio is a one-page portfolio template for a designer or creator: a profile card that stays beside the page, projects, services, testimonials, experience, client logos, articles, a contact form and questions on Home, then a page for each project and each post. It should feel quiet, dark and precise: one column of blocks on an Ink page, with the work's photos as the only large colour.

The look is built from very few parts. The page is Ink (#050505); titles, names and text are Light (#e4e4e4), the longer texts White at 80 %, the meta White at 60 % and the rotating roles Grey (#8d8d8d). Cards, chips, the FAQ rows and the newsletter box are the same surface: White at 3 % with a 1px White 5 % hairline drawn inside. The one accent, Accent (#fc5000), labels the pill buttons and the facts of an article, fills the form buttons at 80 % and marks every hovered link and post title; the pills carry a faint orange inner glow.

One font family carries it: Inter, with its optical size fixed at 14 on the whole page, at weight 500 for headings and 400 for text; the accent word of every section title is bold italic. Fragment Mono appears only for inline code in the posts. Motion is limited to one stiff spring for every hover and state change, two slow tickers (testimonials and client logos), the roles under the name stepping up every 4 s, and a service card whose images light up and drift while hovered. Nothing appears on scroll and nothing counts up.

Colours

Ink#050505ink · on-secondary · neutral · surfaceInk: the page, the header bar, the phone service cards, the labels on Light fills (Load More, the white pill and the close button on hover).
Light#e4e4e4light · on-primary · secondary · on-surfaceLight: titles, names, body text of the articles, the nav links and their underline, the Load More fill, the close button's X, the white pill and close button on hover.
Grey#8d8d8dgreyGrey: the rotating roles, testimonial roles, the Contact Me link and its line, the 404 code.
Accent#fc5000accent · primaryAccent (orange): the pill buttons' label, the stars, the fact labels of the article header, hovered links and post titles, form field errors.
White#ffffffwhiteWhite: the base of the translucent whites below; the spinner of the form buttons.
Snow#fafafasnowSnow: typed text and placeholders (at 50 %) of the contact form, the FAQ plus and minus.
White 80rgba(255, 255, 255, 0.8)white-80 · on-surface-variantWhite 80 %: section texts, card summaries, quotes, FAQ answers, the newsletter text, the copyright line.
White 60rgba(255, 255, 255, 0.6)white-60White 60 %: the card meta (service or category, the dot, the date), the experience company and period.
White 10rgba(255, 255, 255, 0.1)white-10 · outlineWhite 10 %: the dividers, the header's bottom line, the close button's fill and hairline.
White 5rgba(255, 255, 255, 0.05)white-5White 5 %: the 1px hairline drawn inside cards, chips, the FAQ rows, the newsletter box and pill, a hovered card; the fill behind inline code.
White 3rgba(255, 255, 255, 0.03)white-3White 3 %: the fill of cards, chips, price tags, the FAQ rows and squares, the newsletter box and pill, the white pill, a hovered project or post card.
Accent 80rgba(252, 80, 0, 0.8)accent-80Orange 80 %: the form buttons (Send message, Subscribe) at rest; full Accent on hover.
Accent 10rgba(252, 80, 0, 0.1)accent-10Orange 10 %: the orange pills' hairline, the primary pill's fill on hover.
Accent 3rgba(252, 80, 0, 0.03)accent-3Orange 3 %: the orange pills' fill at rest.
Field fillrgba(187, 187, 187, 0.15)field-fillField: the contact fields' fill (#bbbbbb at 15 %).
Field linergba(136, 136, 136, 0.1)field-lineField Line: the contact fields' 1px hairline at rest (#888888 at 10 %).
Focus#0099fffocusFocus: the hairline of the contact field being typed in.
Danger#ff2244danger · errorDanger: a contact field that failed the check (its hairline); a failed form button at 15 % (dangerFill).
Danger fillrgba(255, 34, 68, 0.15)danger-fillDanger 15 %: the form button's fill after a failed send.

Typography · Inter

h1
28px · 500 · 1.2Brickfolio
h2
24px · 500 · 1.2Brickfolio
title
26px · 500 · 1.2Brickfolio
h5
20px · 500 · 1.2Build a site that feels designed
h6
18px · 500 · 1.2Build a site that feels designed
large
16px · 400 · 1.4Build a site that feels designed
body
14px · 400 · 1.4Build a site that feels designed
small
12px · 400 · 1.4Build a site that feels designed
tiny
10px · 400 · 1.4Build a site that feels designed
button
12px · 500 · 1.2Build a site that feels designed
nav
12px · 400 · 1.2 · 0.03emBuild a site that feels designed
field
15px · 400 · 1.2Build a site that feels designed

Corners

pill · 50px
box · 20px
card · 10px
cover · 8px
button · 6px
chip · 5px
field · 4px
tile · 2px

Spacing

gutter · 80px
gutter-phone · 20px
gutter-tablet · 30px
gutter-laptop · 40px
page-padding · 60px
page-padding-phone · 30px
page-padding-tablet · 40px
page-padding-laptop · 50px
content-max · 1000px
wide-max · 1200px
header-height · 100px
header-height-phone · 70px
header-height-tablet · 85px
block-gap · 50px
article-gap · 30px
home-section-gap · 80px
card-gap · 20px
scroll-margin · 160px
scroll-margin-phone · 100px
scroll-margin-tablet · 125px
scroll-margin-laptop · 150px

Parts

Get startedGet startedGet startedGet started

Drawn from the file’s component tokens.

Do's and don'ts

keep every page Ink and build every card, chip and box from the same surface: White 3 % with a White 5 % hairline drawn inside.
set every text in Inter with the optical size fixed at 14: 500 for headings, 400 for text, the accent word of a section title bold italic.
use Light for titles and text, White 80 % for longer texts, White 60 % for meta and Grey for the roles and quiet links.
keep Accent for the pill labels, the article facts' labels, the form buttons and the hover of links and post titles.
show project and post photos at 50 % greyscale and give them their colour on hover, with the stiff spring.
let the profile card stay beside the column from 1000 up, and end each page column with the newsletter box.

add a light section, a coloured band or a gradient: the only large colour is the photos.
give cards a drop shadow: depth is the translucent surface and its hairline; the orange glows belong to the pills and the hovered service card.
use another typeface for text or titles; Fragment Mono is only for inline code.
round cards more than 10 or make photos fully round, except the profile and testimonial portraits.
animate anything on scroll or count numbers up: the motion is hover, the roles, the tickers, the service images, the menu and the questions.

Get Brickfolio

Brickfolio

One-page personal portfolio

Framer
Next.js
Astro
HTML
AI prompt

4 pages

This file describes Brickfolio’s style. The template is the whole site: every page, its content and its motion, free to remix in Framer, with code editions for selected plans.

Remix free in Framer Live preview Every edition

---
version: "alpha"
name: "Brickfolio"
description: "Personal portfolio website: a near-black page, light grey text in Inter, translucent white cards with hairlines and one orange accent for buttons, labels and hovers."
colors:
  ink: "#050505"
  light: "#e4e4e4"
  grey: "#8d8d8d"
  accent: "#fc5000"
  white: "#ffffff"
  snow: "#fafafa"
  white-80: "rgba(255, 255, 255, 0.8)"
  white-60: "rgba(255, 255, 255, 0.6)"
  white-10: "rgba(255, 255, 255, 0.1)"
  white-5: "rgba(255, 255, 255, 0.05)"
  white-3: "rgba(255, 255, 255, 0.03)"
  accent-80: "rgba(252, 80, 0, 0.8)"
  accent-10: "rgba(252, 80, 0, 0.1)"
  accent-3: "rgba(252, 80, 0, 0.03)"
  field-fill: "rgba(187, 187, 187, 0.15)"
  field-line: "rgba(136, 136, 136, 0.1)"
  focus: "#0099ff"
  danger: "#ff2244"
  danger-fill: "rgba(255, 34, 68, 0.15)"
  primary: "{colors.accent}"
  on-primary: "{colors.light}"
  secondary: "{colors.light}"
  on-secondary: "{colors.ink}"
  neutral: "{colors.ink}"
  surface: "{colors.ink}"
  on-surface: "{colors.light}"
  on-surface-variant: "{colors.white-80}"
  outline: "{colors.white-10}"
  error: "{colors.danger}"
typography:
  h1:
    fontFamily: "Inter"
    fontSize: "28px"
    fontWeight: 500
    lineHeight: 1.2
    fontVariation: "'opsz' 14"
  h2:
    fontFamily: "Inter"
    fontSize: "24px"
    fontWeight: 500
    lineHeight: 1.2
    fontVariation: "'opsz' 14"
  title:
    fontFamily: "Inter"
    fontSize: "26px"
    fontWeight: 500
    lineHeight: 1.2
    fontVariation: "'opsz' 14"
  h5:
    fontFamily: "Inter"
    fontSize: "20px"
    fontWeight: 500
    lineHeight: 1.2
    fontVariation: "'opsz' 14"
  h6:
    fontFamily: "Inter"
    fontSize: "18px"
    fontWeight: 500
    lineHeight: 1.2
    fontVariation: "'opsz' 14"
  large:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.4
    fontVariation: "'opsz' 14"
  body:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.4
    fontVariation: "'opsz' 14"
  small:
    fontFamily: "Inter"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: 1.4
    fontVariation: "'opsz' 14"
  tiny:
    fontFamily: "Inter"
    fontSize: "10px"
    fontWeight: 400
    lineHeight: 1.4
    fontVariation: "'opsz' 14"
  button:
    fontFamily: "Inter"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: 1.2
    fontVariation: "'opsz' 14"
  nav:
    fontFamily: "Inter"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: "0.03em"
    fontVariation: "'opsz' 14"
  field:
    fontFamily: "Inter"
    fontSize: "15px"
    fontWeight: 400
    lineHeight: 1.2
    fontVariation: "'opsz' 14"
rounded:
  pill: "50px"
  box: "20px"
  card: "10px"
  cover: "8px"
  button: "6px"
  chip: "5px"
  field: "4px"
  tile: "2px"
spacing:
  gutter: "80px"
  gutter-phone: "20px"
  gutter-tablet: "30px"
  gutter-laptop: "40px"
  page-padding: "60px"
  page-padding-phone: "30px"
  page-padding-tablet: "40px"
  page-padding-laptop: "50px"
  content-max: "1000px"
  wide-max: "1200px"
  header-height: "100px"
  header-height-phone: "70px"
  header-height-tablet: "85px"
  block-gap: "50px"
  article-gap: "30px"
  home-section-gap: "80px"
  card-gap: "20px"
  scroll-margin: "160px"
  scroll-margin-phone: "100px"
  scroll-margin-tablet: "125px"
  scroll-margin-laptop: "150px"
components:
  nav-link:
    textColor: "{colors.light}"
    typography: "{typography.nav}"
  nav-link-hover:
    textColor: "{colors.accent}"
  pill-button:
    textColor: "{colors.accent}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "10px 16px"
    height: "34.4px"
  pill-button-hover:
    textColor: "{colors.accent}"
  pill-button-secondary:
    textColor: "{colors.accent}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "6px 12px"
    height: "28px"
  pill-button-white:
    textColor: "{colors.light}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "10px 16px"
  pill-button-white-hover:
    backgroundColor: "{colors.light}"
    textColor: "{colors.ink}"
  text-link:
    textColor: "{colors.grey}"
    typography: "{typography.button}"
  text-link-hover:
    textColor: "{colors.accent}"
  load-more-button:
    backgroundColor: "{colors.light}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.button}"
    width: "150px"
    height: "40px"
  form-button:
    textColor: "{colors.light}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "10px 16px"
    height: "34.4px"
  form-button-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.light}"
  close-button:
    textColor: "{colors.light}"
    rounded: "{rounded.pill}"
    size: "56px"
    padding: "16px"
  close-button-hover:
    backgroundColor: "{colors.light}"
    textColor: "{colors.ink}"
  section-title:
    textColor: "{colors.light}"
    typography: "{typography.h2}"
  project-card:
    textColor: "{colors.light}"
    typography: "{typography.h6}"
    rounded: "{rounded.card}"
    height: "527px"
  post-card:
    textColor: "{colors.light}"
    typography: "{typography.h6}"
    rounded: "{rounded.card}"
    height: "343px"
  service-card:
    textColor: "{colors.light}"
    typography: "{typography.h5}"
    rounded: "{rounded.card}"
    padding: "24px"
  price-tag:
    textColor: "{colors.light}"
    typography: "{typography.small}"
    rounded: "{rounded.chip}"
    padding: "5px"
  testimonial-card:
    textColor: "{colors.white-80}"
    typography: "{typography.small}"
    rounded: "{rounded.cover}"
    padding: "20px"
    width: "350px"
    height: "245px"
  experience-card:
    textColor: "{colors.light}"
    typography: "{typography.h6}"
    rounded: "{rounded.cover}"
    padding: "20px"
  faq-row:
    textColor: "{colors.light}"
    typography: "{typography.h6}"
    rounded: "{rounded.cover}"
    padding: "20px"
  social-chip:
    textColor: "{colors.light}"
    typography: "{typography.large}"
    rounded: "{rounded.tile}"
    size: "32px"
  form-field:
    textColor: "{colors.snow}"
    typography: "{typography.field}"
    rounded: "{rounded.field}"
    padding: "12px"
    height: "40px"
  newsletter-form:
    textColor: "{colors.light}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
---

# Brickfolio Design System

> The design tokens and style rules of **Brickfolio**, a website template by Framebrick (live Framer site: https://brickfolio.framer.website). Read it before you build or change a page so new work matches the template. The front matter holds the exact values; the sections below say where and how to use them. Format: [DESIGN.md](https://github.com/google-labs-code/design.md), spec version `alpha`.

## Overview

Brickfolio is a one-page portfolio template for a designer or creator: a profile card that stays beside the page, projects, services, testimonials, experience, client logos, articles, a contact form and questions on Home, then a page for each project and each post. It should feel quiet, dark and precise: one column of blocks on an Ink page, with the work's photos as the only large colour.

The look is built from very few parts. The page is Ink (#050505); titles, names and text are Light (#e4e4e4), the longer texts White at 80 %, the meta White at 60 % and the rotating roles Grey (#8d8d8d). Cards, chips, the FAQ rows and the newsletter box are the same surface: White at 3 % with a 1px White 5 % hairline drawn inside. The one accent, Accent (#fc5000), labels the pill buttons and the facts of an article, fills the form buttons at 80 % and marks every hovered link and post title; the pills carry a faint orange inner glow.

One font family carries it: Inter, with its optical size fixed at 14 on the whole page, at weight 500 for headings and 400 for text; the accent word of every section title is bold italic. Fragment Mono appears only for inline code in the posts. Motion is limited to one stiff spring for every hover and state change, two slow tickers (testimonials and client logos), the roles under the name stepping up every 4 s, and a service card whose images light up and drift while hovered. Nothing appears on scroll and nothing counts up.

## Colors

- **Ink (#050505)** — `ink`, `on-secondary`, `neutral`, `surface`. Ink: the page, the header bar, the phone service cards, the labels on Light fills (Load More, the white pill and the close button on hover).
- **Light (#e4e4e4)** — `light`, `on-primary`, `secondary`, `on-surface`. Light: titles, names, body text of the articles, the nav links and their underline, the Load More fill, the close button's X, the white pill and close button on hover.
- **Grey (#8d8d8d)** — `grey`. Grey: the rotating roles, testimonial roles, the Contact Me link and its line, the 404 code.
- **Accent (#fc5000)** — `accent`, `primary`. Accent (orange): the pill buttons' label, the stars, the fact labels of the article header, hovered links and post titles, form field errors.
- **White (#ffffff)** — `white`. White: the base of the translucent whites below; the spinner of the form buttons.
- **Snow (#fafafa)** — `snow`. Snow: typed text and placeholders (at 50 %) of the contact form, the FAQ plus and minus.
- **White 80 (rgba(255, 255, 255, 0.8))** — `white-80`, `on-surface-variant`. White 80 %: section texts, card summaries, quotes, FAQ answers, the newsletter text, the copyright line.
- **White 60 (rgba(255, 255, 255, 0.6))** — `white-60`. White 60 %: the card meta (service or category, the dot, the date), the experience company and period.
- **White 10 (rgba(255, 255, 255, 0.1))** — `white-10`, `outline`. White 10 %: the dividers, the header's bottom line, the close button's fill and hairline.
- **White 5 (rgba(255, 255, 255, 0.05))** — `white-5`. White 5 %: the 1px hairline drawn inside cards, chips, the FAQ rows, the newsletter box and pill, a hovered card; the fill behind inline code.
- **White 3 (rgba(255, 255, 255, 0.03))** — `white-3`. White 3 %: the fill of cards, chips, price tags, the FAQ rows and squares, the newsletter box and pill, the white pill, a hovered project or post card.
- **Accent 80 (rgba(252, 80, 0, 0.8))** — `accent-80`. Orange 80 %: the form buttons (Send message, Subscribe) at rest; full Accent on hover.
- **Accent 10 (rgba(252, 80, 0, 0.1))** — `accent-10`. Orange 10 %: the orange pills' hairline, the primary pill's fill on hover.
- **Accent 3 (rgba(252, 80, 0, 0.03))** — `accent-3`. Orange 3 %: the orange pills' fill at rest.
- **Field fill (rgba(187, 187, 187, 0.15))** — `field-fill`. Field: the contact fields' fill (#bbbbbb at 15 %).
- **Field line (rgba(136, 136, 136, 0.1))** — `field-line`. Field Line: the contact fields' 1px hairline at rest (#888888 at 10 %).
- **Focus (#0099ff)** — `focus`. Focus: the hairline of the contact field being typed in.
- **Danger (#ff2244)** — `danger`, `error`. Danger: a contact field that failed the check (its hairline); a failed form button at 15 % (dangerFill).
- **Danger fill (rgba(255, 34, 68, 0.15))** — `danger-fill`. Danger 15 %: the form button's fill after a failed send.

Semantic names in the front matter point at these colours: `primary` → `accent`, `on-primary` → `light`, `secondary` → `light`, `on-secondary` → `ink`, `neutral` → `ink`, `surface` → `ink`, `on-surface` → `light`, `on-surface-variant` → `white-80`, `outline` → `white-10`, `error` → `danger`.

## Typography

**Inter, sans-serif.** Inter from Google Fonts, the variable font with its italic (weights 400, 500 and 700 in use; the accent words of the section titles are bold italic). Its optical size axis is fixed at 14 on the whole page: the text cut at every size, or lines break at other words.

Font sizes change at the breakpoints (phone / tablet from 810px / laptop from 1000px / desktop from 1440px); the front matter gives the desktop size. Line height is a multiple of the font size.

| Token | Size (phone / tablet / laptop / desktop) | Line height | Weight | Letter spacing | Use |
|---|---|---|---|---|---|
| `h1` | 24px / 26px / 28px / 28px | 1.2 | 500 | —, opsz 14 | H1: the headline of the profile card, the title of a project or post page |
| `h2` | 20px / 22px / 24px / 24px | 1.2 | 500 | —, opsz 14 | H2: section titles (their accent word bold italic: weight 700, italic), the newsletter title, Project Overview and Key Highlights, the headings inside the article texts |
| `title` | 22px / 24px / 26px / 26px | 1.2 | 500 | —, opsz 14 | Title: More Projects and More Posts on the project and post pages; the 404 message from 1440 up |
| `h5` | 18px / 19px / 20px / 20px | 1.2 | 500 | —, opsz 14 | H5: service titles and the two call-to-action lines on Home |
| `h6` | 14px / 16px / 18px / 18px | 1.2 | 500 | —, opsz 14 | H6: project and post card titles, FAQ questions, experience roles |
| `large` | 16px | 1.4 | 400 | —, opsz 14 | Large paragraph: the greeting, testimonial names, the social chips' letters, the 404 line from 1440 up |
| `body` | 14px | 1.4 | 400 | —, opsz 14 | Paragraph: section texts, the profile text, article texts (bold runs 700), the article facts' values, form labels, the newsletter field, the copyright |
| `small` | 12px | 1.4 | 400 | —, opsz 14 | Small paragraph: card summaries, quotes, prices, testimonial roles, experience company and period, FAQ answers, the article facts' labels, form errors |
| `tiny` | 10px | 1.4 | 400 | —, opsz 14 | Tiny: the card meta (service or category, the date) |
| `button` | 12px | 1.2 | 500 | —, uppercase, opsz 14 | Button: every button and pill label, the phone Menu label, Contact Me |
| `nav` | 12px | 1.2 | 400 | 0.03em, uppercase, opsz 14 | Nav: the header links |
| `field` | 15px | 1.2 | 400 | —, opsz 14 | Field: typed text and placeholders of the contact form |

## Layout

Four layouts: phone below 810px, tablet from 810px, laptop from 1000px, desktop from 1440px. Spacing tokens without a suffix are the desktop values; `-laptop`, `-tablet` and `-phone` give the smaller screens where they differ.

| Token | Phone / tablet / laptop / desktop | Use |
|---|---|---|
| `gutter` | 20px / 30px / 40px / 80px | Side padding of the page column and the header |
| `page-padding` | 30px / 40px / 50px / 60px | Top and bottom padding of the page column under the header (Home, project, post and 404) |
| `content-max` | 1000px | Width of the page column of the project, post and 404 pages and of Home's sidebar + main row below 1440 (centred); Home and the header take 1200 from 1440 up |
| `wide-max` | 1200px | Width of the header column and of Home's sidebar + main row from 1440 up |
| `header-height` | 70px / 85px / 100px / 100px | The sticky header: padding 20 / 25 × 30 / 30 × 40 / 30 × 80 around the logo (30 / 35 / 40 / 40 tall) |
| `block-gap` | 50px | Between the blocks of the project and post pages (article, divider, More, footer) and between the 404's text and button |
| `article-gap` | 30px | Between the parts of an article (header, cover, texts, gallery) and between a section title and its content |
| `home-section-gap` | 80px | Between the sections of Home's main column |
| `card-gap` | 20px | Between project cards, post cards, service cards, the FAQ rows, the gallery's two images |
| `scroll-margin` | 100px / 125px / 150px / 160px | Space kept above a Home section when a link jumps to it (below the sticky header) |

Every page is one column under the sticky header: `page-padding` above and below it, `gutter` at the sides, at most `content-max` (1000) wide and centred. On Home the profile card and the column of blocks sit side by side from 1000 up (35 % / 60 apart on laptops, 39 % / 100 apart and `wide-max` wide from 1440) and the profile card sticks below the header; below 1000 it sits on top with a Grey line under it. Home's blocks are `home-section-gap` (80) apart; the project and post pages put the article, a divider, the next cards and the footer `block-gap` (50) apart, and the parts of an article `article-gap` (30) apart.

The header is a sticky Ink bar of `header-height` with a White 10 % line along its bottom; it never changes with the scroll, and on phones a Menu button opens the links under the logo. The footer is not full width: it is the last block of the page column, a newsletter box over the copyright line. Anchored sections keep `scroll-margin` above them. Project and post pages float a round close button at the bottom of the window.

## Elevation & Depth

Brickfolio is nearly flat: depth comes from translucent white surfaces (White 3 % with a White 5 % hairline drawn inside) on the Ink page. The only shadows are orange: the pills' inner glow (`pill`), which gains three soft drop shadows on hover (`pill-hover`), and the glow around a hovered service card (`card-hover`, from 810 up). The header and the close button blur what passes under them (10).

- **`pill`:** `box-shadow: inset 3px 3px 3px 0px rgba(252, 80, 0, 0.05), inset 0px 0px 20px 0px rgba(252, 80, 0, 0.05)`. The orange pills at rest: an inner orange glow (both layers inset); written as a CSS shadow list because two layers are inset.
- **`pill-hover`:** `box-shadow: inset 3px 3px 3px 0px rgba(252, 80, 0, 0.05), inset 0px 0px 20px 0px rgba(252, 80, 0, 0.05), 0px 4px 4px 0px rgba(252, 80, 0, 0.03), 0px 6px 6px 0px rgba(252, 80, 0, 0.05), 0px 10px 10px 0px rgba(252, 80, 0, 0.1)`. The orange pills on hover: the inner glow (first two layers inset) and three soft orange drop shadows; written as a CSS shadow list because two layers are inset.
- **`card-hover`:** `box-shadow: 4px 4px 10px 4px rgba(252, 80, 0, 0.05)`. A hovered service card (from 810 up).

## Shapes

Corners are small and graded by size: the newsletter box 20, the project, post and service cards and their photos 10, covers, experience and testimonial cards and the FAQ rows 8, the Load More button 6, the price tag 5, the contact fields 4 and the social chips 2. Buttons, the newsletter pill and the close button are fully round (`pill`); profile and testimonial photos are circles.

- **`pill` (50px):** Pill buttons, the form buttons, the newsletter field, the close button (fully round).
- **`box` (20px):** The newsletter box.
- **`card` (10px):** Project, post and service cards and their photos, the gallery images of a project.
- **`cover` (8px):** The cover of a project or post, experience and testimonial cards, the FAQ rows.
- **`button` (6px):** The Load More button, inline code.
- **`chip` (5px):** The price tag of a service card.
- **`field` (4px):** The contact form fields.
- **`tile` (2px):** The social chips and their icon tiles, the FAQ plus and minus square.

## Motion

Reduced motion: the roles, both tickers and the service images stand still, the menu and the FAQ answers open without movement and the form's ring does not turn; colour and opacity changes still fade.

- **`spring`** — spring (stiffness 500, damping 60, mass 1). Every hover and state change (buttons, links, cards, the menu, the accordion, the social chips); never overshoots, settles in about 0.7 s. As a CSS curve: linear(0, 0.096, 0.257, 0.409, 0.535, 0.636, 0.715, 0.777, 0.826, 0.864, 0.893, 0.917, 0.935, 0.949, 0.96, 0.969, 0.976, 0.981, 0.985, 0.988, 0.991, 0.993, 0.994, 0.996, 0.997, 0.997, 0.998, 0.998, 0.999, 1) over 714ms.
- **`role-spring`** — spring (stiffness 200, damping 40, mass 1). The rotating roles under the name: one step up.
- **`role-interval`** — every 4s. Time between two steps of the rotating roles; they stay on the first role with reduced motion.
- **`ease-form`** — `cubic-bezier(0.44, 0, 0.56, 1)`. The form buttons' fill on hover and press, over 0.2 s.
- **`ticker`** — testimonials 10px/s (the testimonial cards, to the left); logos 20px/s (the client logos, to the left); serviceImages 5px/s (a service card's two image columns while the card is hovered (first up, second down); still at rest). Ticker speeds in px per second; every ticker stands still with reduced motion.
- **`spinner`** — turn 1s. The form buttons' sending ring: one turn a second, linear, for ever.

## Components

Component tokens below use the exact values of the template. Variants with a suffix (`-hover`) only list what changes. Translucent fills (White 3 %, Orange 3 % and 80 %, Field) are described in the notes, not as colours. Every card is one link to its page.

- **`nav-link`** (Nav link). A header link in capitals, 30 apart on one line, with a 1px line at its bottom edge that is 0 wide at rest.
- **`nav-link-hover`** (Nav link). The line grows to the full width from the left; the label and the line turn Accent.
- **`pill-button`** (Pill button). The primary pill ("Hire Me", "Contact", "Back to Homepage"): Orange 3 % fill, a 1px Orange 10 % hairline drawn inside, the `pill` inner glow, a 10 backdrop blur; the header's keeps a 102 minimum width.
- **`pill-button-hover`** (Pill button). Orange 10 % fill and `pill-hover`: three soft orange drop shadows join the glow.
- **`pill-button-secondary`** (Pill button). "More Details", "Download CV": the label and a 16 arrow up-right, 5 apart, with the primary pill's fill, hairline and glow; on hover the arrow turns 45°.
- **`pill-button-white`** (Pill button). "Email me": White 3 % fill and a White 5 % hairline.
- **`pill-button-white-hover`** (Pill button). Light fill and hairline, the label Ink.
- **`text-link`** (Text link). "Contact Me": the label and a 12 arrow, 5 apart, over a 1px Grey line that is 0 wide at rest.
- **`text-link-hover`** (Text link). The label, the arrow and the full-width line turn Accent; the arrow turns 45°.
- **`load-more-button`** (Load More button). "More Projects", "More Posts": the label centred; no hover change.
- **`form-button`** (Form button). "Send message", "Subscribe": Orange 80 % fill, full Accent on hover (0.2 s, `ease-form`); a turning 20 ring while sending, then "Thank you" or, on a Danger 15 % fill, "Something went wrong".
- **`form-button-hover`** (Form button). Full Accent at rest only; no hover while sending or after the answer.
- **`close-button`** (Close button). A round link fixed at the bottom of the window: White 10 % fill and hairline, a 24 X, a 10 backdrop blur.
- **`close-button-hover`** (Close button). Light fill and hairline, the X Ink.
- **`section-title`** (Section title). A block's title (an h2) with its accent word in bold italic (700), and an optional text under it in `body`, White 80 %, 5 apart.
- **`project-card`** (Project card). A 380 tall photo at 50 % greyscale, then the title (44 tall box), the summary (`small`, White 80 %, 34 tall box) and the meta (`tiny`, White 60 %); on hover the card surface appears and the photo gets its colour and square lower corners.
- **`post-card`** (Post card). A 250 tall photo at 50 % greyscale, the meta, then the title in a 44 tall box; hover as the project card, the title Accent.
- **`service-card`** (Service card). The card surface, the content in 65 % of the width (title, price tag, description, More Details) and two columns of the service's images at 10 %; on hover `card-hover`, the images at 80 % and drifting. Ink fill and padding 20 on phones.
- **`price-tag`** (Service card). "Starting at $3,000 per project" on the card surface.
- **`testimonial-card`** (Testimonial card). The card surface: a 50 round photo with the name (`large`, Light) and role (Grey), five Accent stars, the quote; in a ticker at 10 a second.
- **`experience-card`** (Experience card). The card surface: the role and, right-aligned, the company and period (`small`, White 60 %) after 16 icons, then the text in `body`.
- **`faq-row`** (FAQ accordion). The card surface; the question with a 24 square plus (a minus when open); the answer (`small`, White 80 %) opens 15 under it with the spring; one row open at a time.
- **`social-chip`** (Social chips). Two letters ("FB") on White 3 % with a 0.5 White 5 % hairline; hovering one dims all four to 30 % and shows the network's coloured tile.
- **`form-field`** (Form field). Field fill (#bbbbbb at 15 %) with a Field Line hairline drawn inside that turns Focus blue while typing and Danger after a failed check; the label in `body` 5 above; the message box at least 200 tall.
- **`newsletter-form`** (Newsletter form). A pill on the card surface holding the e-mail field and the 100 wide Subscribe button, 20 apart, inside a box with 20 corners.

Other components of the template, described in its spec: Page column, Section, Divider, Article header, Logo, Menu button, Card meta, Image columns, Stars, Rotating roles, Ticker, Icon, Load-more list, Rich text, Collapse, Form.

## Do's and Don'ts

- Do keep every page Ink and build every card, chip and box from the same surface: White 3 % with a White 5 % hairline drawn inside.
- Do set every text in Inter with the optical size fixed at 14: 500 for headings, 400 for text, the accent word of a section title bold italic.
- Do use Light for titles and text, White 80 % for longer texts, White 60 % for meta and Grey for the roles and quiet links.
- Do keep Accent for the pill labels, the article facts' labels, the form buttons and the hover of links and post titles.
- Do show project and post photos at 50 % greyscale and give them their colour on hover, with the stiff spring.
- Do let the profile card stay beside the column from 1000 up, and end each page column with the newsletter box.
- Don't add a light section, a coloured band or a gradient: the only large colour is the photos.
- Don't give cards a drop shadow: depth is the translucent surface and its hairline; the orange glows belong to the pills and the hovered service card.
- Don't use another typeface for text or titles; Fragment Mono is only for inline code.
- Don't round cards more than 10 or make photos fully round, except the profile and testimonial portraits.
- Don't animate anything on scroll or count numbers up: the motion is hover, the roles, the tickers, the service images, the menu and the questions.

## Source

Every value here was measured from the published Brickfolio template (https://brickfolio.framer.website); when this file and the live site disagree, the site is right.

Demo photos (Unsplash, Pexels or the owner's) are placeholders and not part of the design system; the client logos are placeholder marks and the social tiles are the networks' own icons.

This DESIGN.md is licensed under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/): use and adapt it freely, with credit to Framebrick. The template itself (its pages, code and images) is covered by the Framebrick license: https://framebrick.co/license

Use it with your agent

Save it as DESIGN.md at your project’s root.
Ask Claude Code, Cursor, v0 or Lovable to follow it for every page and component it builds.
Or let the agent fetch it: the Framebrick MCP server’s get_design_md tool with { "slug": "brickfolio" }, or the raw file at framebrick.co/templates/brickfolio/design.md.

Connect the MCP server

Be the first to know

One short email when we release a template or a free component. No spam — unsubscribe anytime.

We use your email only for Framebrick updates. Privacy policy