# Loop Found design system

> Loop Found design system measured from loopfound.in: Bebas Neue font, #FFC61A primary on #F7F7F4, 11 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/loopfound.in/

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.

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

- Bebas Neue (weights 400)
- Space Grotesk (weights 400, 700)

## 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

## 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

## Questions and answers

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

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/loopfound.in/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 Loop Found.

## The DESIGN.md file

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

```