Framer
Portfolio Grid
Loading
Config Figma
Electric teal and stark white, geometric precision floating in a spacious, digital void.
Click any value to copy. Roles are suggestions, not gospel.
- #05b2f9oklch(72.3% 0.155 236)Dominant
- #086c96oklch(50.2% 0.104 235)Surface
- #f4fc74oklch(95.9% 0.159 112)Ink
- #9b9c48oklch(67.4% 0.107 110)Accent
- #badac9oklch(86.0% 0.041 162)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | figmaSans | 16px | 400 | 0.95 | -1.68px | Aa Bb Cc |
| h2 | figmaSans | 20px | 400 | 1.25 | -0.4px | Aa Bb Cc |
| h3 | figmaSans | 20px | 400 | 1.25 | -0.4px | Aa Bb Cc |
| body | figmaSans | 16px | 400 | 1.3 | 0 | Aa Bb Cc |
| button | figmaSans | 16px | 400 | 1.3 | -0.32px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #05b2f9;
--color-surface: #086c96;
--color-ink: #f4fc74;
--color-accent: #9b9c48;
--color-detail: #badac9;
}
/* CSS variables exposed by source */
:root {
--toastify-toast-bottom: max(16px, 0px);
--toastify-icon-color-success: #24CB71;
--toastify-color-progress-dark: linear-gradiet(to right, #24CB71, #E4FF97, #00B6FF, #4D49FC, #CB9FD2, #FF3737);
--vh: 1vh;
--toastify-color-warning: #FAFD5D;
--toastify-toast-bd-radius: 0;
--toastify-spinner-color: #616161;
--toastify-color-progress-warning: #FAFD5D;
--toastify-color-light: #FFFFFF;
--toastify-toast-width: 31.25rem;
--toastify-text-color-success: #000000;
--toastify-toast-offset: 16px;
--toastify-color-progress-bgo: .2;
--toastify-z-index: 35;
--toastify-text-color-error: #000000;
--toastify-color-info: #E2E2E2;
--toastify-color-success: #24CB71;
--toastify-text-color-dark: #E2E2E2;
--toastify-toast-top: 1.5rem;
--toastify-color-progress-light: linear-gradient(to right, #E4FF97, #24CB71, #4D49FC, #00B6FF, #CB9FD2, #FF3737);
--toastify-color-error: #FAFD5D;
--max-content-width: 1680px;
--columns: 48;
--toastify-text-color-warning: #000000;
--toastify-toast-background: #fff;
--toastify-toast-left: max(16px, 0px);
--toastify-toast-padding: 0.75rem;
--col-width: calc(min(100vw, 1680px) / 48);
--lego-block-padding: 10rem;
--toastify-icon-color-error: #FAFD5D;
--toastify-toast-max-height: 800px;
--toastify-color-transparent: rgba(255, 255, 255, .7);
--toastify-toast-right: calc(min(100vw, 1680px) / 48);
--toastify-icon-color-info: #E2E2E2;
--toastify-color-progress-error: #FAFD5D;
--toastify-font-family: sans-serif;
--toastify-text-color-light: #000000;
--toastify-toast-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
--toastify-text-color-info: #000000;
--toastify-icon-color-warning: #FAFD5D;
--toastify-color-progress-info: #E2E2E2;
--toastify-spinner-color-empty-area: #e0e0e0;
--toastify-color-dark: #000000;
--toastify-color-progress-success: #24CB71;
--gutter: calc(min(100vw, 1680px) / 48);
--toastify-container-width: fit-content;
}Drop-in prompt
Build a landing page in the visual style of Config Figma.
Reference design system (extracted from the live site):
- Palette: #05b2f9, #086c96, #f4fc74, #9b9c48, #badac9
- Typefaces: figmaSans
- 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/config-figma-com
