# Tabfolio design system

> Tabfolio design system measured from tabfolio.framer.ai: Manrope font, #04111F primary on #FAFAFA, 10 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/tabfolio.framer.ai/

Tabfolio’s website (tabfolio.framer.ai) uses the Manrope font and #04111F as its main color on a #FAFAFA background. Measured by Sitepeel on November 5, 2026.

## What font does Tabfolio use?

Tabfolio uses Manrope (weights 500 and 600) on tabfolio.framer.ai. Page titles are 40px at weight 500 (34px on phones) and body text is 12px. Measured on November 5, 2026.

- Manrope (weights 500, 600)
- sans-serif (weights 400)

## Tabfolio colors: palette and hex codes

Tabfolio’s main colors are #FAFAFA (snow) for the background, #5B5F63 (cool slate) for text and #04111F (deep blue) as the main accent, with #0000EE (vivid indigo) as another accent. Measured on November 5, 2026.

- #FAFAFA: snow
- #5B5F63: cool slate
- #04111F: deep blue
- #717880: cool slate
- #F0F1F3: mist
- #E8EAED: mist
- #0000EE: vivid indigo

## What is Tabfolio built with?

Tabfolio’s website (tabfolio.framer.ai) is built with Framer, React, Lenis and Motion. Measured on November 5, 2026.

- Site builder & CMS: Framer
- JavaScript framework: React 18.3.1
- Animation & 3D: Lenis 1.1.2, Motion

## Questions and answers

### What font does Tabfolio use?

Tabfolio’s website uses Manrope (weights 500 and 600). Page titles are 40px at weight 500 (34px on phones) and body text is 12px. Measured on November 5, 2026.

### What are the Tabfolio colors and hex codes?

On tabfolio.framer.ai: #FAFAFA (snow) for the background, #5B5F63 (cool slate) for text and #04111F (deep blue) as the main accent, with #0000EE (vivid indigo) as another accent. The color palette above lists all 10 colors with their hex codes and where each one is used.

### What is the Tabfolio design system?

The design system on this page is tabfolio.framer.ai’s, as measured on November 5, 2026: Manrope type, #04111F as the main color and 20px corners, written down as a DESIGN.md. It is not Tabfolio’s own documentation.

### What is Tabfolio built with?

Tabfolio’s website (tabfolio.framer.ai) is built with Framer, React, Lenis and Motion. Measured on November 5, 2026.

### What is the Tabfolio DESIGN.md?

A plain-text file with Tabfolio’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Tabfolio’s official design system?

No. Sitepeel measured it from tabfolio.framer.ai’s public page on November 5, 2026. It is an independent analysis, not made or approved by Tabfolio.

### Can I use Tabfolio’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Tabfolio’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/tabfolio.framer.ai/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Tabfolio.

## The DESIGN.md file

