Artek Fi
Portfolio Grid
Soft, cool grey expanse — clean, geometric sans-serifs float in gentle, muted blues.




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 | __graphik_7126cf | 52px | 500 | 1.2 | -2.08px | Aa Bb Cc |
| h2 | __graphik_7126cf | 48px | 500 | 1.2 | -1.92px | Aa Bb Cc |
| h3 | __graphik_7126cf | 22px | 500 | 1.4 | -0.66px | Aa Bb Cc |
| body | __graphik_7126cf | 16px | 400 | 1.5 | -0.4px | Aa Bb Cc |
| caption | __graphik_7126cf | 14px | 500 | 1.43 | -0.4px | Aa Bb Cc |
| button | __graphik_7126cf | 16px | 400 | 1.5 | -0.4px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #225c78;
--color-surface: #1f3f6b;
--color-ink: #97c9e1;
--color-accent: #8e7e76;
--color-detail: #beb4ac;
}
/* CSS variables exposed by source */
:root {
--border: oklch(92.2% 0 0);
--color-indigo-300: oklch(78.5% .115 274.713);
--text-2xl: 1.5rem;
--color-yellow-600: oklch(68.1% .162 75.834);
--text-lg: 1.125rem;
--color-neutral-600: oklch(43.9% 0 0);
--primary-foreground: oklch(98.5% 0 0);
--text-5xl--line-height: 1;
--text-base--line-height: calc(1.5 / 1);
--radius-4xl: 2rem;
--color-gray-300: oklch(87.2% .01 258.338);
--accent-foreground: oklch(20.5% 0 0);
--font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--surface-primary: 0 0% 100%;
--color-gray-500: oklch(55.1% .027 264.364);
--color-green-500: oklch(72.3% .219 149.579);
--color-gray-50: oklch(98.5% .002 247.839);
--color-emerald-600: oklch(59.6% .145 163.225);
--text-lg--line-height: calc(1.75 / 1.125);
--color-white: #fff;
--surface-inverted-primary: 0 0% 0%;
--color-gray-400: oklch(70.7% .022 261.325);
--radius-sm: .25rem;
--font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--surface-inverted-elevated: 0 0% 25%;
--font-weight-bold: 700;
--color-gray-100: oklch(96.7% .003 264.542);
--color-red-500: oklch(63.7% .237 25.331);
--text-6xl: 3.75rem;
--text-xs--line-height: calc(1 / .75);
--color-zinc-700: oklch(37% .013 285.805);
--color-indigo-600: oklch(51.1% .262 276.966);
--radius-2xl: 1rem;
--radius-md: .375rem;
--radius-lg: .5rem;
--text-xl: 1.25rem;
--surface-elevated: 0 0% 93%;
--surface-inverted-subtle: 0 0% 15%;
--color-gray-800: oklch(27.8% .033 256.848);
--accent: oklch(97% 0 0);
--radius-3xl: 1.5rem;
--surface-subtle: 0 0% 95%;
--font-pp-editorial: "__ppEditorial_a83cde","__ppEditorial_Fallback_a83cde";
--text-2xl--line-height: calc(2 / 1.5);
--secondary-foreground: oklch(20.5% 0 0);
--color-amber-500: oklch(76.9% .188 70.08);
--spacing: .25rem;
--background: oklch(100% 0 0);
--text-xl--line-height: calc(1.75 / 1.25);
--font-weight-semibold: 600;
--color-rose-500: oklch(64.5% .246 16.439);
--spacing-top-nav: 4rem;
--text-sm: .875rem;
--color-gray-700: oklch(37.3% .034 259.733);
--color-indigo-500: oklch(58.5% .233 277.117);
--color-gray-600: oklch(44.6% .03 256.802);
--font-graphik: "__graphik_7126cf","__graphik_Fallback_7126cf";
--text-4xl: 2.25rem;
--text-sm--line-height: calc(1.25 / .875);
--color-border: oklch(92.2% 0 0);
}Drop-in prompt
Build a landing page in the visual style of Lumalabs.
Reference design system (extracted from the live site):
- Palette: #225c78, #1f3f6b, #97c9e1, #8e7e76, #beb4ac
- Typefaces: __graphik_7126cf
- Macrostructure: Portfolio Grid
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/lumalabs-ai