№ lottiefiles-com

Lottiefiles

Soft, pastel geometry floats on a clean, airy expanse, fostering joyful exploration.

Feature Stackplayful minimalism developer tools saaslight

The page uses a clean, airy layout with rounded shapes and bright, friendly illustrations. The color palette is pastel and neon, creating a light and approachable mood. The overall impression is one of playful functionality. · lottie files, animation library, motion design, developer tools, web animations, icon animations, motion graphics, lottie, animation platform, design system

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: pastel · muted · neon

SwatchHexOKLCHSuggested roleCopy

Hex#f6be1d
OKLCHoklch(83.0% 0.165 86)
RoleDominant
find sites →
Hex#0f978f
OKLCHoklch(61.1% 0.104 188)
RoleSurface
find sites →
Hex#fcdc6c
OKLCHoklch(90.0% 0.136 94)
RoleInk
find sites →
Hex#8b51ac
OKLCHoklch(54.1% 0.148 312)
RoleAccent
find sites →
Hex#bcc9cb
OKLCHoklch(82.7% 0.015 208)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	DM Sans LF	96px	500	1.04	-4.8px	Aa Bb Cc
h2	DM Sans LF	20px	500	1.14	-0.2px	Aa Bb Cc
h3	DM Sans LF	32px	500	1.2	-0.96px	Aa Bb Cc
body	Inter LF	16px	400	1.5	0	Aa Bb Cc
caption	Inter LF	14px	500	1.43	0	Aa Bb Cc
button	Inter LF	14px	500	1.43	0	Aa Bb Cc

Spacing scale

12px

16px

96px

224px

Radius scale

0px

4px

6px

8px

12px

16px

24px

48px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #f6be1d;
  --color-surface: #0f978f;
  --color-ink: #fcdc6c;
  --color-accent: #8b51ac;
  --color-detail: #bcc9cb;
}

