--- version: alpha name: LottieFiles description: An animation-platform built on white canvas and teal motion — DM Sans display headings at extreme negative tracking, Inter for UI, and a signature teal primary that signals life and interactivity rather than static SaaS. colors: # Surface / canvas — pure white, clean stage for animated content background: "#ffffff" surface: "#f4f4f5" # zinc-100 — muted cards, feature tiles, faint panels surface-dark: "#09090b" # zinc-950 — dark sections, hero overlays, dark-mode panels # Ink / text ink: "#09090b" # zinc-950 — primary text, headlines ink-secondary: "#3f3f46" # zinc-700 — secondary headings, labels ink-muted: "#9f9fa9" # zinc-400 — captions, metadata, placeholder text on-dark: "#fafafa" # near-white on dark surfaces # Brand accent — LottieFiles teal primary: "#019d91" # brand teal — CTAs, active states, interactive elements primary-hover: "#00c1a2" # brighter hover teal — was --cc-btn-primary-hover-bg primary-container: "#e0f5f3" # very light teal tint for badges, soft highlights on-primary: "#fafafa" # near-white text on teal # Brand secondary secondary: "#00c1a2" # lighter teal — secondary actions, gradient endpoint on-secondary: "#09090b" # dark text on secondary when used as fill # Semantic success: "#019d91" # reuses brand teal for success — motion = alive warning: "#f59e0b" # amber-500 approx — was oklch(70.5% .213 47.604) error: "#7f1d1d" # red-900 approx — was oklch(39.6% .141 25.723) highlight: "#ffbf03" # warm yellow highlight — was oklch(84% .172 84.1) # Borders border: "#e4e4e7" # zinc-200 — default hairline borders border-strong: "#27272a" # zinc-800 — strong borders, dark-mode dividers # Shadow tint (opaque approximation) shadow-soft: "#000000" # was rgba(0,0,0,0.1) — Google format requires hex typography: display-hero: fontFamily: "DM Sans, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 96px fontWeight: 500 lineHeight: 1.04 letterSpacing: -4.8px display: fontFamily: "DM Sans, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 60px fontWeight: 500 lineHeight: 1.1 letterSpacing: -2.4px heading-section: fontFamily: "DM Sans, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 40px fontWeight: 600 lineHeight: 1.2 letterSpacing: -1.2px heading-sub: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 24px fontWeight: 600 lineHeight: 1.3 letterSpacing: -0.48px body-large: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.56 letterSpacing: 0px body: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.14px body-medium: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.14px nav-link: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0px button-ui: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0px caption: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.14px mono-code: fontFamily: "Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace" fontSize: 13px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 96px rounded: none: 0px sm: 4px md: 6px lg: 12px xl: 16px 2xl: 24px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 8px 16px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 8px 16px border: "1px solid {colors.border-strong}" button-secondary-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" button-ghost: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 8px 16px button-ghost-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" card: backgroundColor: "{colors.background}" rounded: "{rounded.xl}" padding: 16px border: "1px solid {colors.border}" card-feature: backgroundColor: "{colors.surface}" rounded: "{rounded.2xl}" padding: 16px border: "1px solid transparent" card-feature-hover: backgroundColor: "{colors.surface}" border: "1px solid {colors.primary}" input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 8px 12px border: "1px solid {colors.border}" input-focus: border: "1px solid {colors.primary}" backgroundColor: "{colors.background}" badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 2px 10px nav-item: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.md}" padding: 8px 16px nav-item-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" --- # LottieFiles Design System ## Overview LottieFiles occupies the rare intersection between design tool and content marketplace, and its visual identity performs that duality confidently. The canvas is clean white — a deliberate gallery-neutral backdrop that lets animated content breathe and shimmer without visual competition. Against that white, the typography does something unusual: DM Sans at 96px and -4.8px letter-spacing turns display headlines into kinetic objects in themselves, the tight tracking giving static text a compressed, almost spring-loaded quality. The payoff arrives when Lottie animations play — the page snaps from "design tool" to "motion platform" in a single beat. The brand accent, `{colors.primary}`, is a deep teal derived from the original Lottie green-ocean color — a hue that reads simultaneously as organic (tropical water) and digital (terminal green's cooler cousin). It appears on CTAs, interactive toggles, and active states, never as decoration. The secondary teal `{colors.secondary}` floats lighter and is reserved for gradient endpoints and softer interactive feedback. Together the two teals form a monochromatic brand stripe that gives LottieFiles a recognizable visual temperature: cool, precise, alive. The typography split is intentional and precise: DM Sans owns the emotional moments (hero headlines, section headings), while Inter handles all utility work (nav, buttons, body, captions). DM Sans at display sizes has a warmth and personality that Inter lacks at small sizes, but Inter's neutrality at 14–16px keeps the UI chrome invisible. The system uses the Tailwind v4 CSS variable architecture internally, meaning spacing, radius, and typography all snap to a 4px base grid with exact breakpoints at 640px, 768px, 1024px, 1280px, and 1440px. **Key Characteristics:** - `{colors.primary}` (#019d91) is the single accent — no competing brand colors, no rainbow palette - DM Sans at medium weight (500) for all display moments, Inter for all UI chrome - Display-hero at 96px with -4.8px tracking — the tightest letter-spacing in the system - White canvas (`{colors.background}`) as a deliberate neutral stage for motion content - `{colors.surface}` (#f4f4f5) used for feature tile backgrounds, never for page canvas - Border radius range: 6px for compact buttons, up to 24px for large feature cards - Dark-mode–capable token architecture (CSS vars toggle between zinc-950 and white) - `{colors.ink}` is zinc-950 (#09090b), not pure black — a warm-dark tone - Teal hover (`{colors.primary-hover}`) is brighter and more saturated than resting teal - Animation and motion are first-class — the UI is designed as a frame for Lottie content - Mono stack (Menlo/Monaco) used for code snippets and developer-facing contexts - Spacing base unit: 4px, with a generous 4xl of 96px for section breathing room ## Colors ### Primary - **White** (`{colors.background}`): The entire page canvas — pure white lets animation thumbnails and Lottie previews read without competing fills - **Zinc-950** (`{colors.ink}`): Deep near-black (#09090b) for all headlines, body text, and icons on light surfaces - **Zinc-100** (`{colors.surface}`): Feature tiles, muted panels, and interactive surface hover states ### Brand Accent - **Teal Primary** (`{colors.primary}`): The signature LottieFiles teal (#019d91) — reserved for primary CTAs ("Sign up," "Publish animation"), active nav states, and interactive element highlights. Never used as a background fill for large areas - **Teal Hover** (`{colors.primary-hover}`): Brighter `#00c1a2` used on hover/focus of teal elements — visibly lighter and more luminous than the resting state - **Teal Container** (`{colors.primary-container}`): Barely-there teal wash (#e0f5f3) for badge fills, tag backgrounds, and soft category indicators ### Text States - **Ink-secondary** (`{colors.ink-secondary}`): Zinc-700 for secondary headings and label text - **Ink-muted** (`{colors.ink-muted}`): Zinc-400 (#9f9fa9) for captions, metadata, placeholders - **On-dark** (`{colors.on-dark}`): Near-white (#fafafa) for text on dark-surface-dark panels ### Semantic - **Highlight** (`{colors.highlight}`): Warm amber-yellow (#ffbf03) used for text highlighting in documentation contexts - **Warning** (`{colors.warning}`): Amber-500 for non-critical alerts - **Error** (`{colors.error}`): Deep red for destructive actions ### Borders & Shadows - **Border** (`{colors.border}`): Zinc-200 (#e4e4e7) — hairline edges on cards and inputs - **Border-strong** (`{colors.border-strong}`): Zinc-800 for dark-mode dividers and high-contrast borders - Shadows use pure-black at low opacity — flattened to `{colors.shadow-soft}` (#000000) in the token; actual shadow values are set in the elevation table ## Typography ### Font Family - **Display**: `DM Sans`, with fallbacks: `Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif` - **UI / Body**: `Inter`, with fallbacks: `-apple-system, BlinkMacSystemFont, system-ui, sans-serif` - **Monospace**: `Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace` - **International**: Noto Sans JP and Noto Sans KR loaded for Japanese and Korean markets ### Hierarchy The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference rather than restating values. | Token | Use | |---|---| | `display-hero` | Hero section H1 — "Great designs come alive with motion!" style statements | | `display` | Section-level hero headings — feature section starters | | `heading-section` | Section headings throughout the page, feature names | | `heading-sub` | Subheadings, card titles, capability headers | | `body-large` | Lead paragraphs, feature descriptions above the fold | | `body` | Standard body copy, list items, UI descriptions | | `body-medium` | Medium-weight body for emphasis without heading hierarchy | | `nav-link` | Navigation items, dropdown labels | | `button-ui` | All button labels, CTA text | | `caption` | Metadata, timestamps, badges, tags | | `mono-code` | Code samples, developer documentation | ### Principles - DM Sans governs all emotional/display moments; Inter governs utility — they should never compete at the same size - Extreme negative tracking (-4.8px at 96px) is reserved for `{typography.display-hero}` only — don't apply tight tracking below 40px - Body copy tracks at +0.14px — slightly open for readability, not compressed - All font weights are declared from the Tailwind variable stack (100–900); the system uses 400, 500, 600 as the working range ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 4px. LottieFiles uses generous whitespace as a signal of quality — the animation content needs room to breathe. Section padding is typically 96px vertical, card gaps 24–32px, and inline element padding 8–16px. The liberal use of `{spacing.4xl}` at section breaks distinguishes the platform from dense developer-tool UIs. ### Grid & Container - Max content width: 1440px (`--container-8xl: 90rem`) - Standard breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), desktop (1440px) - Content is centered with responsive horizontal padding - Feature tiles use a responsive grid: 1-col mobile → 2-col tablet → 3-4-col desktop ### Whitespace Philosophy - Animation thumbnails and Lottie previews need isolation — padding around media is at least `{spacing.lg}` (24px) - Sections breathe with `{spacing.4xl}` (96px) vertical padding top and bottom - Card grids maintain `{spacing.lg}` (24px) gaps across all breakpoints ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Feature tiles, nav items, badges | | Subtle (Level 1) | `0 1px 3px 0 rgba(0,0,0,0.10)` | Cards, input fields | | Card (Level 2) | `0 4px 6px -1px rgba(0,0,0,0.10)` | Elevated cards, dropdowns | | Elevated (Level 3) | `0 10px 15px -3px rgba(0,0,0,0.10)` | Modals, popovers, floating panels | | Dialog (Level 4+) | `0 25px 50px -12px rgba(0,0,0,0.25)` | Dialogs, full-screen overlays | | Focus Ring | `0 0 0 2px #ffffff, 0 0 0 4px {colors.primary}` | Keyboard-navigable interactive elements | **Shadow Philosophy**: LottieFiles uses Tailwind's default box-shadow stack — soft, diffuse shadows with low opacity (10% black) that suggest physical depth without drama. The approach is deliberately understated: the motion content on the page is the drama. Shadows serve structure, not personality. Focus rings use a two-layer technique — white offset then teal ring — to work across both white and teal-background contexts. ## Shapes The complete radius scale is in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | Dividers, full-bleed images | | `sm` | 4px | Small tags, tight inline badges | | `md` | 6px | Buttons, nav dropdowns, compact inputs | | `lg` | 12px | Standard cards, modals, most UI containers | | `xl` | 16px | Feature tiles, large cards | | `2xl` | 24px | Large feature panels, illustrated containers | | `pill` | 9999px | Pill badges, toggle switches, search inputs | The system is layered rather than binary — small interactive controls use 6px while large surface containers scale to 24px, maintaining proportional visual consistency across component sizes. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them. ### Button variants - **`button-primary`** — Teal fill (`{colors.primary}`), near-white label, 6px radius. The standard "Sign up" and action CTA style. Hover brightens to `{colors.primary-hover}` - **`button-secondary`** — White fill with dark-ink border, dark label. Used for "Log in," "Get in touch," and secondary navigation actions - **`button-ghost`** — Transparent background, no border. Used inline in navigation, within cards, and for low-emphasis triggers; hover reveals `{colors.surface}` fill ### Cards Feature tiles (`card-feature`) use the zinc-100 surface fill with transparent border at rest; the border transitions to `{colors.primary}` on hover — a subtle teal edge that signals interactivity without an abrupt color shift. Standard `card` uses white fill with hairline `{colors.border}`. ### Inputs Inputs use white fill with zinc-200 border, 6px radius, and standard body sizing. On focus, border transitions to `{colors.primary}` teal, establishing a consistent "active = teal" convention across all interactive components. ### Badges / Tags Badges use the `{colors.primary-container}` teal wash with `{colors.primary}` text, pill-shaped. Category tags and feature labels follow the same pattern. ### Navigation Horizontal nav bar with white background, 14px Inter medium weight links. Nav items get a zinc-100 hover fill with 6px radius. The primary CTA ("Sign up") appears as a full teal button at the nav rail's right edge, visually anchoring the conversion action. ## Do's and Don'ts ### Do - Use `{colors.primary}` exclusively for interactive and conversion-critical elements — primary CTAs, active states, focus rings, and progress indicators - Use DM Sans (`{typography.display-hero}`) for all above-the-fold headings; switch to Inter for everything below the feature lead - Apply extreme negative tracking (`-4.8px`) only at `{typography.display-hero}` size — at smaller sizes it becomes unreadable - Pair `{colors.surface}` (zinc-100) tile backgrounds with transparent borders that transition to `{colors.primary}` on hover - Maintain white canvas (`{colors.background}`) as the page base — don't use teal or any chromatic color as a section background - Use `{spacing.4xl}` (96px) for vertical section separation to give animation content room to breathe - Keep the teal monochromatic — `{colors.primary}` and `{colors.primary-hover}` are the only hue in interactive UI; avoid introducing competing accent colors ### Don't - Don't use `{colors.primary}` as a large background fill — it exists only as a CTA, badge, or focus indicator, not a canvas - Don't use DM Sans for body text or UI labels — Inter owns that role and DM Sans loses its display impact if overused - Don't introduce mid-gray text colors between `{colors.ink-secondary}` and `{colors.ink-muted}` — the three-level ink hierarchy is intentional - Don't reduce button border-radius below `{rounded.md}` (6px) — the system's smallest functional shape; pill shapes are for badges only, not buttons - Don't animate shadows — LottieFiles uses Lottie animations for motion; CSS transitions are reserved for color/border state changes only - Don't use Noto Sans JP/KR for non-CJK content — those fonts are locale-specific fallbacks, not decorative choices - Don't mix DM Sans and Inter at the same visual level — they serve distinct roles; size and weight should make the hierarchy obvious --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <640px | Single-column layout, hero text scales to ~48px, nav collapses to hamburger | | Mobile | 640–767px | 1-col, hero remains single-column, feature tiles stack | | Tablet | 768–1023px | 2-col grids, nav shows abbreviated links | | Desktop | 1024–1279px | 3-col feature tiles, full nav, hero at 96px | | Large Desktop | ≥1280px | Max-width container at 1440px (90rem), expanded grid, wider card gutters | ### Touch Targets - All buttons use a minimum height of 36px (9px × 4 grid) — nav items at 36px height - Touch-friendly tap areas extend via padding beyond visible label bounds - Pill toggle and switch components use generous hit areas (≥44px height where possible) ### Collapsing Strategy - Hero heading scales down proportionally; letter-spacing relaxes as font-size decreases to maintain readability - Feature tile grids collapse: 3-4 col → 2 col → 1 col as viewport narrows - Navigation collapses to a hamburger at mobile breakpoints; CTA persists as a sticky element - Sidebar nav (for product sub-pages) collapses to a dropdown or off-canvas drawer on mobile ### Image Behavior - Lottie animation thumbnails maintain fixed aspect ratio (`--aspect-lottie-thumbnail: 32/21`) - Animation pack cards maintain `--aspect-animation-pack-card: 326/217.77` ratio - Images and Lottie previews use object-fit: cover with overflow hidden inside rounded containers --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (#ffffff) - Text: `{colors.ink}` (#09090b) - Brand accent: `{colors.primary}` (#019d91) - Secondary text: `{colors.ink-muted}` (#9f9fa9) - Border: `{colors.border}` (#e4e4e7) - CTA: `{colors.primary}` (#019d91) - Surface tile: `{colors.surface}` (#f4f4f5) ### Example Component Prompts - "Create a LottieFiles hero section: white background (`{colors.background}`), DM Sans 96px weight-500 at -4.8px letter-spacing (`{typography.display-hero}`) for the headline in `{colors.ink}`, a subheadline in Inter 18px weight-400 (`{typography.body-large}`) in `{colors.ink-muted}`, and a teal CTA button (`{components.button-primary}`) with 'Start for free' label. The Lottie animation preview sits to the right on desktop, full-width below on mobile." - "Build a LottieFiles feature card using `{components.card-feature}`: zinc-100 fill (`{colors.surface}`), 16px rounded (`{rounded.xl}`), 16px padding. Include a small Lottie icon, a heading in Inter 24px semibold (`{typography.heading-sub}`) in `{colors.ink}`, and a body paragraph in `{typography.body}` in `{colors.ink-muted}`. On hover, add a 1px border in `{colors.primary}` with a smooth 200ms transition." - "Create a LottieFiles primary CTA button using `{components.button-primary}`: background `{colors.primary}` (#019d91), text `{colors.on-primary}` (#fafafa), font `{typography.button-ui}` (Inter 14px medium), border-radius `{rounded.md}` (6px), padding 8px 16px. On hover, transition background to `{colors.primary-hover}` (#00c1a2) over 150ms ease-out." - "Generate a LottieFiles navigation bar: white background, max-width 1440px container, horizontal flex layout. Left: LottieFiles logo mark. Center: Inter 14px medium nav links (`{typography.nav-link}`) in `{colors.ink}` with `{colors.surface}` hover fill and 6px radius. Right: 'Log in' secondary button (`{components.button-secondary}`) and 'Sign up' primary button (`{components.button-primary}`). Nav height 60px with border-bottom `{colors.border}`." - "Create a LottieFiles badge/tag using `{components.badge}`: background `{colors.primary-container}` (#e0f5f3), text `{colors.primary}` (#019d91), Inter 12px weight-400 (`{typography.caption}`), pill shape (`{rounded.pill}`), padding 2px 10px. Use for category labels like 'Motion Tokens', 'Interactive', 'Dev Ready'." - "Build a LottieFiles file upload input: white fill (`{colors.background}`), zinc-200 border (`{colors.border}`), 6px radius (`{rounded.md}`), Inter 16px body (`{typography.body}`), `{colors.ink-muted}` placeholder text. On focus: border changes to `{colors.primary}` with a 0 0 0 3px `{colors.primary-container}` focus ring. On error: border `{colors.error}` with error message in `{typography.caption}`." ### Iteration Guide 1. Start with white canvas (`{colors.background}`) and deep ink (`{colors.ink}`) — establish the neutral stage before introducing brand color 2. Use `{colors.primary}` (#019d91) only at interactive decision points — if an element doesn't need to communicate "click me," it doesn't get teal 3. Set all headlines in DM Sans (`{typography.display-hero}` or `{typography.display}`); switch to Inter at body and UI sizes — never mix at the same hierarchy level 4. Apply shadows conservatively: most UI uses flat or Level-1 shadow; reserve elevated shadows for modals and popovers only 5. Use the three-tier ink hierarchy rigorously: `{colors.ink}` for primary text, `{colors.ink-secondary}` for supporting copy, `{colors.ink-muted}` for metadata — avoid inventing intermediate grays 6. Radius scales with component size: 6px for buttons/nav, 12–16px for cards, 24px for large panels, pill for badges 7. Respect the spacing rhythm: 4px base unit with `{spacing.4xl}` (96px) section breaks — the generous vertical rhythm is a core signal of quality --- ## 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 LottieFiles. Brand names and trademarks belong to their respective owners.