# Infidevs design system

> Infidevs design system measured from infidevs.in: #A78BFA primary on #08060F, 14 color hex codes, type scale, spacing and a free DESIGN.md. Free.

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

Infidevs’s website (infidevs.in) uses the visitor’s system fonts and #A78BFA as its main color on a #08060F background. Measured by Sitepeel on November 6, 2026.

## What font does Infidevs use?

Infidevs uses the visitor’s system fonts on infidevs.in: no web font was measured. Measured on November 6, 2026.

- system-ui (weights 300, 400, 600, 700)

## Infidevs colors: palette and hex codes

Infidevs’s main colors are #08060F (near black) for the background, #B6B2C6 (light violet) for text and #A78BFA (light violet) as the main accent, with #C27AFF (light violet) and #6D28D9 (violet) as other accents. Measured on November 6, 2026.

- #08060F: near black
- #B6B2C6: light violet
- #FFFFFF: white
- #F1F5F9: cool snow
- #99A1AF: blue
- #0D0B17: cool charcoal
- #A78BFA: light violet
- #000000: near black

## What is Infidevs built with?

Infidevs’s website (infidevs.in) is built with Next.js, React, Tailwind CSS, Vercel and Lenis. Measured on November 6, 2026.

- JavaScript framework: Next.js 16.2.4, React 19.3.0-canary-3f0b9e61-2
- Animation & 3D: Lenis 1.3.23, Motion
- Hosting & CDN: Vercel
- UI & CSS: Tailwind CSS 4.x
- Fonts & icons: Lucide
- Media: Cloudinary

## Questions and answers

### What font does Infidevs use?

No web font was measured on infidevs.in: it uses the visitor’s system fonts.

### What are the Infidevs colors and hex codes?

On infidevs.in: #08060F (near black) for the background, #B6B2C6 (light violet) for text and #A78BFA (light violet) as the main accent, with #C27AFF (light violet) and #6D28D9 (violet) as other accents. The color palette above lists all 14 colors with their hex codes and where each one is used.

### What is the Infidevs design system?

The design system on this page is infidevs.in’s, as measured on November 6, 2026: #A78BFA as the main color and 4px corners, written down as a DESIGN.md. It is not Infidevs’s own documentation.

### What is Infidevs built with?

Infidevs’s website (infidevs.in) is built with Next.js, React, Tailwind CSS, Vercel and Lenis. The full tech stack Sitepeel found: Next.js, React, Lenis, Vercel, Tailwind CSS, Motion, Lucide and Cloudinary. Measured on November 6, 2026.

### What is the Infidevs DESIGN.md?

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

No. Sitepeel measured it from infidevs.in’s public page on November 6, 2026. It is an independent analysis, not made or approved by Infidevs.

### Can I use Infidevs’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 Infidevs’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/infidevs.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 Infidevs.

## The DESIGN.md file

