ihatepdf.cv — Free Online PDF Editor, No Watermark, No Upload

Design Specification — ihatepdf.cv — Free Online PDF Editor, No Watermark, No Upload

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#F7F5F0), ink text (#1C1916), a vivid accent (#FB2C36). All type is set in var(--font-sans). Detected font weights: 500, 600, 700, 800, 900. Detected style signatures: gradient-rich / aurora; technical / mono accents.

Logo asset(s): https://ihatepdf.cv/favicon.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• conic-gradient(#2a2a2a 0% 25%,#222 0% 50%)
• conic-gradient(#e4e4e7 0 25%,#fafafa 0 50%)
• linear-gradient(90deg,#000 92%,#0000)
• linear-gradient(#fdfcf9,#fdfcf966)
• linear-gradient(90deg,#0000,#e5e4df,#0000)

> 1 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: var(--font-sans) — stack: var(--font-sans)

Font stacks (most used first)

• var(--font-sans)
• var(--font-mono)
• ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
• var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji")
• var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)

Derived type scale

Font sizes (by frequency)

Weights in use: 500, 600, 700, 800, 900

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 0 #6366f180
• 0 0 0 8px #6366f100
• 0 0 #6366f100
• inset 0 1px #ffffffb3,0 1px 2px #1c19150d,0 12px 32px -16px #1c191529
• inset 0 1px 2px #1c19150f

Layout

Container max-width: 780px

Grid columns (largest detected grid): 6

Breakpoints

• 480px
• 40rem
• 48rem
• 64rem
• 80rem
• 96rem

Animation & Motion

Easing curves

• cubic-bezier(0,0,.2,1)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(.4,0,.6,1)
• cubic-bezier(.4,0,.2,1)
• var(--tw-ease,var(--default-transition-timing-function))
• var(--ease-in-out)
• var(--ease-out)
• cubic-bezier(.8,0,1,1)

Keyframes

@keyframes ihp-spin { to { transform: rotate(360deg); } }
@keyframes previewPing { 0%{box-shadow:0 0 #6366f180}70%{box-shadow:0 0 0 8px #6366f100}to{box-shadow:0 0 #6366f100} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes ping { 75%,to{opacity:0;transform:scale(2)} }
@keyframes pulse { 50%{opacity:.5} }
@keyframes bounce { 0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none} }

Animations

• ihp-spin 0.8s linear infinite
• var(--animate-bounce)
• var(--animate-ping)
• var(--animate-pulse)
• var(--animate-spin)
• none

Source Design Tokens (CSS custom properties)

:root {
  --color-red-50: #f5f5f5;
  --color-red-100: #e5e5e5;
  --color-red-200: #d4d4d4;
  --color-red-300: #a3a3a3;
  --color-red-400: #262626;
  --color-red-500: #000000;
  --color-red-600: #000000;
  --color-red-700: #171717;
  --color-red-800: #000000;
  --color-red-900: #000000;
  --color-red-950: #000000;
  --color-orange-50: #f5f5f5;
  --color-orange-100: #e5e5e5;
  --color-orange-200: #d4d4d4;
  --color-orange-300: #a3a3a3;
  --color-orange-400: #262626;
  --color-orange-500: #000000;
  --color-orange-600: #000000;
  --color-orange-700: #171717;
  --color-orange-800: #000000;
  --color-orange-900: #000000;
  --color-orange-950: #000000;
  --color-amber-50: #f5f5f5;
  --color-amber-100: #e5e5e5;
  --color-amber-200: #d4d4d4;
  --color-amber-300: #a3a3a3;
  --color-amber-400: #262626;
  --color-amber-500: #000000;
  --color-amber-600: #000000;
  --color-amber-700: #171717;
  --color-amber-800: #000000;
  --color-amber-900: #000000;
  --color-amber-950: #000000;
  --color-yellow-50: #f5f5f5;
  --color-yellow-100: #e5e5e5;
  --color-yellow-200: #d4d4d4;
  --color-yellow-300: #a3a3a3;
  --color-yellow-400: #262626;
  --color-yellow-500: #000000;
  --color-yellow-600: #000000;
  --color-yellow-700: #171717;
  --color-yellow-800: #000000;
  --color-yellow-900: #000000;
  --color-yellow-950: #000000;
  --color-lime-50: #f5f5f5;
  --color-lime-100: #e5e5e5;
  --color-lime-200: #d4d4d4;
  --color-lime-300: #a3a3a3;
  --color-lime-400: #262626;
  --color-lime-500: #000000;
  --color-lime-600: #000000;
  --color-lime-700: #171717;
  --color-lime-800: #000000;
  --color-lime-900: #000000;
  --color-lime-950: #000000;
  --color-green-50: #f5f5f5;
  --color-green-100: #e5e5e5;
  --color-green-200: #d4d4d4;
  --color-green-300: #a3a3a3;
  --color-green-400: #262626;
}

Do's and Don'ts

Do

• Do reserve the accent #FB2C36 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #F7F5F0; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 500, 600, 700, 800, 900.
• Do align spacing to the 4px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #F7F5F0;
  --color-primary: #F99C00;
  --color-accent: #FB2C36;
  --color-surface: #F5F5F5;
  --color-text-primary: #1C1916;
  --color-secondary: #1C1916;
  --color-text-secondary: #E5E5E5;
  --color-border: #D4D4D4;
  --color-on-primary: #1C1916;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FDFDFB;
  --color-surface-container: #FCFBF9;
  --color-surface-container-high: #FAFAFA;
  --color-surface-container-highest: #F7F5F0;
  --font-sans: var(--font-sans);
  --font-size-headline-md: 24px;
  --font-size-title-lg: 22.4px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 50%;
  --shadow-sm: 0 0 #6366f180;
  --shadow-md: 0 0 #6366f100;
  --shadow-lg: inset 0 1px #ffffffb3,0 1px 2px #1c19150d,0 12px 32px -16px #1c191529;
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 40px;
  --space-xl: 64px;
  --tracking-display: -.03em;
  --tracking-label: 0.08em;
  --container-max: 780px;
}