/* CSS variables exposed by source */
:root {
  --border: oklch(92% .004 286.32);
  --color--alpha-40: oklch(100% 0 0/.6);
  --color-zinc-200: oklch(92% .004 286.32);
  --color-pink-500: oklch(65.6% .241 354.308);
  --color-orange-600: oklch(64.6% .222 41.116);
  --color-neutral-600: oklch(43.9% 0 0);
  --color-muted-foreground-inverse: oklch(70.5% .015 286.067);
  --color-orange-800: oklch(47% .157 37.304);
  --color-teal-400: oklch(77.7% .152 181.912);
  --color-blue-700: oklch(48.8% .243 264.376);
  --color-neutral-300: oklch(87% 0 0);
  --color-purple-800: oklch(43.8% .218 303.724);
  --text-base--line-height: 1.5;
  --radius-4xl: 2rem;
  --color-cyan-700: oklch(52% .105 223.128);
  --color--alpha-30: oklch(100% 0 0/.7);
  --color-gray-300: oklch(87.2% .01 258.338);
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --color-cyan-200: oklch(91.7% .08 205.041);
  --color-amber-300: oklch(87.9% .169 91.605);
  --color-gray-500: oklch(55.1% .027 264.364);
  --color-primary-foreground: oklch(98.5% 0 0);
  --color-green-500: oklch(72.3% .219 149.579);
  --text-9xl--line-height: 1;
  --font-noto-kr: "Noto Sans KR LF","Noto Sans KR",sans-serif;
  --color-white: #fff;
  --color-sky-600: oklch(58.8% .158 241.966);
  --color-gray-400: oklch(70.7% .022 261.325);
  --color-blue-400: oklch(70.7% .165 254.624);
  --color-pink-50: oklch(97.1% .014 343.198);
  --color-slate-400: oklch(70.4% .04 256.788);
  --radius-sm: calc(.5rem - 4px);
  --color-zinc-950: oklch(14.1% .005 285.823);
  --color-gray-100: oklch(96.7% .003 264.542);
  --color-purple-600: oklch(55.8% .288 302.321);
  --color-border-translucent: oklch(92% .004 286.32/.5);
  --color-violet-500: oklch(60.6% .25 292.717);
  --color-fuchsia-600: oklch(59.1% .293 322.896);
  --color-lime-200: oklch(93.8% .127 124.321);
  --color-fuchsia-200: oklch(90.3% .076 319.62);
  --color-green-900: oklch(39.3% .095 152.535);
  --radius-md: calc(.5rem - 2px);
  --color-pink-100: oklch(94.8% .028 342.258);
  --color-neutral-900: oklch(20.5% 0 0);
  --radius-lg: .5rem;
  --color-slider-track: oklch(92% .004 286.32/.5);
  --color-neutral-100: oklch(97% 0 0);
  --color--alpha-60: oklch(100% 0 0/.4);
  --color-yellow-950: oklch(28.6% .066 53.813);
  --accent: oklch(96.7% .001 286.375);
  --color-violet-950: oklch(28.3% .141 291.089);
  --color-violet-300: oklch(81.1% .111 293.571);
  --color-zinc-900: oklch(21% .006 285.885);
  --color-sky-300: oklch(82.8% .111 230.318);
  --color-lime-800: oklch(45.3% .124 130.933);
  --color-emerald-900: oklch(37.8% .077 168.94);
  --color-sidebar-primary-foreground: oklch(98.5% 0 0);
  --color-slate-600: oklch(44.6% .043 257.281);
  --color-pink-600: oklch(59.2% .249 .584);
  --text-shadow-xs: 0px 1px 1px #0003;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Lottiefiles.
Reference design system (extracted from the live site):
- Palette: #f6be1d, #0f978f, #fcdc6c, #8b51ac, #bcc9cb
- Typefaces: DM Sans LF, Inter LF
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/lottiefiles-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

DM Sans LF

96px

500

1.04

-4.8px

Aa Bb Cc

DM Sans LF

20px

500

1.14

-0.2px

Aa Bb Cc

DM Sans LF

32px

500

1.2

-0.96px

Aa Bb Cc

body

Inter LF

16px

400

1.5

Aa Bb Cc

caption

Inter LF

14px

500

1.43

Aa Bb Cc

button

Inter LF

14px

500

1.43

Aa Bb Cc

:root { --color-dominant: #f6be1d; --color-surface: #0f978f; --color-ink: #fcdc6c; --color-accent: #8b51ac; --color-detail: #bcc9cb; } /* CSS variables exposed by source */ :root { --border: oklch(92% .004 286.32); --color--alpha-40: oklch(100% 0 0/.6); --color-zinc-200: oklch(92% .004 286.32); --color-pink-500: oklch(65.6% .241 354.308); --color-orange-600: oklch(64.6% .222 41.116); --color-neutral-600: oklch(43.9% 0 0); --color-muted-foreground-inverse: oklch(70.5% .015 286.067); --color-orange-800: oklch(47% .157 37.304); --color-teal-400: oklch(77.7% .152 181.912); --color-blue-700: oklch(48.8% .243 264.376); --color-neutral-300: oklch(87% 0 0); --color-purple-800: oklch(43.8% .218 303.724); --text-base--line-height: 1.5; --radius-4xl: 2rem; --color-cyan-700: oklch(52% .105 223.128); --color--alpha-30: oklch(100% 0 0/.7); --color-gray-300: oklch(87.2% .01 258.338); --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --color-cyan-200: oklch(91.7% .08 205.041); --color-amber-300: oklch(87.9% .169 91.605); --color-gray-500: oklch(55.1% .027 264.364); --color-primary-foreground: oklch(98.5% 0 0); --color-green-500: oklch(72.3% .219 149.579); --text-9xl--line-height: 1; --font-noto-kr: "Noto Sans KR LF","Noto Sans KR",sans-serif; --color-white: #fff; --color-sky-600: oklch(58.8% .158 241.966); --color-gray-400: oklch(70.7% .022 261.325); --color-blue-400: oklch(70.7% .165 254.624); --color-pink-50: oklch(97.1% .014 343.198); --color-slate-400: oklch(70.4% .04 256.788); --radius-sm: calc(.5rem - 4px); --color-zinc-950: oklch(14.1% .005 285.823); --color-gray-100: oklch(96.7% .003 264.542); --color-purple-600: oklch(55.8% .288 302.321); --color-border-translucent: oklch(92% .004 286.32/.5); --color-violet-500: oklch(60.6% .25 292.717); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-lime-200: oklch(93.8% .127 124.321); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-green-900: oklch(39.3% .095 152.535); --radius-md: calc(.5rem - 2px); --color-pink-100: oklch(94.8% .028 342.258); --color-neutral-900: oklch(20.5% 0 0); --radius-lg: .5rem; --color-slider-track: oklch(92% .004 286.32/.5); --color-neutral-100: oklch(97% 0 0); --color--alpha-60: oklch(100% 0 0/.4); --color-yellow-950: oklch(28.6% .066 53.813); --accent: oklch(96.7% .001 286.375); --color-violet-950: oklch(28.3% .141 291.089); --color-violet-300: oklch(81.1% .111 293.571); --color-zinc-900: oklch(21% .006 285.885); --color-sky-300: oklch(82.8% .111 230.318); --color-lime-800: oklch(45.3% .124 130.933); --color-emerald-900: oklch(37.8% .077 168.94); --color-sidebar-primary-foreground: oklch(98.5% 0 0); --color-slate-600: oklch(44.6% .043 257.281); --color-pink-600: oklch(59.2% .249 .584); --text-shadow-xs: 0px 1px 1px #0003; }

Build a landing page in the visual style of Lottiefiles. Reference design system (extracted from the live site): - Palette: #f6be1d, #0f978f, #fcdc6c, #8b51ac, #bcc9cb - Typefaces: DM Sans LF, Inter LF - Macrostructure: Feature Stack Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/lottiefiles-com