```markdown
---
version: alpha
name: Infidevs
description: "Dark interface measured from infidevs.in: system-ui type, light violet accents, tonal surfaces and pill-shaped controls."
colors:
  background: "#08060F"
  surface: "#08060F"
  on-surface: "#B6B2C6"
  on-background: "#B6B2C6"
  on-surface-strong: "#FFFFFF"
  on-surface-variant: "#F1F5F9"
  on-surface-muted: "#99A1AF"
  surface-container-low: "#0D0B17"
  overlay: "#AD46FF1A"
  overlay-strong: "#8B5CF626"
  outline: "#AD46FF33"
  outline-variant: "#FFFFFF0D"
  primary: "#A78BFA"
  on-primary: "#000000"
  secondary: "#C27AFF"
  tertiary: "#6D28D9"
typography:
  headline-display:
    fontFamily: system-ui
    fontSize: 80px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.035em
  headline-lg:
    fontFamily: system-ui
    fontSize: 60px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: -0.035em
  headline-md:
    fontFamily: system-ui
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: -0.017em
  body-md:
    fontFamily: system-ui
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  body-lg:
    fontFamily: system-ui
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.63
  label-lg:
    fontFamily: system-ui
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: system-ui
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.5
  label-sm:
    fontFamily: system-ui
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0.1em
  headline-display-mobile:
    fontFamily: system-ui
    fontSize: 38px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.035em
  headline-lg-mobile:
    fontFamily: system-ui
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: -0.035em
rounded:
  sm: 4px
  md: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  gutter: 8px
  section: 96px
  container: 1160px
components:
  button-primary:
    backgroundColor: "{colors.on-surface-strong}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    padding: 0px
    height: 42px
  card:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface-strong}"
    typography: "{typography.label-lg}"
    rounded: 24px
    padding: 32px
  link:
    textColor: "{colors.on-surface-muted}"
---

# Infidevs Design System

## Overview

Infidevs describes itself as: “Infidevs offers premium web development, hosting, and digital solutions. Build fast, modern, scalable websites with us.” The interface is dark, built on **Near Black (#08060F)** with **Light Violet (#B6B2C6)** text, and **Light Violet (#A78BFA)** as the main accent.

Type is set in **system-ui**. Headlines run large with tight negative tracking; body text is 14px. Depth comes from hairline borders and inset highlights rather than drop shadows. Controls are pill-shaped.

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

## Colors

The palette has 14 roles, plus gradient stops #C9A86A, #C9C2E4, #F4E6CC, #E9C893.

- **Near Black (#08060F):** Page background, seen 2 times. Token `background`.
- **Light Violet (#B6B2C6):** Primary text and headings, seen 35 times. Token `on-surface`.
- **White (#FFFFFF):** Headings and emphasis, seen 21 times. Token `on-surface-strong`, CSS `--tw-ring-offset-color`.
- **Cool Snow (#F1F5F9):** Secondary text, seen 12 times. Token `on-surface-variant`.
- **Blue (#99A1AF):** Muted text and metadata, seen 18 times. Token `on-surface-muted`.
- **Cool Charcoal (#0D0B17):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Violet 10% (#AD46FF1A):** Translucent fill for cards and controls, seen 12 times. Token `overlay`.
- **Violet 15% (#8B5CF626):** Stronger translucent fill, seen 3 times. Token `overlay-strong`.
- **Violet 20% (#AD46FF33):** Borders and dividers, seen 12 times. Token `outline`.
- **White 5% (#FFFFFF0D):** Secondary dividers, seen 10 times. Token `outline-variant`.
- **Light Violet (#A78BFA):** Brand accent (CSS variable), seen 3 times. Token `primary`, CSS `--brand-iris`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Light Violet (#C27AFF):** Accent in text, fills and borders, seen 25 times. Token `secondary`.
- **Violet (#6D28D9):** Accent (CSS variable). Token `tertiary`.

## Typography

**system-ui** carries the whole interface. Fallback stack: `ui-sans-serif, system-ui, sans-serif, Apple Color Emoji`. Other loaded fonts: Instrument Serif.

- **headline-display:** system-ui 80px at weight 600, line height 1.05, tracking -0.035em (38px on mobile). Page title (h1).
- **headline-lg:** system-ui 60px at weight 600, line height 1.08, tracking -0.035em (30px on mobile). Section headings (h2).
- **headline-md:** system-ui 24px at weight 700, line height 1.33, tracking -0.017em. Sub-section headings.
- **body-md:** system-ui 14px at weight 400, line height 1.43. Body text.
- **body-lg:** system-ui 16px at weight 300, line height 1.63. Lead paragraphs.
- **label-lg:** system-ui 16px at weight 400, line height 1.5. Large buttons and tabs.
- **label-md:** system-ui 15px at weight 600, line height 1.5. Buttons, navigation and labels.
- **label-sm:** system-ui 14px at weight 700, line height 1.43, tracking 0.1em. Small labels and badges.

## Layout

Spacing is mostly on a 4px grid (77% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.

- **Scale:** xs 4px, sm 8px, md 16px, lg 24px, xl 48px.
- **Sections:** 96px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1160px.

## Elevation & Depth

The design avoids drop shadows. Layers are separated by tonal surface steps (#0D0B17) and hairline rings:

- `rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset`

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **sm (4px):** 48 elements.
- **full (9999px):** 48 elements.
- **md (16px):** 40 elements.

## Components

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

- **button-primary (“Start a Project”):** #FFFFFF fill, #000000 text, 16px/400, 3.35544e+07px radius, padding 0px.
- **card:** #0D0B17 fill, #FFFFFF text, 16px/400, 24px radius, padding 32px, border 1px solid #FFFFFF0F, shadow `rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset`.
- **link:** transparent fill, #99A1AF text, padding 0px.

## Do's and Don'ts

- Do use #08060F for the page and lift surfaces in small steps: #0D0B17.
- Do keep text in 4 levels: #B6B2C6, #FFFFFF, #F1F5F9, #99A1AF.
- Do use #A78BFA as the brand accent: header, logo and key highlights.
- Do set headlines in system-ui with tight tracking (-0.035em).
- Do reuse the measured spacing steps (8px, 16px, 24px).
- Do make buttons and chips fully rounded (9999px); most other elements use 4px corners.
- Don't add drop shadows for depth; use hairline rings and tonal surfaces.
- Don't introduce new font families beyond system-ui.
- Don't use #A78BFA for large backgrounds or body text.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.2s, 0.15s, 0.3s, 0.5s.

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

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

```