{"id":"d417b42f-824d-45ba-a02e-cbef3b8ea0d8","name":"Framer","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/d417b42f-824d-45ba-a02e-cbef3b8ea0d8","originalSiteUrl":"https://framer.com","capturedAt":"2026-04-13T12:06:51.325Z","colors":[{"name":"Absolute Zero","hex":"#000000","role":"Page background, primary surface, deep canvas. Provides stark contrast for all content.","group":"neutral","cssVariable":"--color-absolute-zero"},{"name":"Charcoal Canvas","hex":"#080808","role":"Secondary surface, subtle elevated panels, card backgrounds. Creates depth against Absolute Zero.","group":"neutral","cssVariable":"--color-charcoal-canvas"},{"name":"Vapor White","hex":"#ffffff","role":"Primary text, heading text, button text, foreground elements. High contrast for readability on dark backgrounds.","group":"neutral","cssVariable":"--color-vapor-white"},{"name":"Ash Gray","hex":"#999999","role":"Muted text, secondary labels, disabled states. Provides subtler information.","group":"neutral","cssVariable":"--color-ash-gray"},{"name":"Silver Mist","hex":"#cccccc","role":"Sub-secondary text, dividing lines. Softer than Ash Gray for less prominent elements.","group":"neutral","cssVariable":"--color-silver-mist"},{"name":"Slate Dust","hex":"#666666","role":"Tertiary text, less important information, placeholder text.","group":"neutral","cssVariable":"--color-slate-dust"},{"name":"Deep Space","hex":"#171717","role":"Tertiary surface layer, slightly darker elevated elements.","group":"neutral","cssVariable":"--color-deep-space"},{"name":"Electric Blue","hex":"#0099ff","role":"Interactive elements, links, active states, indicators, primary accent. Draws attention and signifies action.","group":"brand","cssVariable":"--color-electric-blue"},{"name":"Sky Indigo","hex":"#0055ff","role":"Secondary accent for graphical elements, subtle interactive states where Electric Blue might be too strong for background.","group":"accent","cssVariable":"--color-sky-indigo"},{"name":"Cyan Fade","hex":"#05ff9f","role":"Subtle top-to-bottom gradient for background elements, adding a hint of color variation.","group":"accent","gradient":"linear-gradient(rgba(5, 255, 159, 0) 0%, rgba(0, 0, 0, 0.06) 100%)","cssVariable":"--color-cyan-fade"},{"name":"Tangerine","hex":"#fd5d5c","role":"Highlight for specific cards or callouts, purely decorative.","group":"accent","cssVariable":"--color-tangerine"},{"name":"Goldenrod","hex":"#fac80a","role":"Highlight for specific cards or callouts, purely decorative.","group":"accent","cssVariable":"--color-goldenrod"},{"name":"Emerald","hex":"#33c659","role":"Highlight for specific cards or callouts, purely decorative.","group":"accent","cssVariable":"--color-emerald"},{"name":"Amethyst","hex":"#9869fd","role":"Highlight for specific cards or callouts, purely decorative.","group":"accent","cssVariable":"--color-amethyst"}],"typography":[{"role":"Display headline. Extremely large, tight kerning for maximum impact.","sizes":"110px","family":"GT Walsheim Framer Medium","weight":"500","lineHeight":"0.85","substitute":"Montserrat","letterSpacing":"-0.0500em"},{"role":"Primary headings (H1-H3). Characterized by compact line height and slight negative letter-spacing for a bold, condensed feel. Features stylistic alternates and tabular numbers.","sizes":"32px, 62px, 85px","family":"GT Walsheim Medium","weight":"500","lineHeight":"0.95, 1.00, 1.13","substitute":"Montserrat","letterSpacing":"-0.0500em at 85px, -0.0310em at 62px, normal at 32px","fontFeatureSettings":"\"ss02\", \"tnum\""},{"role":"Secondary headings (H4-H6). Offers a more neutral counterpart to GT Walsheim for less prominent titles.","sizes":"12px, 13px, 17px, 18px, 62px","family":"Mona Sans","weight":"500","lineHeight":"1.00, 1.20, 1.30, 1.70, 2.28","substitute":"Inter","letterSpacing":"-0.0500em at 62px, -0.0460em for 17px/18px, normal elsewhere"},{"role":"Body text, subheadings, labels. Highly versatile with broad stylistic controls, ensuring clarity across various information densities. Features a wide range of stylistic sets.","sizes":"8px, 12px, 13px, 14px, 15px, 18px, 24px","family":"Inter Variable","weight":"400","lineHeight":"0.80, 1.00, 1.07, 1.20, 1.30, 1.40","substitute":"Inter","letterSpacing":"-0.0200em at 18px and 24px, -0.0180em, -0.0100em, -0.0010em, 0.0300em for specific contexts","fontFeatureSettings":"\"cv06\", \"cv11\", \"dlig\", \"ss03\""},{"role":"Paragraphs, navigation, general UI text. Provides robust readability with specific handling for tabular numbers and stylistic alternates.","sizes":"10px, 12px, 13px, 14px, 15px, 16px, 20px, 22px","family":"Inter","weight":"400, 500, 600, 700","lineHeight":"0.83, 1.00, 1.10, 1.15, 1.20, 1.30, 1.40, 1.60","substitute":"Inter","letterSpacing":"-0.0530em to 0.0300em","fontFeatureSettings":"\"cv01\", \"cv05\", \"cv09\", \"cv11\", \"dlig\""},{"role":"Fine print, metadata. Distinctive small-caps style via stylistic sets.","sizes":"9px","family":"Open Runde","weight":"600","lineHeight":"1.11","substitute":"Varela Round","letterSpacing":"normal","fontFeatureSettings":"\"cv01\", \"cv09\""}],"spacing":{"radius":{"cards":"8px","images":"8px","inputs":"8px","modals":"12px","buttons":"100px"},"elementGap":"4px","sectionGap":"64px","cardPadding":"10px"},"radius":{"cards":"8px","images":"8px","inputs":"8px","modals":"12px","buttons":"100px"},"guidelines":{"do":["Use Absolute Zero (#000000) as the primary background for all page sections to enforce a consistent dark theme.","Apply Vapor White (#ffffff) for all main headings and body text on dark backgrounds to ensure maximum contrast and readability.","Reserve Electric Blue (#0099ff) exclusively for interactive elements like links, buttons, and active states to guide user attention.","Utilize 100px border radius for all primary calls-to-action to create distinct pill-shaped buttons.","Employ the GT Walsheim fonts (GT Walsheim Framer Medium, GT Walsheim Medium) for all major headlines to convey the brand's unique character.","Maintain a compact line height for all display and heading typography (e.g., 0.85 for 110px, 0.95 for 85px) to achieve a dense, type-driven aesthetic.","Layer surfaces using Absolute Zero (#000000) and Charcoal Canvas (#080808) to create depth without relying on prominent shadows."],"dont":["Avoid using light backgrounds for entire page sections; the theme is predominantly dark.","Do not use generic system fonts for prominent headings; GT Walsheim is critical for brand identity.","Do not introduce additional accent colors beyond Electric Blue (#0099ff) and the designated card highlights (Tangerine, Goldenrod, Emerald, Amethyst).","Avoid box shadows for general elevation; subtle background color shifts (e.g., #000000 to #080808) provide the primary sense of layering.","Do not use letter-spacing: normal for headlines; specific negative letter-spacing values (-0.0500em, -0.0310em) are integral to the typographic style.","Do not vary border radius for buttons; stick to 100px for pill shapes and 8px for cards/inputs.","Do not introduce complex gradients or textures on primary surfaces; the background should remain clean and near-monochromatic."]}}