# Folioxa design system

> Folioxa design system measured from folioxa.framer.website: Outfit font, 10 color hex codes, type scale, spacing and a free DESIGN.md. Free.

Canonical page: https://sitepeel.dev/design-md/folioxa.framer.website/

Folioxa’s website (folioxa.framer.website) uses the Outfit font on a #F7F7F7 background. Measured by Sitepeel on November 7, 2026.

## What font does Folioxa use?

Folioxa uses Outfit (weights 400, 500 and 600) and Switzer (weight 600) on folioxa.framer.website. Page titles are 50px at weight 600 (28px on phones) and body text is 16px. Measured on November 7, 2026.

- Outfit (weights 400, 500, 600)
- sans-serif (weights 400)
- Switzer (weights 600)

## Folioxa colors: palette and hex codes

Folioxa’s main colors are #F7F7F7 (snow) for the background and #000000 (near black) for text, with #FF6E13 (vivid orange) as another accent. Measured on November 7, 2026.

- #F7F7F7: snow
- #000000: near black
- #212121: charcoal
- #323745: dark blue
- #666666: slate
- #FFFFFF: white
- #EDEFF3: cool mist
- #FF6E13: vivid orange

## What is Folioxa built with?

Folioxa’s website (folioxa.framer.website) is built with Framer, React, styled-components, Lenis and Motion. Measured on November 7, 2026.

- Site builder & CMS: Framer
- JavaScript framework: React 18.2.0
- UI & CSS: styled-components 5.3.6
- Animation & 3D: Lenis 1.3.17-framer, Motion
- Fonts & icons: Google Fonts

## Questions and answers

### What font does Folioxa use?

Folioxa’s website uses Outfit (weights 400, 500 and 600) and Switzer (weight 600). Page titles are 50px at weight 600 (28px on phones) and body text is 16px. Measured on November 7, 2026.

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

On folioxa.framer.website: #F7F7F7 (snow) for the background and #000000 (near black) for text, with #FF6E13 (vivid orange) as another accent. The color palette above lists all 10 colors with their hex codes and where each one is used.

### What is the Folioxa design system?

The design system on this page is folioxa.framer.website’s, as measured on November 7, 2026: Outfit type and 10px corners, written down as a DESIGN.md. It is not Folioxa’s own documentation.

### What is Folioxa built with?

Folioxa’s website (folioxa.framer.website) is built with Framer, React, styled-components, Lenis and Motion. The full tech stack Sitepeel found: Framer, React, styled-components, Lenis, Motion and Google Fonts. Measured on November 7, 2026.

### What is the Folioxa DESIGN.md?

A plain-text file with Folioxa’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 Folioxa’s official design system?

No. Sitepeel measured it from folioxa.framer.website’s public page on November 7, 2026. It is an independent analysis, not made or approved by Folioxa.

### Can I use Folioxa’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 Folioxa’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/folioxa.framer.website/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 Folioxa.

## The DESIGN.md file

