--- version: alpha name: Freepik description: Creative-asset marketplace and AI studio on a clean white canvas — ES Klarheit Plakat at display scale with tight tracking, Geist for all functional copy, a single electric-pink brand accent that appears only on primary CTAs and interactive moments, and a functional layout that lets the asset grid do the visual work. colors: # Surface / canvas background: "#ffffff" # clean white — the dominant marketing canvas surface: "#f5f5f5" # light gray fills, card surfaces, hover washes surface-dark: "#080808" # near-black — used for high-contrast sections, footer surface-muted: "#f0f0f0" # subtle input and chip backgrounds # Ink / text ink: "#080808" # near-black — primary text on white canvas ink-secondary: "#666666" # supporting copy, meta, captions ink-muted: "#999999" # placeholder, disabled, faint UI text on-dark: "#ffffff" # text on near-black surfaces on-primary: "#ffffff" # white label on pink primary buttons /* estimated */ # Brand accent — electric pink primary: "#ff58ae" # vivid magenta-pink — primary CTA, hover links, interactive accent primary-dark: "#e0408e" # darker pink — hover state for primary button /* estimated */ primary-container: "#fff0f8" # faint pink tint — badges, selected chip backgrounds /* estimated */ # Semantic success: "#00b87a" # green — file ready, upload complete /* estimated */ warning: "#f5a623" # amber — limit warnings, trial prompts /* estimated */ error: "#e53e3e" # red — validation errors /* estimated */ # Borders border: "#e0e0e0" # light gray — card outlines, input borders border-dark: "#282828" # dark border — on near-black sections /* estimated */ # Shadow tints shadow-soft: "#ebebeb" # was #00000014 (alpha) — flattened: rgba(0,0,0,0.08) over white ≈ #ebebeb shadow-card: "#e5e5e5" # was #0000001a (alpha) — flattened: rgba(0,0,0,0.10) over white ≈ #e5e5e5 typography: display-hero: fontFamily: "KlarheitInline, ESKlarheitPlakatFP, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 80px fontWeight: 800 lineHeight: 1.0 letterSpacing: -1.6px display: fontFamily: "KlarheitInline, ESKlarheitPlakatFP, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 56px fontWeight: 800 lineHeight: 1.05 letterSpacing: -1.1px heading-section: fontFamily: "KlarheitInline, ESKlarheitPlakatFP, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 40px fontWeight: 800 lineHeight: 1.1 letterSpacing: -0.6px heading-sub: fontFamily: "Geist, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 28px fontWeight: 600 lineHeight: 1.25 letterSpacing: -0.2px body-large: fontFamily: "Geist, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body: fontFamily: "Geist, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body-small: fontFamily: "Geist, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0px button-ui: fontFamily: "Geist, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0px nav-link: fontFamily: "Geist, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 15px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.75px caption: fontFamily: "Geist, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.33 letterSpacing: 0px eyebrow: fontFamily: "Geist, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 1.33 letterSpacing: 0.75px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 96px rounded: none: 0px sm: 4px md: 8px lg: 12px xl: 16px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-primary-hover: backgroundColor: "{colors.primary-dark}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-secondary-hover: backgroundColor: "{colors.border}" textColor: "{colors.ink}" button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-ghost-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" button-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-dark-hover: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 16px card-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" card-asset: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 0px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 12px 20px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px badge-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 0px 24px tag-chip: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 6px 14px tag-chip-active: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" --- # Freepik Design System ## Overview Freepik's interface is a study in intentional restraint on a white canvas (`{colors.background}`). After the 2024 rebrand, the brand moved decisively away from its legacy blue-heavy identity toward a clean, gallery-first aesthetic: bright white backgrounds, a dense asset grid that becomes the page's primary texture, and a single electric-pink accent (`{colors.primary}`) that reserves its energy for calls-to-action and interactive states. The page reads less like a SaaS dashboard and more like a well-lit design showroom — the product is the content, and the frame around it stays quiet. The typography is split between two custom fonts working in close partnership. ES Klarheit Plakat (served as `KlarheitInline`) handles all display-scale headlines at 800 weight with aggressive negative tracking, giving the marketing moments a punchy editorial quality. Geist, Vercel's open-source monospace-adjacent sans, does the functional work — body copy, navigation labels, button text — with geometric neutrality and strong screen rendering at small sizes. The pairing is confident: one typeface for authority and scale, one for precision and legibility, with no overlap. The pink `{colors.primary}` is Freepik's boldest design decision. It doesn't behave like a typical brand color — it doesn't wash entire sections or appear in illustrations. It functions as a pure interactive signal: the primary CTA button, the hover state on links, the active state on filter chips, the progress fill in AI generation flows. Everything around it is near-black and light gray, so when the pink lands it reads as kinetic energy rather than decoration. The overall impression is a platform that trusts its asset library to be visually compelling and keeps the chrome subordinate. **Key Characteristics:** - Clean white canvas (`{colors.background}`) — the asset grid is the visual content, not the frame - Electric pink (`{colors.primary}`) as the sole interactive accent — CTAs, hover links, active states, never a surface fill - ES Klarheit Plakat at 800 weight for all display headlines — editorial authority with tight negative tracking - Geist for all functional copy — geometric, screen-legible, precise at body and UI scales - Full pill radius (`{rounded.pill}`) on all buttons and inputs — the primary interactive shape - Asset cards use flush-edge imagery with subtle radius (`{rounded.lg}`) and zero padding — the content bleeds to the card boundary - 8px base spacing system with generous section-level rhythm - Near-black `{colors.surface-dark}` as the secondary canvas for hero contrast and footer sections - Uppercase tracked eyebrow labels on category sections and feature prompts - White-on-dark button variant for reverse sections — `{colors.surface-dark}` fill with pink hover ## Colors ### Surface & Canvas - **White** (`{colors.background}`): The dominant page canvas — clean, bright, gallery-appropriate. - **Light Gray** (`{colors.surface}`): Subtle surface for card fills, hover states, input backgrounds, and chip resting states. - **Surface Muted** (`{colors.surface-muted}`): The faintest gray — used for skeleton loaders and input field fills. - **Near-Black** (`{colors.surface-dark}`): High-contrast dark sections — hero alternates, testimonials, footer. Reverses the default ink/surface relationship. ### Ink / Text - **Near-Black** (`{colors.ink}`): Primary text on the white canvas. Used at all heading and body scales. - **Gray** (`{colors.ink-secondary}`): Supporting copy, file metadata, section sub-labels. - **Muted Gray** (`{colors.ink-muted}`): Placeholder text, disabled states, faint UI chrome. - **White** (`{colors.on-dark}`): Text on near-black sections and dark button surfaces. ### Brand Accent - **Electric Pink** (`{colors.primary}`): The single chromatic signal. Applied to primary CTAs, link hover states, active filter chips, progress indicators in AI generation flows. Never a background fill for whole sections. - **Pink Dark** (`{colors.primary-dark}`): Hover/pressed state for the primary button — a slightly deeper pink that maintains the vivid character. - **Pink Container** (`{colors.primary-container}`): Very faint pink tint for badge backgrounds and selected chip fills — ensures the badge label (`{colors.primary}`) reads with enough contrast. ### Semantic - **Success** (`{colors.success}`): Upload confirmations, download completion, generation success. - **Warning** (`{colors.warning}`): Usage limit prompts, free tier boundaries. - **Error** (`{colors.error}`): Form validation, failed operations. ### Borders & Shadows - **Border** (`{colors.border}`): Standard hairline on white — card outlines, input borders, dividers. - **Border Dark** (`{colors.border-dark}`): Borders on near-black surfaces. - **Shadow Soft / Card** (`{colors.shadow-soft}`, `{colors.shadow-card}`): Opaque approximations of the rgba drop-shadow values used for card hover states. The originals were `rgba(0,0,0,0.08–0.10)` — flattened per the Google spec. ## Typography ### Font Family - **Display**: `KlarheitInline` (loaded as `ESKlarheitPlakatFP-Extrabold.woff2`), a custom slab-adjacent condensed display font. Fallbacks: `Helvetica Neue, Helvetica, Arial, sans-serif`. Used exclusively at large headline sizes. - **Functional / Body / UI**: `Geist` (loaded as `Geist-SemiBold.woff2` and `Geist-Regular.woff2`), an open-source geometric sans. Fallbacks: `Helvetica Neue, Helvetica, Arial, sans-serif`. Covers body, navigation, buttons, captions. - **Uppercase tracking**: Navigation labels and eyebrow text use `0.75px` letter-spacing with uppercase transform — distinguishes wayfinding text from editorial copy. ### Hierarchy The full type scale lives in the `typography:` token block. | Token | Use | |---|---| | `display-hero` | 80px / 800 / -1.6px — marquee hero headline | | `display` | 56px / 800 / -1.1px — section and campaign titles | | `heading-section` | 40px / 800 / -0.6px — feature and category headings | | `heading-sub` | 28px / 600 — sub-section lead in Geist | | `body-large` | 20px / 400 — lead paragraphs, feature descriptions | | `body` | 16px / 400 — standard body, card descriptions | | `body-small` | 14px / 400 — supporting copy, metadata | | `button-ui` | 16px / 600 — button labels, action text | | `nav-link` | 15px / 600 / 0.75px — navigation, uppercase eyebrows | | `caption` | 12px / 500 — asset labels, chip text | | `eyebrow` | 12px / 600 / 0.75px — section category markers | ### Principles - **Two-family split**: KlarheitInline owns display scale (headlines); Geist owns everything else. No role overlap. - **Tight at the top**: Display and heading sizes carry negative tracking (-0.6px to -1.6px), compressing the editorial headlines. - **Weight anchors**: 800 for all KlarheitInline display; 600 for Geist UI text and labels; 400 for body reading. - **Uppercase eyebrows**: Nav labels and section markers run uppercase with positive letter-spacing for categorical clarity at 12–15px. ## Layout ### Spacing System Base unit is **8px**. Scale in the `spacing:` block runs from `xs` (4px) through `4xl` (96px). Internal component spacing uses the tight end (4–16px); section breaks step up to 48–96px for breathing room. ### Grid & Container - Max content width: approximately 1280px, centered - Asset gallery: responsive grid, typically 4–6 columns on desktop, collapsing to 2 on tablet and 1 on mobile - Feature sections: alternating two-column splits (image + copy) above the gallery grid - AI tool sections: full-width panels with centered content and constrained text columns (~700px) ### Whitespace Philosophy - **White as neutral space**: The white canvas recedes behind the content — dense asset grids read as the page's texture, not the frame. - **Cards flush, sections breathe**: Card padding is minimal or zero; section-level vertical spacing is generous (48–96px). - **Density is the product**: The gallery's tight grid is intentional — it communicates the breadth of available assets at a glance. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow; `{colors.border}` hairline only | Resting asset cards, navigation | | Subtle (Level 1) | `0 2px 8px rgba(0,0,0,0.08)` | Card hover state lift | | Card (Level 2) | `0 4px 16px rgba(0,0,0,0.10)` | Floating panels, dropdowns | | Elevated (Level 3) | `0 8px 24px rgba(0,0,0,0.12)` | Modals, tooltips | | Focus Ring | `0 0 0 2px {colors.primary}` | Keyboard focus on inputs and interactive elements | **Shadow Philosophy**: Freepik uses soft, warm-neutral drop shadows rather than brand-tinted ones. Resting cards sit flush with a hairline border; shadows only appear on hover as a lift cue. The result is a flat-until-interactive feel that keeps the white canvas clean and the asset thumbnails as the visual foreground. ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `none` | 0px | Edge-to-edge section bands, hero fills | | `sm` | 4px | Small chips, tight icon containers | | `md` | 8px | Standard UI controls, smaller cards | | `lg` | 12px | Asset grid cards — the default gallery card shape | | `xl` | 16px | Feature and marketing cards, panel containers | | `pill` | 9999px | All buttons, text inputs, search bar — the primary interactive shape | Buttons and inputs snap to `{rounded.pill}` without exception. Asset cards use `{rounded.lg}` (12px) with flush imagery. The contrast between the soft pill chrome and the rectangular asset thumbnails is intentional — interactive surfaces are soft and approachable; content containers are rectilinear and neutral. ## Components The complete component spec lives in the `components:` token block. ### Button Variants - **`button-primary`** — Electric pink (`{colors.primary}`) fill, white label, pill radius. The main CTA ("Get unlimited downloads", "Try for free"). Hover deepens to `{colors.primary-dark}`. - **`button-secondary`** — Light gray (`{colors.surface}`) fill, near-black label, pill radius. Secondary actions ("Learn more", "Browse free"). Hover shifts to border gray. - **`button-ghost`** — White fill, near-black label, pill radius. Used inside white sections alongside primary CTAs for lower-hierarchy options. - **`button-dark`** — Near-black (`{colors.surface-dark}`) fill, white label, pill radius. Appears on dark hero sections. Hover inverts to pink — the dark section's interactive signal. ### Cards - **`card`** — White surface, 16px radius, standard padding. Feature tiles and marketing panels. Hover tints to `{colors.surface}`. - **`card-asset`** — Light gray surface, 12px radius, zero padding so imagery bleeds to the corner. The asset gallery's core building block. ### Inputs & Search - **`input`** — White fill, pill radius (`{rounded.pill}`), standard border. The search bar is the dominant input — full-width, pill-shaped, with a near-black "Search" button nested inside on the right. Focus ring uses `{colors.primary}`. ### Navigation - **`nav-bar`** — White background, near-black labels, uppercase 15px tracked nav links. Pink primary CTA pinned right ("Get Premium", "Subscribe"). Logo left. ### Badges & Tags - **`badge`** — Pink-container fill, pink text, full pill. Category labels, "Premium" / "AI Generated" annotations on asset cards. - **`badge-dark`** — Near-black fill, white text, full pill. Featured or "Exclusive" marks on dark surfaces. - **`tag-chip`** — Light gray resting fill, near-black text, pill. Filter chips for asset type (Photo, Video, Vector, AI). Active state inverts to `{colors.primary}` fill with white label. ## Do's and Don'ts ### Do - Keep the marketing canvas white (`{colors.background}`) — the asset grid is the visual content, not background decoration - Use `{colors.primary}` (electric pink) only as an interactive signal — primary CTAs, link hover, active chip fills, focus rings - Use KlarheitInline at 800 weight for all display and section headlines — the bold weight is non-negotiable - Apply negative tracking on all headline sizes (-0.6px to -1.6px) proportional to size - Default buttons and inputs to `{rounded.pill}` — the soft pill shape is the brand's interactive signature - Flush asset imagery to card edges (`{components.card-asset}`, zero padding) — content bleeds to the `{rounded.lg}` corner - Use uppercase tracked eyebrow labels (`{typography.eyebrow}`, 0.75px spacing) for category and section markers - Allow the asset grid density to communicate product breadth — resist the urge to add decorative illustration around it ### Don't - Don't fill sections or hero bands with the pink accent — it's a signal, not a background wash - Don't use KlarheitInline at body or UI sizes — it's purely a display/headline font - Don't introduce a third typeface — the KlarheitInline/Geist split handles every role - Don't round asset cards to pill shape — images need `{rounded.lg}` at most; pill radius belongs on interactive chrome only - Don't rely on heavy drop shadows at rest — cards sit flat with a border hairline; shadow appears only on hover - Don't use mid-range border radius (8–12px) on buttons — pill or nothing is the interactive rule - Don't introduce secondary brand colors in marketing sections — gray, white, near-black, and pink is the complete palette - Don't use Geist below 12px for screen-rendered body copy — the system floors at `{typography.caption}` (12px) --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | <768px | Single column gallery; hero text scales to ~36px; nav collapses to hamburger; search expands to full width | | Tablet | 768–1023px | Two-column gallery; nav simplifies to logo + CTA; feature sections stack vertically | | Desktop | 1024–1279px | Four-column gallery; full horizontal navigation; feature split sections activate | | Large Desktop | ≥1280px | Five-to-six column gallery; max ~1280px container; generous section padding | ### Touch Targets - Pill buttons have 12px vertical padding — comfortable thumb targets - Asset cards in the gallery are large by default and respond to tap with a hover-like lift effect - Filter chip tabs are padded to at least 44px tall including surrounding whitespace ### Collapsing Strategy - **Navigation**: full horizontal bar → hamburger toggle; pink CTA persists as a compact pill - **Hero**: KlarheitInline headline scales from 80px → ~36px with proportional tracking; subhead collapses or reduces line count - **Asset gallery**: 5–6 columns → 4 → 2 → 1 column; card proportions remain consistent - **Feature sections**: two-column split → stacked vertical; image above copy, CTA below ### Image Behavior - Asset thumbnails scale proportionally within the grid — `object-fit: cover` inside fixed-aspect containers - Hero images and product screenshots scale as contained backgrounds, recentering at narrow widths - AI tool previews crop on mobile to show the most relevant portion of the generated result --- ## Agent Prompt Guide ### Quick Color Reference - Background: White (`{colors.background}`) - Text: Near-Black (`{colors.ink}`) - Secondary text: Gray (`{colors.ink-secondary}`) - Brand accent / CTA: Electric Pink (`{colors.primary}`) - Dark section: Near-Black (`{colors.surface-dark}`) - Border: Light Gray (`{colors.border}`) ### Example Component Prompts - "Create a hero section on white (`{colors.background}`). Top: full-width horizontal navigation with near-black logo left, uppercase tracked nav links center using `{typography.nav-link}`, and a pink pill CTA right (`{colors.primary}` fill, white text, `{rounded.pill}`, 12px 24px padding). Hero body: a centered headline at 80px KlarheitInline 800, letter-spacing -1.6px (`{typography.display-hero}`) in near-black; below it a 20px Geist body lead (`{typography.body-large}`); then a pink primary pill button (`{components.button-primary}`) beside a gray ghost pill button (`{components.button-ghost}`)." - "Build an asset gallery card: light gray surface (`{colors.surface}`), `{rounded.lg}` radius (12px), zero padding so the image bleeds to the corner. Overlay a 'Premium' badge in the top-right corner: pink-container fill (`{colors.primary-container}`), pink text (`{colors.primary}`), full pill, `{typography.caption}`, 4px 10px padding. On hover, lift the card with a soft shadow (0 2px 8px rgba(0,0,0,0.08)) and show a quick-action pink button." - "Design the search bar: full-width pill input (`{rounded.pill}`, 12px 20px padding, `{colors.border}` outline, white fill, `{typography.body}` for placeholder text). Inside the pill on the right, a near-black nested button (`{colors.surface-dark}` fill, white label 'Search', 12px 20px padding, `{rounded.pill}`) that shifts to `{colors.primary}` on hover." - "Create a filter chip row: five pill chips in a horizontal flex row. Resting state: `{colors.surface}` fill, near-black text, `{typography.caption}`, `{rounded.pill}`, 6px 14px padding. Active state: `{colors.primary}` fill, white text, same radius and padding. Label examples: 'All', 'Photos', 'Vectors', 'Videos', 'AI Images'." - "Render a feature split section: white background, two-column layout (50/50). Left: a 40px KlarheitInline heading (`{typography.heading-section}`, near-black, letter-spacing -0.6px), a 20px Geist body-large paragraph below, then a pink primary pill button (`{components.button-primary}`) and a ghost pill button side-by-side. Right: a 16px-radius card (`{rounded.xl}`) holding a product screenshot or AI-generated asset preview, no internal padding." ### Iteration Guide 1. Start on white (`{colors.background}`). If the canvas is colored or dark, revert — white is the brand's resting state for marketing. 2. Every button and input is a full pill (`{rounded.pill}`). If a control has a square or mid-radius corner, change it. 3. Pink (`{colors.primary}`) appears exactly once per section as the interactive anchor — the primary button. All other buttons and controls stay in near-black or light gray. 4. Display text is KlarheitInline at 800 weight. If headlines look too thin or lack punch, check that the font is loading (not falling back to Helvetica). 5. Apply negative letter-spacing to all KlarheitInline: -1.6px at 80px, proportionally less at smaller sizes. 6. Asset cards are near-zero-padding with a hairline border at rest; shadow appears only on hover. 7. When building dark sections, flip to `{colors.surface-dark}` canvas with white copy and `{colors.on-dark}` — then let the pink CTA hover state be the section's color moment. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Freepik. Brand names and trademarks belong to their respective owners.