Artek Fi
Portfolio Grid
Clean, cool geometry — muted teal and slate, precise sans-serif, expansive digital stillness.




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 | figmaSans | 56px | 400 | 1 | -1.25px | Aa Bb Cc |
| h2 | figmaMono | 14px | 400 | 1.3 | 0.5px | Aa Bb Cc |
| h3 | figmaSans | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| body | figmaSans | 16px | 400 | 1.45 | 0 | Aa Bb Cc |
| button | figmaSans | 16px | 400 | 1.45 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #24cb73;
--color-surface: #13703f;
--color-ink: #f6f85e;
--color-accent: #83917d;
--color-detail: #cac69e;
}
/* CSS variables exposed by source */
:root {
--font-figma-sans: "figmaSans","figmaSans Fallback",SF Pro Display,system-ui,helvetica,sans-serif;
--font-figma-mono: "figmaMono","figmaMono Fallback",SF Mono,menlo,monospace;
--fig-typography-lh-tight: 1.1;
--fig-theme-btn-primary-bg: #000000;
--fig-typography-size-formLabel: 0.75rem;
--fig-elevation-1-shadow: 0 0.25rem 2rem color-mix(in oklch, #000000, transparent 90%);
--fig-typography-ls-slight: 0rem;
--fig-theme-fg: #000000;
--fig-typography-variation-wdth-condensed: 96;
--fig-grid-max-content-width: 95rem;
--f-lego-block-padding: 7.5rem;
--fig-section-block-padding: 5rem;
--fig-space-8: 0.5rem;
--fig-theme-form-input-bg: color-mix(in oklch, #000000, transparent 92%);
--global-font-mono: "figmaMono","figmaMono Fallback",SF Mono,menlo,monospace;
--fig-typography-size-title1: 3.5rem;
--fig-typography-size-button: 1rem;
--fig-theme-form-placeholder: color-mix(in oklch, #000000, transparent 46%);
--fig-theme-card-bg: color-mix(in oklch, #000000, transparent 96%);
--fig-elevation-2: 0 1.5rem 4.375rem 0 color-mix(in oklch, #000000, transparent 90%);
--fig-space-12: 0.75rem;
--fig-radius-full: 9999px;
--fig-typography-size-caption: 0.875rem;
--fig-elevation-2-shadow: 0 1.5rem 4.375rem color-mix(in oklch, #000000, transparent 90%);
--fig-typography-lh-loose: 1.45;
--fig-theme-border-hover: color-mix(in oklch, #000000, transparent 60%);
--fig-theme-btn-transparent-bg-hover: color-mix(in oklch, #000000, transparent 92%);
--fig-typography-size-display1: 5.5rem;
--f-col-width: calc(min(100vw, 1440px) / 48);
--fig-theme-border: color-mix(in oklch, #000000, transparent 84%);
--fig-typography-ls-wide: 0.03125rem;
--fig-radius-24: 1.5rem;
--fig-typography-lh-none: 1;
--fig-typography-ls-standard: -0.04125rem;
--global-statsig-overlay: #FFFFFF;
--fig-space-120: 7.5rem;
--global-font-sans: "figmaSans","figmaSans Fallback",SF Pro Display,system-ui,helvetica,sans-serif;
--fig-typography-weight: normal;
--fig-typography-variation-wght-bolder: 700;
--fig-radius-28: 1.75rem;
--fig-grid-gutter: 1rem;
--fig-typography-size-bodyXL: 1.5rem;
--fig-grid-col-width: calc((min(100vw - (2.5rem * 2) - 0rem, 95rem) - (1rem * (12 - 1))) / 12);
--fig-typography-lh-relaxed: 1.4;
--fig-theme-btn-ghost-bg-hover: color-mix(in oklch, #000000, transparent 96%);
--fig-typography-ls-tight: -0.078125rem;
--fig-radius-8: 0.5rem;
--fig-theme-form-error-fg: #FFFFFF;
--fig-radius-2: 0.125rem;
--fig-theme-form-error-bg: #972121;
--fig-elevation-1: 0 0.25rem 2rem 0 color-mix(in oklch, #000000, transparent 90%);
--f-gutter: calc(calc(min(100vw, 1440px) / 48) * 2);
--fig-typography-variation-wdth-normal: 100;
--fig-space-16: 1rem;
--global-scrollbar-width: 0rem;
--fig-grid-columns: 12;
--fig-typography-variation-slnt-italic: -6;
--fig-typography-size-bodyL: 1rem;
--fig-theme-badge-bg: color-mix(in oklch, #000000, transparent 92%);
--fig-typography-variation-wdth-narrow: 98;
}Drop-in prompt
Build a landing page in the visual style of Figma.
Reference design system (extracted from the live site):
- Palette: #24cb73, #13703f, #f6f85e, #83917d, #cac69e
- Typefaces: figmaSans, figmaMono
- 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/figma-com