DESIGN.md · measured November 5, 2026

Loop Found design system

Loop Found’s website (loopfound.in) uses the Bebas Neue font and #FFC61A as its main color on a #F7F7F4 background. Measured by Sitepeel on November 5, 2026.

#F7F7F4
#F7F7F4F0
#0B0B0F
#FFC61A

Download DESIGN.md

From loopfound.in ↗ · 168 elements at 1440×900 and 390×844 Independent analysis, not affiliated with Loop Found

Loop Found color palette

11 colors with hex codes, grouped by where each one is used on the page.

Surfaces

Snow#F7F7F4backgroundPage background · 3×

Snow 94%#F7F7F4F0surface-container-lowRaised areas one step from the page · 4×

Snow 90%#F7F7F4E6surface-containerCards and panels · 1×

White 80%#FFFFFFCCoverlayTranslucent fill for cards and controls · 1×

Text

Charcoal#0B0B0Fon-surfacePrimary text and headings · 15×

Charcoal#151515on-surface-variantSecondary text · 11×

Slate#4E4E4Don-surface-mutedMuted text and metadata · 4×

Charcoal#0B0B0Fon-primaryText and icons on primary

Accents

Vivid Amber#FFC61AprimaryBrand color on large areas · 19×

Borders

White 65%#FFFFFFA6outlineBorders and dividers · 4×

Charcoal 30%#0B0B0F4Doutline-variantSecondary dividers · 4×

Loop Found fonts and type scale

2 families.

AaBebas NeueWeights 400Bebas Neue, Impact, sans-serif

AaSpace GroteskWeights 400, 700Space Grotesk, sans-serif

headline-displayPage title (h1)Loop Found225px · 400 · 0.86 · -0.015em
mobile 70px

headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog144px · 400 · 0.78 · -0.05em
mobile 77px

headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog48px · 400 · 1
mobile 36px

body-mdBody textThe quick brown fox jumps over the lazy dog16px · 400 · 1.5

body-smSecondary and small textThe quick brown fox jumps over the lazy dog14px · 400 · 1.43

captionCaptions and fine printThe quick brown fox jumps over the lazy dog12px · 400 · 1.33

label-lgLarge buttons and tabsThe quick brown fox jumps over the lazy dog14px · 700 · 1.43

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog13px · 700 · 1.5 · 0.08em

label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog12px · 700 · 1.33 · 0.18em

Contrast

Text on #F7F7F4

AaAAA18.3:1

AaAAA17.0:1

AaAAA7.7:1

Spacing

4px grid · 95% of values fit

xs4px

sm8px

md12px

lg24px

xl40px

gutter12px

section144px

margin40px

Breakpoints: 600px 767px 1023px 1400px

Shapes

Corner radii, most used first.

lg16px · 32×

xs10px · 16×

xl37.44px · 16×

sm12px · 4×

md14px · 4×

full9999px · 4×

Depth

Shadow

Inset

Loop Found UI components

Rebuilt from the measured CSS.

ACCEPT ANALYTICS

button-primaryFilled button

GET IN TOUCH

button-outlineOutlined button

Loop Found home

button-secondaryFilled button

ESSENTIAL ONLY

button-ghostText button

Card

cardCard

Motion

Interface transitions

0.18s0.2s0.25s0.24s

easecubic-bezier(0.4, 0, 0.2, 1)

Do’s and don’ts

Rules written from the measurements, so a coding agent stays on style.

Use #F7F7F4 for the page and lift surfaces in small steps: #F7F7F4F0, #F7F7F4E6.
Keep text in 3 levels: #0B0B0F, #151515, #4E4E4D.
Use #FFC61A as the brand accent: header, logo and key highlights.
Set headlines in Bebas Neue with tight tracking (-0.015em).
Keep spacing on the 4px grid.
Use 16px corners on most elements; larger surfaces also use 10px, 37.44px and 12px.
Use heavy drop shadows; keep depth to hairline rings and tonal surfaces.
Introduce new font families beyond Bebas Neue and Space Grotesk.
Use #FFC61A for large backgrounds or body text.
Make interface transitions slower than 0.3s.

Loop Found DESIGN.md237 lines

