{"id":"db451eca-8de6-43a9-a5d5-35271befdffd","name":"Amplemarket","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/db451eca-8de6-43a9-a5d5-35271befdffd","originalSiteUrl":"https://www.amplemarket.com","capturedAt":"2026-04-30T00:21:41.789Z","colors":[{"name":"Midnight Ink","hex":"#111111","role":"Primary text, icon fills, dominant backgrounds on dark sections, heavy borders","group":"neutral","cssVariable":"--color-midnight-ink"},{"name":"Canvas White","hex":"#ffffff","role":"Primary page background, light surface backgrounds, text on dark sections, subtle borders","group":"neutral","cssVariable":"--color-canvas-white"},{"name":"Surface Charcoal","hex":"#272625","role":"Elevated card backgrounds, input backgrounds","group":"neutral","cssVariable":"--color-surface-charcoal"},{"name":"Muted Ash","hex":"#6d6c6b","role":"Secondary text, subtle borders, inactive states","group":"neutral","cssVariable":"--color-muted-ash"},{"name":"Whisper Gray","hex":"#f4f3ef","role":"Subtle background panels, light hover states","group":"neutral","cssVariable":"--color-whisper-gray"},{"name":"Light Taupe","hex":"#ecebea","role":"Ghost button backgrounds, subtle surface variations","group":"neutral","cssVariable":"--color-light-taupe"},{"name":"Phoenix Orange","hex":"#e8400d","role":"Accent for dynamic backgrounds and gradients, pillar highlights; Decorative background graphic, giving sections a vibrant, flowing feel","group":"brand","gradient":"radial-gradient(386.06% 162.79% at -13.1926% -17.1008%, rgb(232, 64, 13) 0%, rgb(255, 238, 216) 26.1559%, rgb(208, 178, 255) 84.1533%)","cssVariable":"--color-phoenix-orange"},{"name":"Cyan Glow","hex":"#99fff9","role":"Accent for dynamic backgrounds and gradients, pillar highlights; Decorative background graphic, providing a cool counterpart to warmer gradient tones","group":"brand","gradient":"radial-gradient(80.17% 109.2% at 52.1169% 62.5363%, rgb(208, 178, 255) 0%, rgb(198, 236, 233) 35.282%, rgb(153, 255, 249) 96.5565%)","cssVariable":"--color-cyan-glow"},{"name":"Deep Indigo","hex":"#10054d","role":"Distinct element coloring, primary button text on light backgrounds","group":"brand","cssVariable":"--color-deep-indigo"},{"name":"Petal Pink","hex":"#ffd7f0","role":"Soft accent cards, decorative background elements","group":"accent","cssVariable":"--color-petal-pink"},{"name":"Mint Green","hex":"#b7efb2","role":"Soft accent cards, decorative background elements","group":"accent","cssVariable":"--color-mint-green"},{"name":"Canary Yellow","hex":"#ffef99","role":"Soft accent cards, decorative background elements","group":"accent","cssVariable":"--color-canary-yellow"},{"name":"Subtle Lavender","hex":"#e2ddfd","role":"Soft accent cards, decorative background elements","group":"accent","cssVariable":"--color-subtle-lavender"},{"name":"Midnight Violet","hex":"#2e2460","role":"Violet state accent for badges, validation surfaces, and short status labels. Do not promote it to the primary CTA color","group":"accent","cssVariable":"--color-midnight-violet"},{"name":"Engagement Gold","hex":"#fbc768","role":"Yellow wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color","group":"accent","cssVariable":"--color-engagement-gold"},{"name":"LeadGen Red","hex":"#e16540","role":"Orange wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color","group":"accent","cssVariable":"--color-leadgen-red"},{"name":"Intelligence Blue","hex":"#328efa","role":"Blue wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color","group":"accent","cssVariable":"--color-intelligence-blue"},{"name":"Deliver Green","hex":"#47d096","role":"Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color","group":"accent","cssVariable":"--color-deliver-green"}],"typography":[{"role":"Primary typeface for all text elements. The variable font allows for fine-tuned expression across headers and body copy, giving a consistent, modern, and precise feel. The distinct letter-spacing adjustments, particularly negative tracking for larger sizes, create a sharp, intentional rhythm for headlines.","sizes":"8px, 10px, 12px, 14px, 16px, 20px, 24px, 28px, 36px, 44px, 56px, 84px","family":"Labil Grotesk Variable","weight":"400, 500, 700, 900","weights":[400,500,700,900],"lineHeight":"0.80, 1.00, 1.10, 1.20, 1.30","substitute":"Inter","letterSpacing":"-0.0500em at 84px, -0.0400em at 56px, -0.0300em at 44px, -0.0200em at 36px, -0.0170em at 28px, -0.0110em at 24px, -0.0100em at 20px, normal at 16px, 0.0250em at 14px, 0.0300em at 12px","fontFeatureSettings":"\"ss02\", \"ss01\""}],"spacing":{"radius":{"cards":"12px","icons":"12px","badges":"12px","images":"12px","inputs":"12px","buttons":"8px"},"elementGap":"8px","sectionGap":"56px","cardPadding":"20px"},"radius":{"cards":"12px","icons":"12px","badges":"12px","images":"12px","inputs":"12px","buttons":"8px"},"shadows":{"surfaces":[{"hex":"#ffffff","name":"Canvas White","level":0,"purpose":"Primary page background layer, providing a clean neutral base."},{"hex":"#f4f3ef","name":"Whisper Gray","level":1,"purpose":"Slightly elevated background for content sections or client logo grids, adding subtle depth."},{"hex":"#272625","name":"Surface Charcoal","level":2,"purpose":"Background for secondary containers like input fields on dark themes, or informational badges, providing distinct contrast."}]},"guidelines":{"do":["Use Labil Grotesk Variable with specific letter-spacing adjustments: larger text sizes from 20px up should have negative tracking, while smaller body text (14px, 12px) uses positive tracking to maintain readability.","Prioritize Canvas White (#ffffff) for dominant page backgrounds and Midnight Ink (#111111) for primary text, creating high contrast.","Apply 12px border radius to most containers: cards, inputs, and selected interactive elements, with 8px reserved for primary buttons and nav items.","Intersperse sections with vibrant, soft-edged radial gradients (`Dynamic Energy Gradient 1` and `Dynamic Energy Gradient 2`) to introduce visual dynamism.","When creating cards for features or client logos, use Whisper Gray (#f4f3ef) backgrounds to subtly differentiate them from the main canvas.","Apply default elementGap of 8px for tight spacing between components, increasing to 20px for cardPadding and 56px for sectionGap to establish clear visual hierarchy.","Utilize the pillar highlight colors (Engagement Gold, LeadGen Red, Intelligence Blue, Deliver Green) for small, functional accents such as icons or tags related to their respective categories."],"dont":["Avoid using bright, saturated colors for large background areas unless they are part of a soft-edged gradient effect.","Do not use generic system fonts; always specify 'Labil Grotesk Variable' to maintain brand consistency.","Do not add heavy or opaque shadows; elevation should be subtle, employing diluted rgba(17, 17, 17, 0.02-0.05) values.","Do not vary border radius arbitrarily; stick to 12px for cards/inputs and 8px for buttons/nav to maintain a consistent visual language.","Do not use default browser blue for links; all links should use Midnight Ink text color or Canvas White on dark backgrounds, with explicit hover states.","Do not use outline buttons for primary calls to action; reserve solid fill buttons (Primary Filled Button - Dark) for clear actionable items.","Do not clutter layouts; maintain comfortable spacing with an 8px base unit and larger gaps for sections to provide breathing room."]}}