Framer

Framer

Preview image. Unlock full-res

Inky command center

Industrydesign
Palette
#000000
#080808
#ffffff
#999999
#cccccc
#666666
#171717
#0099ff
#0055ff
#05ff9f
#fd5d5c
#fac80a

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. 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. 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.

More like this