---
version: alpha
name: Loop Found
description: "Light interface measured from loopfound.in: Bebas Neue type with Space Grotesk, vivid amber accents, tonal surfaces and 16px corners."
colors:
  background: "#F7F7F4"
  surface: "#F7F7F4"
  on-surface: "#0B0B0F"
  on-background: "#0B0B0F"
  on-surface-variant: "#151515"
  on-surface-muted: "#4E4E4D"
  surface-container-low: "#F7F7F4F0"
  surface-container: "#F7F7F4E6"
  overlay: "#FFFFFFCC"
  outline: "#FFFFFFA6"
  outline-variant: "#0B0B0F4D"
  primary: "#FFC61A"
  on-primary: "#0B0B0F"
typography:
  headline-display:
    fontFamily: Bebas Neue
    fontSize: 225px
    fontWeight: 400
    lineHeight: 0.86
    letterSpacing: -0.015em
  headline-lg:
    fontFamily: Bebas Neue
    fontSize: 144px
    fontWeight: 400
    lineHeight: 0.78
    letterSpacing: -0.05em
  headline-md:
    fontFamily: Bebas Neue
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1
  body-md:
    fontFamily: Space Grotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: Space Grotesk
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  caption:
    fontFamily: Space Grotesk
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
  label-lg:
    fontFamily: Space Grotesk
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
  label-md:
    fontFamily: Space Grotesk
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.08em
  label-sm:
    fontFamily: Space Grotesk
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0.18em
  headline-display-mobile:
    fontFamily: Bebas Neue
    fontSize: 70px
    fontWeight: 400
    lineHeight: 0.86
    letterSpacing: -0.015em
  headline-lg-mobile:
    fontFamily: Bebas Neue
    fontSize: 77px
    fontWeight: 400
    lineHeight: 0.78
    letterSpacing: -0.05em
  headline-md-mobile:
    fontFamily: Bebas Neue
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1
rounded:
  xs: 10px
  sm: 12px
  md: 14px
  lg: 16px
  xl: 37.44px
  full: 9999px
spacing:
  base: 4px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 40px
  gutter: 12px
  section: 144px
  margin: 40px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    padding: 0px 16px
    height: 44px
  button-outline:
    backgroundColor: "{colors.overlay}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-sm}"
    padding: 10px 28px
    height: 40px
  button-secondary:
    backgroundColor: "#07172D"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 6px
    height: 54px
  button-ghost:
    textColor: "{colors.background}"
    typography: "{typography.label-sm}"
    padding: 0px 16px
  card:
    backgroundColor: "{colors.on-surface-variant}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: 0px
---

# Loop Found Design System

## Overview

