iuno.lol design system

---
version: alpha
name: iuno.lol
description: "Dark monochrome interface measured from iuno.lol: comfortaa type with Inter, flat surfaces and 12px corners."
colors:
  background: "#080808"
  surface: "#080808"
  on-surface: "#FFFFFF"
  on-background: "#FFFFFF"
  on-surface-variant: "#DADADA"
  on-surface-muted: "#B5B5B5"
  on-surface-subtle: "#9C9C9C"
  overlay: "#5B6CF533"
  overlay-strong: "#FFFFFF0D"
  outline: "#FFFFFF1A"
  primary: "#FFFFFF"
  on-primary: "#000000"
  secondary: "#8B93E8"
  tertiary: "#E1306C"
typography:
  headline-display:
    fontFamily: comfortaa
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: comfortaa
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.025em
  headline-md:
    fontFamily: comfortaa
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.025em
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.38
  body-lg:
    fontFamily: comfortaa
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.63
  body-sm:
    fontFamily: comfortaa
    fontSize: 13px
    fontWeight: 300
    lineHeight: 1.5
  label-md:
    fontFamily: comfortaa
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-sm:
    fontFamily: comfortaa
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.16em
  headline-display-mobile:
    fontFamily: comfortaa
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.11
    letterSpacing: -0.025em
  headline-lg-mobile:
    fontFamily: comfortaa
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.11
    letterSpacing: -0.025em
rounded:
  sm: 3px
  md: 6px
  lg: 12px
spacing:
  xs: 2px
  sm: 6px
  md: 12px
  lg: 24px
  xl: 48px
  gutter: 12px
  section: 128px
components:
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 10px 28px
  link:
    textColor: "{colors.on-surface-variant}"
---

# iuno.lol Design System

## Overview

iuno.lol describes itself as: “Create your free iuno.lol page - all your links, music player, Discord/Steam/Spotify widgets, animated effects and full theming in one place. Claim iuno.lol/yourname.” The interface is dark, built on **Near Black (#080808)** with **White (#FFFFFF)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **comfortaa** and **Inter**. Headlines run large with tight negative tracking; body text is 14px. Depth comes from soft drop shadows. Corners are mostly 12px.

Measured from [iuno.lol](https://iuno.lol/) on November 7, 2026 at 1440×900 and 390×844 from 366 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 12 roles, plus gradient stops #8B93E8, #CDD2FF, #9AA2F2.

- **Near Black (#080808):** Page background, seen 1 time. Token `background`.
- **White (#FFFFFF):** Primary text and headings, seen 24 times. Token `on-surface`, CSS `--tw-ring-offset-color`.
- **Silver (#DADADA):** Secondary text, seen 36 times. Token `on-surface-variant`.
- **Gray (#B5B5B5):** Muted text and metadata, seen 22 times. Token `on-surface-muted`.
- **Gray (#9C9C9C):** Subtle text and placeholders, seen 8 times. Token `on-surface-subtle`.
- **Indigo 20% (#5B6CF533):** Translucent fill for cards and controls, seen 5 times. Token `overlay`.
- **White 5% (#FFFFFF0D):** Stronger translucent fill, seen 3 times. Token `overlay-strong`.
- **White 10% (#FFFFFF1A):** Borders and dividers, seen 4 times. Token `outline`.
- **White (#FFFFFF):** Primary actions (the main text color; the palette is monochrome), seen 28 times. Token `primary`, CSS `--tw-ring-offset-color`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Light Indigo (#8B93E8):** Accent in text, fills and borders, seen 4 times. Token `secondary`.
- **Pink (#E1306C):** Accent, seen 5 times. Token `tertiary`.

## Typography

**comfortaa** and **Inter** share the interface. Fallback stack: `comfortaa, comfortaa Fallback`. Other loaded fonts: poppins.

- **headline-display:** comfortaa 60px at weight 500, line height 1, tracking -0.025em (36px on mobile). Page title (h1).
- **headline-lg:** comfortaa 48px at weight 500, line height 1, tracking -0.025em (36px on mobile). Section headings (h2).
- **headline-md:** comfortaa 20px at weight 400, line height 1.5, tracking -0.025em. Sub-section headings.
- **body-md:** Inter 14px at weight 400, line height 1.38. Body text.
- **body-lg:** comfortaa 18px at weight 300, line height 1.63. Lead paragraphs.
- **body-sm:** comfortaa 13px at weight 300, line height 1.5. Secondary and small text.
- **label-md:** comfortaa 16px at weight 400, line height 1.5. Buttons, navigation and labels.
- **label-sm:** comfortaa 10px at weight 500, line height 1.5, tracking 0.16em. Small labels and badges.

## Layout

Spacing does not follow a strict grid: 65% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 2px, sm 6px, md 12px, lg 24px, xl 48px.
- **Sections:** 128px vertical padding between major sections.
- **Gaps:** 12px is the most common gap in flex and grid layouts.
- **Breakpoints:** 380px, 639px, 640px, 767px, 1024px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `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(91, 108, 245, 0.1) 0px 0px 15px 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(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.45) 0px 8px 24px 0px`

## Shapes

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

- **lg (12px):** 12 elements.
- **sm (3px):** 4 elements.
- **md (6px):** 4 elements.

## Components

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

- **button-ghost (“Claim”):** transparent fill, #FFFFFF text, 14px/400, 12px radius, padding 10px 28px, 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(91, 108, 245, 0.1) 0px 0px 15px 0px`.
- **link:** transparent fill, #FFFFFFD9 text, padding 0px.

## Do's and Don'ts

- Do use #080808 for the page.
- Do keep text in 4 levels: #FFFFFF, #DADADA, #B5B5B5, #9C9C9C.
- Do let contrast carry emphasis; primary actions use #FFFFFF on #080808.
- Do set headlines in comfortaa with tight tracking (-0.025em).
- Do reuse the measured spacing steps (6px, 12px, 24px).
- Do use 12px corners on most elements; larger surfaces also use 3px and 6px.
- Don't introduce new font families beyond comfortaa and Inter.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.3s.

## Motion

Interface transitions are quick: 0.15s, 0.3s. Longer ambient animations run 2s.

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

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