Lofty Lab design system

---
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).