Artek Fi
Portfolio Grid
Loading
Fermliving
Warm, muted earth tones and elegant sans-serif type create a serene, softly lit, minimalist space.
Click any value to copy. Roles are suggestions, not gospel.
- #cd7f31oklch(66.6% 0.132 62)Dominant
- #543414oklch(35.7% 0.065 63)Surface
- #e5bc93oklch(82.1% 0.072 67)Ink
- #a4745coklch(60.2% 0.070 48)Accent
- #daccb8oklch(85.1% 0.031 77)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | canela | 32px | 500 | 1.25 | 0 | Aa Bb Cc |
| h3 | canela | 18px | 500 | 1 | 0 | Aa Bb Cc |
| body | teka | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | teka | 14px | 400 | 1.15 | 0 | Aa Bb Cc |
| button | teka | 14px | 400 | 1.15 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #cd7f31;
--color-surface: #543414;
--color-ink: #e5bc93;
--color-accent: #a4745c;
--color-detail: #daccb8;
}
/* CSS variables exposed by source */
:root {
--color-dark-beige: #785c52;
--color-cashmere: #b7a990;
--color-oyster-grey: #e3dad1;
--color-price: #545454;
--color-label-new: #f8f8f8;
--color-black-05: rgba(56,56,56,.05);
--color-orange: #ca8a55;
--color-form-border: #979797;
--color-burned-yellow: #b08651;
--color-label: #666;
--color-coffee: #655248;
--color-cream: #fffefa;
--color-red: red;
--color-black: #383838;
--color-green: #587664;
--color-canvas: #f7f5ef;
--color-light-beige: #dcd3cb;
--color-canvas-25: hsla(45,33%,95%,.25);
--color-canvas-15: hsla(45,33%,95%,.15);
--color-warm-grey: #a79e92;
--color-cognac: #61451d;
--color-parchment: #ded1bc;
--tw-ring-offset-shadow: 0 0 transparent;
--swym-remind-cta-text-color: white;
--tw-ring-shadow: 0 0 transparent;
--swym-remind-cta-text-color-v2: white;
--gutter-md: 24px;
--swym-remind-cta-bg-color: #00a65a;
--bookeasy-font-size: 16px;
--bookeasy-selected-font-color: white;
--emaerket-side-anchor: 530px;
--gutter-sm: 16px;
--bookeasy-border-radius: 12px;
--tw-border-spacing-x: 0;
--ring-color: transparent;
--bookeasy-calendar-border-radius: 8px;
--emaerket-side-half-height: 55px;
--min-size: 12;
--site-max-width: 1920px;
--tw-scale-y: 1;
--section-spacing-sm: 40px;
--bookeasy-sidebar-menu-background-color: rosybrown;
--ring-offset-width: 0px;
--swym-recently-viewed-pointer-pos: 92%;
--emaerket-mobile-edge: -5px;
--ring-offset-color: transparent;
--bookeasy-widget-subtitle-color: #a3a3a3;
--section-spacing-md: 60px;
--viewport-min: 320;
--tw-ring-color: rgba(59,130,246,.5);
--tw-translate-y: 0;
--bookeasy-widget-title-color: black;
--bookeasy-widget-bg-color: white;
--tw-rotate: 0;
--bookeasy-time-slot-border-radius: 12px;
--tw-ring-offset-color: #fff;
--bookeasy-text-color: black;
--bookeasy-back-button-font-color: black;
--max-size: 18;
--swym-subscribe-success-text-color: #202223;
}Drop-in prompt
Build a landing page in the visual style of Fermliving.
Reference design system (extracted from the live site):
- Palette: #cd7f31, #543414, #e5bc93, #a4745c, #daccb8
- Typefaces: canela, teka
- 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/fermliving-com--products-showroom-visit