Loop Found describes itself as: “Loop Found is a Chennai web design and development company building responsive, conversion-focused websites, UI/UX systems and web applications.” The interface is light, built on **Snow (#F7F7F4)** with **Charcoal (#0B0B0F)** text, and **Vivid Amber (#FFC61A)** as the main accent.

Type is set in **Bebas Neue** and **Space Grotesk**. Headlines run large with tight negative tracking; body text is 16px. Depth comes from hairline borders and inset highlights rather than drop shadows. Corners are mostly 16px.

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

## Colors

The palette has 11 roles.

- **Snow (#F7F7F4):** Page background, seen 3 times. Token `background`.
- **Charcoal (#0B0B0F):** Primary text and headings, seen 15 times. Token `on-surface`.
- **Charcoal (#151515):** Secondary text, seen 11 times. Token `on-surface-variant`.
- **Slate (#4E4E4D):** Muted text and metadata, seen 4 times. Token `on-surface-muted`.
- **Snow 94% (#F7F7F4F0):** Raised areas one step from the page, seen 4 times. Token `surface-container-low`.
- **Snow 90% (#F7F7F4E6):** Cards and panels, seen 1 time. Token `surface-container`.
- **White 80% (#FFFFFFCC):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **White 65% (#FFFFFFA6):** Borders and dividers, seen 4 times. Token `outline`.
- **Charcoal 30% (#0B0B0F4D):** Secondary dividers, seen 4 times. Token `outline-variant`.
- **Vivid Amber (#FFC61A):** Brand color on large areas, seen 19 times. Token `primary`.
- **Charcoal (#0B0B0F):** Text and icons on primary. Token `on-primary`.

## Typography

**Bebas Neue** and **Space Grotesk** share the interface. Fallback stack: `Bebas Neue, Impact, sans-serif`. Other loaded fonts: Syne.

- **headline-display:** Bebas Neue 225px at weight 400, line height 0.86, tracking -0.015em (70px on mobile). Page title (h1).
- **headline-lg:** Bebas Neue 144px at weight 400, line height 0.78, tracking -0.05em (77px on mobile). Section headings (h2).
- **headline-md:** Bebas Neue 48px at weight 400, line height 1 (36px on mobile). Sub-section headings.
- **body-md:** Space Grotesk 16px at weight 400, line height 1.5. Body text.
- **body-sm:** Space Grotesk 14px at weight 400, line height 1.43. Secondary and small text.
- **caption:** Space Grotesk 12px at weight 400, line height 1.33. Captions and fine print.
- **label-lg:** Space Grotesk 14px at weight 700, line height 1.43. Large buttons and tabs.
- **label-md:** Space Grotesk 13px at weight 700, line height 1.5, tracking 0.08em. Buttons, navigation and labels.
- **label-sm:** Space Grotesk 12px at weight 700, line height 1.33, tracking 0.18em, uppercase. Small labels and badges.

## Layout

Spacing follows a 4px grid: 95% of measured gaps and paddings are multiples of 4px.

- **Scale:** xs 4px, sm 8px, md 12px, lg 24px, xl 40px.
- **Sections:** 144px vertical padding between major sections.
- **Gaps:** 12px is the most common gap in flex and grid layouts.
- **Page margin:** 40px on each side of full-width sections.
- **Breakpoints:** 600px, 767px, 1023px, 1400px.

## Elevation & Depth

Depth comes mostly from hairline rings and inset highlights on tonal surfaces (#F7F7F4F0 → #F7F7F4E6):

- `rgba(247, 247, 244, 0.12) 0px 0px 0px 1px inset`
- `rgba(21, 21, 21, 0.08) 0px 0px 0px 1px inset`
- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(234, 179, 8, 0.35) 0px 0px 0px 1px`

A few raised panels add a soft drop shadow: `rgba(0, 0, 0, 0.08) 0px 4px 18px 0px`.

## Shapes

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

- **lg (16px):** 32 elements.
- **xs (10px):** 16 elements.
- **xl (37.44px):** 16 elements.
- **sm (12px):** 4 elements.
- **md (14px):** 4 elements.
- **full (9999px):** 4 elements.

## Components

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

- **button-primary (“ACCEPT ANALYTICS”):** #FFC61A fill, #0B0B0F text, 12px/700, 3.35544e+07px radius, padding 0px 16px.
- **button-outline (“GET IN TOUCH”):** #FFFFFFCC fill, #151515 text, 12px/700, 3.35544e+07px radius, padding 10px 28px, border 1px solid #00000040, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(234, 179, 8, 0.35) 0px 0px 0px 1px`.
- **button-secondary (“Loop Found home”):** #07172D fill, #151515 text, 16px/400, 14px radius, padding 6px, border 1px solid #0000001A, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(7, 23, 45, 0.16) 0px 5px 18px 0px`.
- **button-ghost (“ESSENTIAL ONLY”):** transparent fill, #F7F7F4 text, 12px/700, 3.35544e+07px radius, padding 0px 16px, border 1px solid #F7F7F466.
- **card:** #151515 fill, #151515 text, 16px/400, 37.44px radius, padding 0px, border 7px solid #F7F7F4, shadow `rgb(189, 189, 182) 5px 7px 0px 0px, rgba(0, 0, 0, 0.16) 12px 24px 35px 0px`.

## Do's and Don'ts

- Do use #F7F7F4 for the page and lift surfaces in small steps: #F7F7F4F0, #F7F7F4E6.
- Do keep text in 3 levels: #0B0B0F, #151515, #4E4E4D.
- Do use #FFC61A as the brand accent: header, logo and key highlights.
- Do set headlines in Bebas Neue with tight tracking (-0.015em).
- Do keep spacing on the 4px grid.
- Do use 16px corners on most elements; larger surfaces also use 10px, 37.44px and 12px.
- Don't use heavy drop shadows; keep depth to hairline rings and tonal surfaces.
- Don't introduce new font families beyond Bebas Neue and Space Grotesk.
- Don't use #FFC61A for large backgrounds or body text.
- Don't make interface transitions slower than 0.3s.

## Motion

Interface transitions are quick: 0.18s, 0.2s, 0.25s, 0.24s.

- **Easing:** `ease`, `cubic-bezier(0.4, 0, 0.2, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

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

Fonts

What font does Loop Found use?

Loop Found uses Bebas Neue (weight 400) and Space Grotesk (weights 400 and 700) on loopfound.in. Page titles are 225px at weight 400 (70px on phones) and body text is 16px. Measured on November 5, 2026.

AaBebas Neue · 400
AaSpace Grotesk · 400, 700

Find every font on loopfound.in with Font finder →

Colors

Loop Found colors: palette and hex codes

Loop Found’s main colors are #F7F7F4 (snow) for the background, #0B0B0F (charcoal) for text and #FFC61A (vivid amber) as the main accent. Measured on November 5, 2026.

#F7F7F4 · snow
#0B0B0F · charcoal
#151515 · charcoal
#4E4E4D · slate
#FFC61A · vivid amber

Get loopfound.in’s palette as CSS or Tailwind with Colors →

Tech stack

What is Loop Found built with?

Loop Found’s website (loopfound.in) is built with React, React Router, Tailwind CSS, Cloudflare and Vercel. Measured on November 5, 2026.

Hosting & CDN: Cloudflare, Vercel
JavaScript framework: React 18.3.1, React Router 6.x
Animation & 3D: GSAP 3.15.0
Analytics: Cloudflare Web Analytics
UI & CSS: Tailwind CSS 4.x
Fonts & icons: Google Fonts, Lucide

Check loopfound.in live with Tech stack →

What you can build with it

Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.

Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.

Prompt · DESIGN.md attached

Build a landing page for my product. Follow for every color, font, spacing value, corner and button.

Guides

Need a page behind a login?

The DESIGN.md generator Chrome extension makes one from any page you have open, including dashboards and pages behind a login.

See the Chrome extension

More designs

Brand examples →

United Carriers unitedcarriers.com · BT Steinhart

My Framer Site wireframee.framer.website · Caveat

Sutéra sutera.ch · NeueHaas

PlanetScaleBrand planetscale.com · ui-monospace

PaddleBrand paddle.com · serrifCondensed

Font AwesomeBrand fontawesome.com · cera-round-pro

Another site? Make a DESIGN.md from any link.

FAQ

Loop Found design system questions

What font does Loop Found use?

Loop Found’s website uses Bebas Neue (weight 400) and Space Grotesk (weights 400 and 700). Page titles are 225px at weight 400 (70px on phones) and body text is 16px. Measured on November 5, 2026.

What are the Loop Found colors and hex codes?

On loopfound.in: #F7F7F4 (snow) for the background, #0B0B0F (charcoal) for text and #FFC61A (vivid amber) as the main accent. The color palette above lists all 11 colors with their hex codes and where each one is used.

What is the Loop Found design system?

The design system on this page is loopfound.in’s, as measured on November 5, 2026: Bebas Neue type, #FFC61A as the main color, 16px corners and a 4px spacing grid, written down as a DESIGN.md. It is not Loop Found’s own documentation.

What is Loop Found built with?

Loop Found’s website (loopfound.in) is built with React, React Router, Tailwind CSS, Cloudflare and Vercel. The full tech stack Sitepeel found: Cloudflare, React, React Router, GSAP, Vercel, Cloudflare Web Analytics, Tailwind CSS, Google Fonts and Lucide. Measured on November 5, 2026.

What is the Loop Found DESIGN.md?

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

No. Sitepeel measured it from loopfound.in’s public page on November 5, 2026. It is an independent analysis, not made or approved by Loop Found.

Can I use Loop Found’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 Loop Found’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.