{"id":"db451eca-8de6-43a9-a5d5-35271befdffd","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","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":"Amplemarket","summary":"Subtle dynamism on a crisp canvas","description":"Amplemarket presents a high-tech sales platform aesthetic using a predominantly neutral palette punctuated by dynamic, soft-edged gradients. The visual system balances strong, clean typography with subtle, layered surface treatments, and sparse, vibrant background accents that suggest energy and movement. Interactive elements are clearly defined, often contrasting crisp type against dark fills or light backgrounds. The overall impression is one of restrained power and sophisticated utility.","industry":"ai","colorScheme":"light","colors":[{"name":"Midnight Ink","hex":"#111111","role":"Primary text, icon fills, dominant backgrounds on dark sections, heavy borders","group":"neutral"},{"name":"Canvas White","hex":"#ffffff","role":"Primary page background, light surface backgrounds, text on dark sections, subtle borders","group":"neutral"},{"name":"Surface Charcoal","hex":"#272625","role":"Elevated card backgrounds, input backgrounds","group":"neutral"},{"name":"Muted Ash","hex":"#6d6c6b","role":"Secondary text, subtle borders, inactive states","group":"neutral"},{"name":"Whisper Gray","hex":"#f4f3ef","role":"Subtle background panels, light hover states","group":"neutral"},{"name":"Light Taupe","hex":"#ecebea","role":"Ghost button backgrounds, subtle surface variations","group":"neutral"},{"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%)"},{"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%)"},{"name":"Deep Indigo","hex":"#10054d","role":"Distinct element coloring, primary button text on light backgrounds","group":"brand"},{"name":"Petal Pink","hex":"#ffd7f0","role":"Soft accent cards, decorative background elements","group":"accent"},{"name":"Mint Green","hex":"#b7efb2","role":"Soft accent cards, decorative background elements","group":"accent"},{"name":"Canary Yellow","hex":"#ffef99","role":"Soft accent cards, decorative background elements","group":"accent"},{"name":"Subtle Lavender","hex":"#e2ddfd","role":"Soft accent cards, decorative background elements","group":"accent"},{"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"},{"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"},{"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"},{"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"},{"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"}],"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\""}],"typeScale":[{"role":"caption","size":10,"lineHeight":1,"letterSpacing":0.3},{"role":"body","size":14,"lineHeight":1.3,"letterSpacing":0.25},{"role":"subheading","size":20,"lineHeight":1.1,"letterSpacing":-0.2},{"role":"heading-sm","size":24,"lineHeight":1.1,"letterSpacing":-0.26},{"role":"heading","size":28,"lineHeight":1.1,"letterSpacing":-0.48},{"role":"heading-lg","size":44,"lineHeight":1.1,"letterSpacing":-1.32},{"role":"display","size":56,"lineHeight":1,"letterSpacing":-2.24}],"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."]},"components":[{"name":"Primary Filled Button - Dark","role":"Call to action button for primary actions."},{"name":"Default Button - Light","role":"Secondary action button, standard interactive element."},{"name":"Ghost Button","role":"Tertiary actions, navigation items, or subtle interactive elements."},{"name":"Card - Elevated Light","role":"Container for featured content, testimonials, or key information."},{"name":"Card - Client Logo","role":"Container for client logos with light background."},{"name":"Card - Accent Colored","role":"Decorative cards using brand or accent colors."},{"name":"Input Field - Light","role":"Standard user input field on light backgrounds."},{"name":"Input Field - Dark","role":"Standard user input field on dark backgrounds."},{"name":"Navigation Link","role":"Primary navigation items in the header."},{"name":"Info Badge - Inline","role":"Small, informative labels appearing within content."}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- text: #111111\n- background: #ffffff\n- border: #11111114 (Midnight Ink at 8% opacity)\n- accent: #e8400d\n- primary action: no distinct CTA color\n\n### 3-5 Example Component Prompts\nNo distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color.\n2. Design a 3-column client logo grid. Each cell is a Card - Client Logo (#f4f3ef background, 12px radius, 20px internal padding), containing a client logo image and Muted Ash (#6d6c6b) text 'Migrated off Apollo'. The grid should have 24px column and row gaps."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777508471223-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777508471223-thumb.jpg"},"similarStyleIds":["a6950b49-8ce4-4330-9499-26ca08061599","9130ad37-bf80-458f-b808-ac0ef6a8d1e9","ad529e8a-3427-4152-bed9-6ec5097f25b6","34baa524-5d5b-4165-bbab-d01f05e6d6b9","461da0f0-fde6-46bc-8137-7eca006260a8","186775da-7568-49e5-8110-4fd0bbc7bbe3","7b083729-e694-4b66-82a3-befb08451722","9342e89b-c2fe-4acf-9993-53b44e0c13b5","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","3e5c272b-8d68-40d8-9726-b4d6914b4b16","9fecf7d6-b717-49ca-8edc-b10d6110b21c","15f0809b-b7e0-4824-844f-286c39f4accf","1ae4bcfe-c613-42fc-aab7-f9583381e7cc","3963a727-8dec-4308-80c0-3ae198d15b87","47c9e353-bed3-4d6c-8316-63a2db5cc377","f93ac72e-73b2-4b2c-80eb-351ddfa56f4d","ba07accb-b2cc-4ad9-a25f-c50b0f90f34e","2eab438d-32cd-40c2-b160-1e4127dac569","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2"],"exports":{"designMdUrl":"/references/refero/db451eca-8de6-43a9-a5d5-35271befdffd/design.md","tokensJsonUrl":"/references/refero/db451eca-8de6-43a9-a5d5-35271befdffd/tokens.json","tailwindV4Url":"/references/refero/db451eca-8de6-43a9-a5d5-35271befdffd/tailwind-v4.css","cssVariablesUrl":"/references/refero/db451eca-8de6-43a9-a5d5-35271befdffd/tailwind-v4.css"}}