{"id":"d417b42f-824d-45ba-a02e-cbef3b8ea0d8","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","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Framer","summary":"Inky command center","description":"Framer's design pulsates like a high-contrast digital canvas, where every element is deliberately placed against a deep, inky black. The interplay of brilliant white typography and electric blue accents (#0099ff) against the #000000 background creates an immediate sense of clarity and impact, reminiscent of a command-line interface or a designer's dark-mode workspace. Generously rounded elements, especially 100px pill buttons, introduce soft dynamism into an otherwise sharp, modern aesthetic, making complex tools feel approachable. Subtle layers of near-black surfaces (#080808) provide depth without relying on heavy shadows, maintaining a lightweight, performant feel.","industry":"design","colorScheme":"dark","colors":[{"name":"Absolute Zero","hex":"#000000","role":"Page background, primary surface, deep canvas. Provides stark contrast for all content.","group":"neutral"},{"name":"Charcoal Canvas","hex":"#080808","role":"Secondary surface, subtle elevated panels, card backgrounds. Creates depth against Absolute Zero.","group":"neutral"},{"name":"Vapor White","hex":"#ffffff","role":"Primary text, heading text, button text, foreground elements. High contrast for readability on dark backgrounds.","group":"neutral"},{"name":"Ash Gray","hex":"#999999","role":"Muted text, secondary labels, disabled states. Provides subtler information.","group":"neutral"},{"name":"Silver Mist","hex":"#cccccc","role":"Sub-secondary text, dividing lines. Softer than Ash Gray for less prominent elements.","group":"neutral"},{"name":"Slate Dust","hex":"#666666","role":"Tertiary text, less important information, placeholder text.","group":"neutral"},{"name":"Deep Space","hex":"#171717","role":"Tertiary surface layer, slightly darker elevated elements.","group":"neutral"},{"name":"Electric Blue","hex":"#0099ff","role":"Interactive elements, links, active states, indicators, primary accent. Draws attention and signifies action.","group":"brand"},{"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"},{"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%)"},{"name":"Tangerine","hex":"#fd5d5c","role":"Highlight for specific cards or callouts, purely decorative.","group":"accent"},{"name":"Goldenrod","hex":"#fac80a","role":"Highlight for specific cards or callouts, purely decorative.","group":"accent"},{"name":"Emerald","hex":"#33c659","role":"Highlight for specific cards or callouts, purely decorative.","group":"accent"},{"name":"Amethyst","hex":"#9869fd","role":"Highlight for specific cards or callouts, purely decorative.","group":"accent"}],"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\""}],"typeScale":[{"role":"body","size":14,"lineHeight":1.3},{"role":"body-lg","size":18,"lineHeight":1.4,"letterSpacing":-0.02},{"role":"subheading","size":24,"lineHeight":1.07,"letterSpacing":-0.02},{"role":"heading-sm","size":32,"lineHeight":1},{"role":"heading","size":62,"lineHeight":1,"letterSpacing":-0.031},{"role":"heading-lg","size":85,"lineHeight":0.95,"letterSpacing":-0.05},{"role":"display","size":110,"lineHeight":0.85,"letterSpacing":-0.05}],"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."]},"components":[{"name":"CTA Button Group","role":""},{"name":"Testimonial Card","role":""},{"name":"Trusted By — Logo Bar","role":""},{"name":"Primary Hero Button","role":"Call to action"},{"name":"Secondary Ghost Button","role":"Secondary call to action"},{"name":"Solid Primary Button","role":"High-emphasis call to action"},{"name":"Icon-only Button","role":"Action without text label"},{"name":"Navigation Link","role":"Top navigation item"},{"name":"Case Study Card","role":"Showcase customer work"},{"name":"Small Feature Card","role":"Highlight key features"},{"name":"Text Input / Field","role":"User data entry"}],"customSections":[{"title":"Agent Prompt Guide","content":"4. **Create a Testimonial Section:** Set background to Absolute Zero (#000000). Use a `heading-sm` sized GT Walsheim Medium (32px, #ffffff, lineHeight 1) for the main quote. Underneath, add two lines of `body` text (Inter, 14px, #a6a6a6) for the author's name and title. The testimonial card itself could use Charcoal Canvas (#080808) with 8px radius."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776081981265-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776081981265-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/d417b42f-824d-45ba-a02e-cbef3b8ea0d8-1777555555669-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/d417b42f-824d-45ba-a02e-cbef3b8ea0d8-1777555555669-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/d417b42f-824d-45ba-a02e-cbef3b8ea0d8-1777555555669-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/d417b42f-824d-45ba-a02e-cbef3b8ea0d8-1777555555669-preview-detail-poster.jpg"},"similarStyleIds":["fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","30c3aa18-4323-4448-8ddd-3ca933fe5780","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","8f42603d-7ff9-446e-99a3-6bdd1f388ae5","c3ceca5c-d329-4559-b947-016172941ba2","408a149c-702f-4442-99df-bea49d9c0d9b","733e6475-892a-4138-8835-bf40344df317","c14bfde7-6f08-4b54-bd9b-39989d10cfef","c81d2be0-05b7-4755-8046-f2d19fbc448c","bf5616e4-7bd1-40ce-8b2d-aae84c2e4ebd","3389358b-68b2-4fca-82a8-52c07b3a3475","8eb9c53e-d69c-497a-b640-610856cf3a60","4d4772a3-e1da-415f-a6d7-658dcefdcecd","50833119-cb36-4b75-b0cc-be48afea050a","3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8","ef7c4bc2-f75d-4198-8be3-52af5be494ac","b8a8976c-52d9-4ebb-95ea-4c40f4a9acab","60b529c2-c0f7-49be-9a77-8d3762838f05","9342e89b-c2fe-4acf-9993-53b44e0c13b5","2bf4c61f-de10-4614-ba1b-20c0453bd2a9"],"exports":{"designMdUrl":"/references/refero/d417b42f-824d-45ba-a02e-cbef3b8ea0d8/design.md","tokensJsonUrl":"/references/refero/d417b42f-824d-45ba-a02e-cbef3b8ea0d8/tokens.json","tailwindV4Url":"/references/refero/d417b42f-824d-45ba-a02e-cbef3b8ea0d8/tailwind-v4.css","cssVariablesUrl":"/references/refero/d417b42f-824d-45ba-a02e-cbef3b8ea0d8/tailwind-v4.css"}}