Food Illustrations with Colored Pencil — Sarah Locher – Freelance Illustrator from Hamburg

Design Specification — Food Illustrations with Colored Pencil —

Sarah Locher – Freelance Illustrator from Hamburg

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#007AFF). All type is set in HK Grotesk. Detected font weights: 300, 400, 600, 700.

Logo asset(s): https://www.sarahlocher.com/favicon/D03438

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)

Typography

Primary typeface: HK Grotesk — stack: HK Grotesk

Font stacks (most used first)

• HK Grotesk
• var(--font-family-default)

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 600, 700

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 10px 40px -10px rgba(0,0,0,.7)
• 0 10px 40px -10px rgba(0,0,0,.2)
• 0 10px 40px -10px transparent

Layout

Container max-width: 900px

Grid columns (largest detected grid): 12

Breakpoints

• 599px
• 680px
• 900px
• 1160px
• 1200px
• 1400px
• 1440px

Animation & Motion

Transitions

• opacity .3s
• all .3s
• transform 5s,filter 1s
• transform 5s,filter 3s
• color .3s
• none
• all .5s ease-in
• all .6s ease-out
• opacity .6s 0s
• all .5s

Easing curves

• var(--swiper-wrapper-transition-timing-function,initial)

Keyframes

@keyframes swiper-preloader-spin { 0%{transform:rotate(0deg)}to{transform:rotate(1turn)} }
@keyframes moveLeft { 0%{transform:translateX(0)}to{transform:translateX(-50%)} }
@keyframes scroll { 0%{transform:translateY(0);opacity:0}2%{opacity:1}95%{opacity:1}to{transform:translateY(calc(-100% + var(--spacing-unit)*70));opacity:0} }
@keyframes horizontalScroll { 0%{transform:translateX(0) scale(.75);opacity:0}.3%{opacity:1}99%{opacity:1}to{transform:translateX(-60%) scale(.75);opacity:0} }
@keyframes pulsate { 0%{opacity:.5}50%{opacity:1}to{opacity:.5} }

CTA labels found on page

• Close
• Menu

Source Design Tokens (CSS custom properties)

:root {
  --primary-color: #D03438;
  --secondary-color: #000000;
  --swiper-theme-color: #007aff;
  --swiper-navigation-size: 44px;
  --font-family-default: "HK Grotesk",Helvetica,Arial,-apple-system,sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --spacing-unit: 6px;
  --white: #fff;
  --gray-100: #f7f7f7;
  --gray-200: #f0f0f0;
  --gray-300: #e3e3e3;
  --gray-400: #d0d0d0;
  --gray-500: #afafaf;
  --gray-600: #868686;
  --gray-700: #696969;
  --gray-800: #434343;
  --gray-900: #1a1a1a;
  --black: #000;
  --deepdive-blue-light: #294c72;
  --deepdive-blue: #182b42;
  --deepdive-blue-dark: #09101d;
  --large: hover;
  --shadow-color: transparent;
  --column-gap: calc(var(--spacing-unit)*4);
  --columnWidth: calc((100% - (var(--width) - 1)*var(--column-gap))/var(--width));
}

Do's and Don'ts

Do

• Do reserve the accent #007AFF for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 300, 400, 600, 700.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add gradients — the source page uses flat fills exclusively.

Design Tokens (copy-paste)

:root {
  --color-primary: #D03438;
  --color-accent: #007AFF;
  --color-background: #FFFFFF;
  --color-surface: #F7F7F7;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #E3E3E3;
  --color-border: #D0D0D0;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F7F7F7;
  --color-surface-container: #F0F0F0;
  --color-surface-container-high: #E3E3E3;
  --color-surface-container-highest: #D0D0D0;
  --font-sans: HK Grotesk;
  --font-size-display: 110px;
  --font-size-headline-lg: 42px;
  --font-size-title-lg: 23px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-sm: 12px;
  --radius-lg: 27.2px;
  --radius-pill: 50%;
  --shadow-sm: 0 10px 40px -10px rgba(0,0,0,.7);
  --shadow-md: 0 10px 40px -10px rgba(0,0,0,.2);
  --shadow-lg: 0 10px 40px -10px transparent;
  --space-xs: 3px;
  --tracking-display: -.004em;
  --tracking-label: .007em;
  --container-max: 900px;
}