```markdown
---
version: alpha
name: Folioxa
description: "Light monochrome interface measured from folioxa.framer.website: Outfit type with sans-serif, tonal surfaces and 10px corners."
colors:
  background: "#F7F7F7"
  surface: "#F7F7F7"
  on-surface: "#000000"
  on-background: "#000000"
  on-surface-variant: "#212121"
  on-surface-muted: "#323745"
  on-surface-subtle: "#666666"
  surface-container-low: "#FFFFFF"
  outline: "#EDEFF3"
  primary: "#000000"
  on-primary: "#FFFFFF"
  secondary: "#FF6E13"
typography:
  headline-display:
    fontFamily: Outfit
    fontSize: 50px
    fontWeight: 600
    lineHeight: 1
  headline-lg:
    fontFamily: Outfit
    fontSize: 46px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Outfit
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.02em
  headline-sm:
    fontFamily: Outfit
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.02em
  title-lg:
    fontFamily: Outfit
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.2
  body-md:
    fontFamily: Outfit
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Outfit
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.01em
  body-sm:
    fontFamily: sans-serif
    fontSize: 12px
    fontWeight: 400
  label-md:
    fontFamily: Outfit
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.01em
  label-sm:
    fontFamily: Switzer
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1
  headline-display-mobile:
    fontFamily: Outfit
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1
  headline-sm-mobile:
    fontFamily: Outfit
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.02em
rounded:
  xs: 8px
  sm: 10px
  md: 16px
  lg: 99px
  xl: 100px
spacing:
  xs: 4px
  sm: 6px
  md: 10px
  lg: 20px
  xl: 60px
  gutter: 10px
  section: 80px
  margin: 40px
  container: 1310px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: 6px
    height: 41px
  button-primary-hover:
    backgroundColor: "{colors.on-surface-variant}"
  link:
    textColor: "{colors.on-surface-variant}"
---

# Folioxa Design System

## Overview

Folioxa describes itself as: “A minimal, modern portfolio showcasing design, development, and creative work — built with Framer for a smooth, interactive experience.” The interface is light, built on **Snow (#F7F7F7)** with **Near Black (#000000)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Outfit** and **sans-serif**. Headlines run large; body text is 16px. Depth comes from soft drop shadows. Corners are mostly 10px.

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

## Colors

The palette has 10 roles.

- **Snow (#F7F7F7):** Page background, seen 2 times. Token `background`.
- **Near Black (#000000):** Primary text and headings, seen 23 times. Token `on-surface`.
- **Charcoal (#212121):** Secondary text, seen 49 times. Token `on-surface-variant`.
- **Dark Blue (#323745):** Muted text and metadata, seen 2 times. Token `on-surface-muted`.
- **Slate (#666666):** Subtle text and placeholders, seen 41 times. Token `on-surface-subtle`.
- **White (#FFFFFF):** Raised areas one step from the page, seen 7 times. Token `surface-container-low`.
- **Cool Mist (#EDEFF3):** Borders and dividers, seen 5 times. Token `outline`.
- **Near Black (#000000):** Primary buttons and calls to action, seen 32 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Vivid Orange (#FF6E13):** Accent in text, fills and borders, seen 3 times. Token `secondary`.

## Typography

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

- **headline-display:** Outfit 50px at weight 600, line height 1 (28px on mobile). Page title (h1).
- **headline-lg:** Outfit 46px at weight 500, line height 1.2, tracking -0.02em. Section headings (h2).
- **headline-md:** Outfit 34px at weight 600, line height 1.4, tracking -0.02em. Sub-section headings.
- **headline-sm:** Outfit 30px at weight 500, line height 1.2, tracking -0.02em (24px on mobile). Card and feature titles.
- **title-lg:** Outfit 26px at weight 400, line height 1.2. Small titles.
- **body-md:** Outfit 16px at weight 400, line height 1.3, tracking -0.01em. Body text.
- **body-lg:** Outfit 18px at weight 500, line height 1.3, tracking -0.01em. Lead paragraphs.
- **body-sm:** sans-serif 12px at weight 400. Secondary and small text.
- **label-md:** Outfit 16px at weight 500, line height 1.3, tracking -0.01em. Buttons, navigation and labels.
- **label-sm:** Switzer 12px at weight 600, line height 1. Small labels and badges.

## Layout

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

- **Scale:** xs 4px, sm 6px, md 10px, lg 20px, xl 60px.
- **Sections:** 80px vertical padding between major sections.
- **Gaps:** 10px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1310px.
- **Page margin:** 40px on each side of full-width sections.
- **Breakpoints:** 809px, 809.98px, 810px, 1199px, 1199.98px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(23, 24, 28, 0.24) 0px 1px 2px 0px, rgba(23, 24, 28, 0.7) 0px 6px 12px -8px, rgba(23, 24, 28, 0.4) 0px 12px 32px -8px`
- `rgba(0, 0, 0, 0.05) 0px 0px 14px 0px`
- `rgba(0, 0, 0, 0.03) 0px 1px 3px 0px, rgba(0, 0, 0, 0.03) 0px 4px 15px 0px`

Hairline rings and inset highlights also appear: `rgba(0, 0, 0, 0.13) 0px 0px 0px -2.5px, rgba(0, 0, 0, 0) 0px 0px 0px -5px, rgba(0, 0, 0, 0.15) 0px -1px 4px 0px inset, rgb(243, 243, 241) 0px 0px 0px 2px`.

## Shapes

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

- **sm (10px):** 48 elements.
- **xs (8px):** 8 elements.
- **md (16px):** 4 elements.
- **lg (99px):** 4 elements.
- **xl (100px):** 4 elements.

## Components

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

- **button-primary (“Book a Free Call”):** #000000 fill, #FFFFFF text, 12px/400, 10px radius, padding 6px, shadow `rgba(23, 24, 28, 0.24) 0px 1px 2px 0px, rgba(23, 24, 28, 0.7) 0px 6px 12px -8px, rgba(23, 24, 28, 0.4) 0px 12px 32px -8px`.
- **button-primary-hover:** background #212121, text #FFFFFF on hover.
- **link:** transparent fill, #212121 text, padding 0px.

## Do's and Don'ts

- Do use #F7F7F7 for the page and lift surfaces in small steps: #FFFFFF.
- Do keep text in 4 levels: #000000, #212121, #323745, #666666.
- Do let contrast carry emphasis; primary actions use #000000 on #F7F7F7.
- Do reuse the measured spacing steps (6px, 10px, 20px).
- Do use 10px corners on most elements; larger surfaces also use 8px, 16px and 99px.
- Don't introduce new font families beyond Outfit, sans-serif and Switzer.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.2s.

## Motion

Interface transitions are quick: 0.001s, 0.2s.

- **Easing:** `ease`, `cubic-bezier(0.44, 0, 0.56, 1)`.

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

```