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