```markdown
---
version: alpha
name: Tabfolio
description: "Light monochrome interface measured from tabfolio.framer.ai: Manrope type with sans-serif, tonal surfaces and 20px corners."
colors:
  background: "#FAFAFA"
  surface: "#FAFAFA"
  on-surface: "#5B5F63"
  on-background: "#5B5F63"
  on-surface-strong: "#04111F"
  on-surface-variant: "#717880"
  surface-container-low: "#F0F1F3"
  overlay: "#DADAE680"
  outline: "#E8EAED"
  primary: "#04111F"
  on-primary: "#FAFAFA"
  secondary: "#0000EE"
typography:
  headline-display:
    fontFamily: Manrope
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.1
  headline-lg:
    fontFamily: Manrope
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.2
  body-md:
    fontFamily: sans-serif
    fontSize: 12px
    fontWeight: 400
  label-lg:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.45
  label-md:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.5
  label-sm:
    fontFamily: Manrope
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
  headline-display-mobile:
    fontFamily: Manrope
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1.2
  headline-lg-mobile:
    fontFamily: Manrope
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.012em
rounded:
  sm: 11px
  md: 20px
  lg: 55px
spacing:
  xs: 4px
  sm: 8px
  md: 10px
  xl: 40px
  gutter: 10px
  section: 80px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 8px 12px
    height: 44px
  button-primary-hover:
    backgroundColor: "#04111FDE"
  button-outline:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface-strong}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 8px 12px
    height: 44px
  button-outline-hover:
    backgroundColor: "{colors.outline}"
---

# Tabfolio Design System

## Overview

Tabfolio describes itself as: “Framer portfolio template for UX and product designers. Showcase case studies, projects, and experiments with a CMS-powered portfolio featuring responsive layouts, dynamic backgrounds, and flexible content sections.” The interface is light, built on **Snow (#FAFAFA)** with **Cool Slate (#5B5F63)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Manrope** and **sans-serif**. Headlines run large; body text is 12px. The surface language is flat. Corners are mostly 20px.

Measured from [tabfolio.framer.ai](https://tabfolio.framer.ai/) on November 5, 2026 at 1440×900 and 390×844 from 92 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 10 roles.

- **Snow (#FAFAFA):** Page background, seen 1 time. Token `background`.
- **Cool Slate (#5B5F63):** Primary text and headings, seen 9 times. Token `on-surface`.
- **Deep Blue (#04111F):** Headings and emphasis, seen 6 times. Token `on-surface-strong`.
- **Cool Slate (#717880):** Secondary text, seen 15 times. Token `on-surface-variant`.
- **Mist (#F0F1F3):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Cool Silver 50% (#DADAE680):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Mist (#E8EAED):** Borders and dividers, seen 1 time. Token `outline`.
- **Deep Blue (#04111F):** Primary buttons and calls to action, seen 7 times. Token `primary`.
- **Snow (#FAFAFA):** Text and icons on primary. Token `on-primary`.
- **Vivid Indigo (#0000EE):** Accent, seen 1 time. Token `secondary`.

## Typography

**Manrope** and **sans-serif** share the interface. Fallback stack: `Manrope, Manrope Placeholder, sans-serif`. Other loaded fonts: Inter.

- **headline-display:** Manrope 40px at weight 500, line height 1.1 (34px on mobile). Page title (h1).
- **headline-lg:** Manrope 20px at weight 600, line height 1.2 (17px on mobile). Section headings (h2).
- **body-md:** sans-serif 12px at weight 400. Body text.
- **label-lg:** Manrope 16px at weight 500, line height 1.45. Large buttons and tabs.
- **label-md:** Manrope 14px at weight 600, line height 1.5. Buttons, navigation and labels.
- **label-sm:** Manrope 12px at weight 600, line height 1.2. Small labels and badges.

## Layout

Spacing does not follow a strict grid: 65% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 4px, sm 8px, md 10px, xl 40px.
- **Sections:** 80px vertical padding between major sections.
- **Gaps:** 10px is the most common gap in flex and grid layouts.
- **Breakpoints:** 809px, 809.98px, 810px, 1279px, 1279.98px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from tonal surface steps (#F0F1F3) and #E8EAED borders.

## Shapes

Most elements use 20px corners. Measured radii, most used first:

- **md (20px):** 12 elements.
- **sm (11px):** 4 elements.
- **lg (55px):** 4 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“My latest work”):** #04111F fill, #FAFAFA text, 12px/400, 20px radius, padding 8px 12px.
- **button-primary-hover:** background #04111FDE, text #FAFAFA on hover.
- **button-outline (“Let's chat”):** #F0F1F3 fill, #04111F text, 12px/400, 20px radius, padding 8px 12px.
- **button-outline-hover:** background #E8EAED, text #04111F on hover.

## Do's and Don'ts

- Do use #FAFAFA for the page and lift surfaces in small steps: #F0F1F3.
- Do keep text in 3 levels: #5B5F63, #04111F, #717880.
- Do let contrast carry emphasis; primary actions use #04111F on #FAFAFA.
- Do reuse the measured spacing steps (8px, 10px).
- Do use 20px corners on most elements; larger surfaces also use 11px and 55px.
- Don't use #717880 for body text; it reaches 4.28:1 on #FAFAFA. Keep it for large text or metadata.
- Don't add drop shadows for depth; use tonal surfaces.
- Don't introduce new font families beyond Manrope and sans-serif.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.

Generated by [Sitepeel](https://sitepeel.dev/design-md/tabfolio.framer.ai/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```