Rive
Ecosystem Index
Loading
AI Data Preparation and Migration Software | Flatfile
Cool, structured geometry—crisp sans-serif clarity on a vast, light-grey canvas.
Click any value to copy. Roles are suggestions, not gospel.
- #f96b08oklch(69.3% 0.194 46)Dominant
- #9c84fcoklch(68.8% 0.172 290)Surface
- #813703oklch(43.1% 0.116 48)Ink
- #7c816coklch(59.3% 0.032 118)Accent
- #acccacoklch(81.3% 0.056 145)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | FlatfileDiatype | 60px | 400 | 1 | -1.8px | Aa Bb Cc |
| h2 | Sharp Grotesk | 26px | 500 | 1.42 | -0.26px | Aa Bb Cc |
| h3 | FlatfileDiatype | 16px | 400 | 1.5 | -0.25px | Aa Bb Cc |
| body | FlatfileDiatypeVariable | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | FlatfileDiatypeVariable | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #f96b08;
--color-surface: #9c84fc;
--color-ink: #813703;
--color-accent: #7c816c;
--color-detail: #acccac;
}
/* CSS variables exposed by source */
:root {
--border: 214.3 31.8% 91.4%;
--gray-primary-200: #e3e3e3;
--color-pigeon700: #616a7d;
--color-midnight400: #54568f;
--color-electric400: #a1a8ff;
--secondary: 210 40% 96.1%;
--gray-primary-50: #fff;
--tw-ring-shadow: 0 0 #0000;
--white-opacity-80: hsla(0,0%,100%,.8);
--white-opacity-40: hsla(0,0%,100%,.4);
--black-primary-200: #bfbfbf;
--black-opacity-30: hsla(0,0%,8%,.3);
--space-sm: 12px;
--shadow-xs: 0px 2.634px 4.023px 0px rgba(27,27,30,.05),0px 1.046px 1.577px 0px rgba(27,27,30,.04);
--card: 0 0% 100%;
--color-sunflower300: #ffefc2;
--color-jade500: #80ddb4;
--color-sky400: #73b2f0;
--white-opacity-90: hsla(0,0%,100%,.9);
--color-midnight900: #090b2b;
--space-base: 16px;
--shadow-md: 0px 8.111px 12.941px 0px rgba(27,27,30,.08),0px 4.908px 7.645px 0px rgba(27,27,30,.07),0px 2.634px 4.023px 0px rgba(27,27,30,.05),0px 1.046px 1.577px 0px rgba(27,27,30,.04);
--primary-foreground: 210 40% 98%;
--black-primary-50: #f2f2f2;
--card-foreground: 222.2 47.4% 11.2%;
--color-midnight100: #c2c3e9;
--space-xl: 40px;
--white-opacity-30: hsla(0,0%,100%,.3);
--black-primary-300: #a6a6a6;
--black-opacity-90: hsla(0,0%,8%,.9);
--color-sky600: #2473d1;
--color-jade700: #4dca94;
--muted: 210 40% 96.1%;
--color-pigeon400: #cad0dc;
--font-secondary: "SourceSerif4",serif;
--gray-primary-800: #8f8f8f;
--tw-border-spacing-x: 0;
--color-pinata700: #ff8d77;
--color-gray-300: #d7d7d7;
--radius-0: 0;
--color-pigeon300: #d7dee8;
--accent-foreground: 222.2 47.4% 11.2%;
--color-jade900: #32a673;
--tw-ring-color: rgba(59,130,246,.5);
--white-opacity-100: #fff;
--black-opacity-80: hsla(0,0%,8%,.8);
--color-gray-500: #bbb;
--navbar-height: 73px;
--font-size-md: 1.125rem;
--gray-primary-300: #d5d5d5;
--transition-basic: all ease 0.25s;
--swiper-theme-color: #007aff;
--color-gray-50: #f8f8f8;
--ring: 215 20.2% 65.1%;
--tw-rotate: 0;
--space-2xl: 64px;
--popover: 0 0% 100%;
--tw-ring-offset-color: #fff;
--color-white: #fff;
--color-gray-400: #cdcdcd;
--black-primary-400: #8c8c8c;
--black-primary-100: #d9d9d9;
--color-midnight700: #1d1f4a;
--black-primary-800: #404040;
--gray-primary-400: #c7c7c7;
--radius-sm: 0.25rem;
--font-size-base: 1rem;
--color-nectar200: #fff5ed;
--shadow-sm: 0px 4.908px 7.645px 0px rgba(27,27,30,.07),0px 2.634px 4.023px 0px rgba(27,27,30,.05),0px 1.046px 1.577px 0px rgba(27,27,30,.04);
--gray-primary-900: #818181;
--color-pigeon200: #e8edf4;
--transition-in-out-cubic: all 325ms cubic-bezier(0.645,0.045,0.355,1);
--black-opacity-60: hsla(0,0%,8%,.6);
--radius: 0.5rem;
--color-pigeon800: #404857;
--color-electric200: #dce0ff;
--popover-foreground: 222.2 47.4% 11.2%;
--color-gray-100: #ededed;
--color-midnight300: #6668a1;
--color-nectar900: #f6ba83;
--tw-ring-offset-width: 0px;
--container-max-width: 1168px;
--gray-primary-600: #ababab;
--tw-scroll-snap-strictness: proximity;
--space-8xl: 200px;
--color-sunflower100: #fffaed;
--color-sunflower800: #ffd152;
--tw-shadow-colored: 0 0 #0000;
--space-2xs: 4px;
--destructive-foreground: 210 40% 98%;
--font-size-xs: 0.75rem;
--color-pigeon500: #b4bccc;
--black-opacity-10: hsla(0,0%,8%,.1);
--color-sky500: #54a0ea;
--space-3xs: 2px;
--color-pinata900: #ee6f57;
--radius-2xl: 2.5rem;
--tw-skew-y: 0;
--radius-md: 0.5rem;
--white-opacity-70: hsla(0,0%,100%,.7);
--radius-lg: 1rem;
--color-light: #fff;
--black-opacity-40: hsla(0,0%,8%,.4);
--space-7xl: 160px;
--color-pinata500: #ffb1a9;
--radius-button: 6.1875rem;
--tw-ring-offset-shadow: 0 0 #0000;
--color-sky800: #003d95;
--black-primary-950: #151515;
--color-gray-800: #565656;
--color-nectar700: #fbcca2;
--font-size-sm: 0.875rem;
--color-electric900: #0c009d;
--accent: 210 40% 96.1%;
--color-midnight600: #2e3168;
--gray-primary-700: #9d9d9d;
--color-sky100: #d4eaff;
--space-5xl: 104px;
--black-opacity-100: #151515;
--black-opacity-20: hsla(0,0%,8%,.2);
--font-size-2xl: 2.875rem;
--color-pinata100: #ffe9e8;
--secondary-foreground: 222.2 47.4% 11.2%;
--max-container-width: 1168px;
--gray-primary-100: #f8f8f8;
--background: 0 0% 100%;
--color-sky900: #002e70;
--black-primary-900: #262626;
--color-nectar100: #fff9f5;
--color-nectar800: #f9c493;
--color-electric300: #c4c9ff;
--color-nectar500: #ffdcbd;
--tw-scale-y: 1;
--color-nectar400: #ffe4cc;
--color-midnight800: #111338;
--color-dark: #1b1b1e;
--color-pinata200: #ffdddb;
--white-opacity-20: hsla(0,0%,100%,.2);
--color-sunflower600: #ffdd81;
--space-4xl: 88px;
--color-pigeon600: #8b93a4;
--font-size-2xs: 0.625rem;
--tw-translate-y: 0;
--color-midnight200: #9698d0;
--color-electric600: #6673ff;
--color-sky200: #b9dcff;
--color-electric700: #4c48ef;
--color-midnight500: #3d3f7a;
--color-gray-900: #2c2c2c;
--gray-primary-500: #b9b9b9;
--font-primary: "FlatfileDiatype",sans-serif;
--color-electric800: #3b2fc9;
--space-lg: 32px;
--color-gray-950: #202020;
--space-6xl: 120px;
--color-jade600: #6fd0a6;
--color-gray-700: grey;
--color-pinata600: #ffa197;
--color-gray-600: #aaa;
--font-size-xl: 2.375rem;
--color-electric100: #eceeff;
--space-xs: 8px;
--muted-foreground: 215.4 16.3% 46.9%;
--tw-skew-x: 0;
--font-size-3xl: 3.75rem;
--color-pinata400: #ffbebb;
--color-nectar300: #fff0e3;
--color-sunflower500: #ffe396;
--radius-full: 100%;
--color-jade400: #95e9c4;
--swiper-navigation-size: 44px;
--font-size-lg: 1.375rem;
--color-jade100: #daffef;
--tw-shadow: 0 0 #0000;
--color-sunflower900: #ffca38;
--tw-translate-x: 0;
--transition-basic-slow: all ease 0.5s;
--color-gray-200: #e5e5e5;
--input: 0 0% 0%;
--black-opacity-50: hsla(0,0%,8%,.5);
--color-sky700: #034eb9;
--color-jade800: #3db983;
--space-md: 24px;
--color-black: #000;
--color-pinata300: #ffd1cf;
--destructive: 0 100% 50%;
--transition-basic-fast: all ease 0.1s;
--tw-scale-x: 1;
--color-jade300: #adf5d6;
--color-gray-850: #3f3f3f;
--color-nectar600: #ffd9b7;
--black-primary-500: grey;
--radius-xs: 0.125rem;
--tw-border-spacing-y: 0;
--white-opacity-10: hsla(0,0%,100%,.1);
--color-sunflower200: #fff5d9;
--space-3xl: 72px;
--black-primary-600: #737373;
--color-electric500: #808aff;
--radius-xl: 1.5rem;
--color-sunflower700: #ffd86e;
--gray-primary-950: #737373;
--primary: 222.2 47.4% 11.2%;
--color-sky300: #94c9ff;
--foreground: 222.2 47.4% 11.2%;
--black-opacity-70: hsla(0,0%,8%,.7);
--color-sunflower400: #ffe9ad;
--color-pigeon100: #f6f8fc;
--white-opacity-50: hsla(0,0%,100%,.5);
--color-pigeon900: #303744;
--white-opacity-60: hsla(0,0%,100%,.6);
--color-pinata800: #fd7f67;
--black-primary-700: #595959;
--color-jade200: #c1fee3;
}Drop-in prompt
Build a landing page in the visual style of AI Data Preparation and Migration Software | Flatfile.
Reference design system (extracted from the live site):
- Palette: #f96b08, #9c84fc, #813703, #7c816c, #acccac
- Typefaces: FlatfileDiatype, Sharp Grotesk, FlatfileDiatypeVariable
- Macrostructure: Ecosystem Index
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/flatfile-io
