# Lofty Lab design system

> Lofty Lab design system measured from loftylab.framer.website: New Title font, #0443B5 primary, 9 color hex codes, type scale, spacing and a free DESIGN.md.

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

Lofty Lab’s website (loftylab.framer.website) uses the New Title font and #0443B5 as its main color on a #529DFF background. Measured by Sitepeel on November 6, 2026.

## What font does Lofty Lab use?

Lofty Lab uses New Title (weight 700) and Inter Display (weights 500 and 700), with Geist Mono for code on loftylab.framer.website. Page titles are 200px at weight 700 (100px on phones) and body text is 20px. Measured on November 6, 2026.

- New Title (weights 700)
- Inter Display (weights 500, 700)
- sans-serif (weights 400)
- Geist Mono (weights 400)

## Lofty Lab colors: palette and hex codes

Lofty Lab’s main colors are #529DFF (blue) for the background, #02091D (deep blue) for text and #0443B5 (dark blue) as the main accent, with #BD0000 (dark red) and #FBB833 (vivid orange) as other accents. Measured on November 6, 2026.

- #529DFF: blue
- #02091D: deep blue
- #030F2E: deep blue
- #26132B: deep purple
- #596078: blue
- #0443B5: dark blue
- #FFFFFF: white
- #BD0000: dark red

## What is Lofty Lab built with?

Lofty Lab’s website (loftylab.framer.website) is built with Framer, React, GSAP, Lenis and Motion. Measured on November 6, 2026.

- Site builder & CMS: Framer
- JavaScript framework: React 18.3.1
- Animation & 3D: GSAP 3.11.3, Lenis 1.3.25, Motion
- Fonts & icons: Google Fonts

## Questions and answers

### What font does Lofty Lab use?

Lofty Lab’s website uses New Title (weight 700) and Inter Display (weights 500 and 700), with Geist Mono for code. Page titles are 200px at weight 700 (100px on phones) and body text is 20px. Measured on November 6, 2026.

### What are the Lofty Lab colors and hex codes?

On loftylab.framer.website: #529DFF (blue) for the background, #02091D (deep blue) for text and #0443B5 (dark blue) as the main accent, with #BD0000 (dark red) and #FBB833 (vivid orange) as other accents. The color palette above lists all 9 colors with their hex codes and where each one is used.

### What is the Lofty Lab design system?

The design system on this page is loftylab.framer.website’s, as measured on November 6, 2026: New Title type, #0443B5 as the main color and 24px corners, written down as a DESIGN.md. It is not Lofty Lab’s own documentation.

### What is Lofty Lab built with?

Lofty Lab’s website (loftylab.framer.website) is built with Framer, React, GSAP, Lenis and Motion. The full tech stack Sitepeel found: Framer, React, GSAP, Lenis, Motion and Google Fonts. Measured on November 6, 2026.

### What is the Lofty Lab DESIGN.md?

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

No. Sitepeel measured it from loftylab.framer.website’s public page on November 6, 2026. It is an independent analysis, not made or approved by Lofty Lab.

### Can I use Lofty Lab’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 Lofty Lab’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/loftylab.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 Lofty Lab.

## The DESIGN.md file

