Mobbin
Specimen
Crisp, cool geometry with stark black text on a vast, airy, pale grey canvas.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Arial | 38px | 700 | 1.16 | 0 | Aa Bb Cc |
| h2 | PP Neue Montreal Mono | 12px | 400 | 1 | 0.72px | Aa Bb Cc |
| body | Arial | 16px | 400 | 1 | 0 | Aa Bb Cc |
| button | Arial | 14px | 500 | 1.71 | 0 | Aa Bb Cc |
Max content width 440px
:root {
--color-dominant: #fc3404;
--color-surface: #fca997;
--color-ink: #1c744c;
--color-accent: #4ca078;
--color-detail: #acd4c4;
}
/* CSS variables exposed by source */
:root {
--primary--black-transparent-10: #1414141a;
--primary--dark-grey-grid: #414149;
--primary--white: white;
--primary--white-transparent-10: #ffffff1a;
--primary--black: #141414;
--_typography---heading--h1--letter-spacing: -.02em;
--_typography---ui--sans--s--line-height: 110%;
--_theme---accent-section-foreground: white;
--_theme---tag-background: #737373;
--sci-fi--teal-50: #e2fdf9;
--psychological--red: #a30805;
--_typography---body--l--font-weight: 500;
--_typography---heading--jumbo--font-family: Swizzy,Arial,sans-serif;
--sci-fi--teal-300: #85e0d3;
--_typography---body--s--font-size: min(24px,max(13px,calc(13px + 11*( (min(100vw,100vh*(16/9)) - 320px)/1600 ))));
--giallo--pink: #ec24c8;
--_typography---heading--h1--font-family: Swizzy,Arial,sans-serif;
--_theme---brand-2: #30a81d;
--psychological--darker-blue: #060317;
--samba--yellow: #fecc33;
--sci-fi--teal: #0ec0b1;
--giallo--light-pink: #f7a1e7;
--_typography---ui--mono--s--font-family: "PP Neue Montreal Mono",Arial,sans-serif;
--_typography---heading--big--font-size: min(280px,max(80px,calc(80px + 200*( (min(100vw,100vh*(16/9)) - 320px)/1600 ))));
--_typography---body--l--letter-spacing: -.02em;
--_typography---ui--mono--xs--font-weight: 400;
--_theme---nav-secondary: #141414;
--_typography---heading--h3--letter-spacing: -.02em;
--_typography---ui--sans--xs--font-size: .875rem;
--_theme---pattern-background: whitesmoke;
--_typography---ui--mono--m--line-height: 100%;
--_theme---brand-4: #fecc33;
--giallo--red: #af0035;
--_typography---heading--big--line-height: 110%;
--_typography---heading--jumbo--font-size: min(380px,max(164px,calc(164px + 216*( (min(100vw,100vh*(16/9)) - 320px)/1600 ))));
--_typography---heading--h3--font-weight: 500;
--_theme---tag-foreground: white;
--_typography---ui--sans--s--font-size: min(18px,max(13px,calc(13px + 5*( (min(100vw,100vh*(16/9)) - 320px)/1600 ))));
--_typography---ui--mono--xs--font-size: .5625rem;
--giallo--blue: #0440e2;
--_typography---ui--sans--xs--letter-spacing: 0em;
--vh: 9px;
--giallo--red-400: #ca8297;
--noir--grey-500: #737373;
--_typography---heading--h1--font-size: min(160px,max(49px,calc(49px + 111*( (min(100vw,100vh*(16/9)) - 390px)/1530 ))));
--_theme---accent-section-background: #141414;
--psychological--dark-blue: #200736;
--_typography---heading--jumbo--font-weight: 500;
--_typography---ui--mono--xs--font-family: "PP Neue Montreal Mono",Arial,sans-serif;
--sci-fi--brown: #461e1b;
--_typography---ui--sans--xs--font-weight: 500;
--_typography---heading--h3--line-height: 86%;
--_typography---body--m--line-height: 100%;
--_theme---foreground: #141414;
--_typography---heading--big--font-family: Swizzy,Arial,sans-serif;
--samba--orange: #ff8400;
--giallo--dark-red: #540019;
--_typography---heading--h3--font-family: Swizzy,Arial,sans-serif;
--_typography---ui--mono--s--font-size: .75rem;
--_theme---neutral-4: #d9d9d9;
}Drop-in prompt
Build a landing page in the visual style of Flim | The search engine for creative people.
Reference design system (extracted from the live site):
- Palette: #fc3404, #fca997, #1c744c, #4ca078, #acd4c4
- Typefaces: Arial, PP Neue Montreal Mono
- Macrostructure: Specimen
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/flim-ai