```markdown
---
version: alpha
name: Lofty Lab
description: "Light interface measured from loftylab.framer.website: New Title type with Inter Display, dark blue accents, flat surfaces and 24px corners."
colors:
  background: "#529DFF"
  surface: "#529DFF"
  on-surface: "#02091D"
  on-background: "#02091D"
  on-surface-variant: "#030F2E"
  on-surface-muted: "#26132B"
  on-surface-subtle: "#596078"
  primary: "#0443B5"
  on-primary: "#FFFFFF"
  secondary: "#BD0000"
  tertiary: "#FBB833"
typography:
  headline-display:
    fontFamily: New Title
    fontSize: 200px
    fontWeight: 700
    lineHeight: 0.8
  headline-lg:
    fontFamily: New Title
    fontSize: 150px
    fontWeight: 700
    lineHeight: 0.8
  headline-md:
    fontFamily: Inter Display
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.05em
  headline-sm:
    fontFamily: Inter Display
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.05em
  body-md:
    fontFamily: Inter Display
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.02em
  body-sm:
    fontFamily: sans-serif
    fontSize: 12px
    fontWeight: 400
  label-md:
    fontFamily: Inter Display
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.05em
  code:
    fontFamily: Geist Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1
  headline-display-mobile:
    fontFamily: New Title
    fontSize: 100px
    fontWeight: 700
    lineHeight: 0.8
  headline-lg-mobile:
    fontFamily: New Title
    fontSize: 72px
    fontWeight: 700
    lineHeight: 0.8
  headline-md-mobile:
    fontFamily: Inter Display
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.05em
rounded:
  sm: 8px
  md: 10px
  lg: 16px
  xl: 24px
spacing:
  md: 10px
  gutter: 10px
components:
  link:
    textColor: "{colors.on-surface-subtle}"
---

# Lofty Lab Design System

## Overview

Lofty Lab describes itself as: “Lofty Lab is a premium portfolio template built for marketing agencies that want to stand out. Designed with stunning visuals and smooth animations, it helps designers, marketing teams, and motion studios capture leads a” The interface is light, built on **Blue (#529DFF)** with **Deep Blue (#02091D)** text, and **Dark Blue (#0443B5)** as the main accent.

Type is set in **New Title** and **Inter Display**, with **Geist Mono** for code. Headlines run large; body text is 20px. The surface language is flat. Corners are mostly 24px.

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

## Colors

The palette has 9 roles.

- **Blue (#529DFF):** Page background. Token `background`.
- **Deep Blue (#02091D):** Primary text and headings, seen 60 times. Token `on-surface`.
- **Deep Blue (#030F2E):** Secondary text, seen 29 times. Token `on-surface-variant`.
- **Deep Purple (#26132B):** Muted text and metadata, seen 4 times. Token `on-surface-muted`.
- **Blue (#596078):** Subtle text and placeholders, seen 12 times. Token `on-surface-subtle`.
- **Dark Blue (#0443B5):** Brand color on large areas. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Dark Red (#BD0000):** Accent on large areas. Token `secondary`.
- **Vivid Orange (#FBB833):** Accent on large areas. Token `tertiary`.

## Typography

**New Title**, **Inter Display**, **sans-serif** and **Geist Mono** (monospace) share the interface. Fallback stack: `New Title, New Title Placeholder, sans-serif`. Other loaded fonts: Caveat.

- **headline-display:** New Title 200px at weight 700, line height 0.8, uppercase (100px on mobile). Page title (h1).
- **headline-lg:** New Title 150px at weight 700, line height 0.8, uppercase (72px on mobile). Section headings (h2).
- **headline-md:** Inter Display 64px at weight 500, line height 1.1, tracking -0.05em (40px on mobile). Sub-section headings.
- **headline-sm:** Inter Display 40px at weight 500, line height 1.1, tracking -0.05em. Card and feature titles.
- **body-md:** Inter Display 20px at weight 500, line height 1.3, tracking -0.02em. Body text.
- **body-sm:** sans-serif 12px at weight 400. Secondary and small text.
- **label-md:** Inter Display 16px at weight 700, line height 1, tracking -0.05em. Buttons, navigation and labels.
- **code:** Geist Mono 13px at weight 400, line height 1. Code and technical values.

## Layout

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

- **Scale:** md 10px.
- **Gaps:** 10px is the most common gap in flex and grid layouts.
- **Breakpoints:** 809px, 809.98px, 810px, 1199px, 1199.98px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from color contrast.

## Shapes

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

- **xl (24px):** 44 elements.
- **sm (8px):** 28 elements.
- **md (10px):** 4 elements.
- **lg (16px):** 4 elements.

## Components

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

- **link:** transparent fill, #596078 text, padding 0px.

## Do's and Don'ts

- Do use #529DFF for the page.
- Do keep text in 4 levels: #02091D, #030F2E, #26132B, #596078.
- Do use #0443B5 as the brand accent: header, logo and key highlights.
- Do reuse the measured spacing steps (10px).
- Do use 24px corners on most elements; larger surfaces also use 8px, 10px and 16px.
- Don't use #596078 for body text; it reaches 2.26:1 on #529DFF. Keep it for large text or metadata.
- Don't add drop shadows for depth; use borders and contrast.
- Don't introduce new font families beyond New Title, Inter Display, sans-serif and Geist Mono.
- Don't use #0443B5 for large backgrounds or body text.
- Don't make interface transitions slower than 0.25s.

## Motion

Interface transitions are quick: 0.25s, 0.001s.

- **Easing:** `ease`.

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

```