{"id":"8f42603d-7ff9-446e-99a3-6bdd1f388ae5","name":"Frontify","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/8f42603d-7ff9-446e-99a3-6bdd1f388ae5","originalSiteUrl":"https://www.frontify.com/en","capturedAt":"2026-04-30T00:11:40.579Z","colors":[{"name":"Inkwell Black","hex":"#111110","role":"Primary text, button backgrounds, strong borders, dark surface elements, primary action, footer background","group":"neutral","cssVariable":"--color-inkwell-black"},{"name":"Paper White","hex":"#f0f0eb","role":"Main page background, secondary text, subtle borders, UI element backgrounds","group":"neutral","cssVariable":"--color-paper-white"},{"name":"True White","hex":"#ffffff","role":"Button text on dark backgrounds, selected interactive states, icon fills","group":"neutral","cssVariable":"--color-true-white"},{"name":"Canvas Muted","hex":"#e1e1db","role":"Card backgrounds, subtle surface elevations, tertiary backgrounds","group":"neutral","cssVariable":"--color-canvas-muted"},{"name":"Stone Whisper","hex":"#d7d7cf","role":"Section backgrounds, subtle graphical elements, body backgrounds","group":"neutral","cssVariable":"--color-stone-whisper"},{"name":"Deep Pewter","hex":"#464643","role":"Muted body text, secondary borders","group":"neutral","cssVariable":"--color-deep-pewter"},{"name":"Charcoal Grey","hex":"#000000","role":"Input borders, decorative fills, some icon fills","group":"neutral","cssVariable":"--color-charcoal-grey"},{"name":"Pale Granite","hex":"#cbcbc5","role":"Subtle border strokes","group":"neutral","cssVariable":"--color-pale-granite"},{"name":"Dusty Sage","hex":"#bfbfb8","role":"Placeholder text, secondary icon colors, subtle lines","group":"neutral","cssVariable":"--color-dusty-sage"},{"name":"Slate Echo","hex":"#575753","role":"Card text, muted link hover states","group":"neutral","cssVariable":"--color-slate-echo"},{"name":"Forest Tint","hex":"#042a2b","role":"Decorative background fills on cards, certain icon elements, dark text elements","group":"brand","cssVariable":"--color-forest-tint"},{"name":"Flame Orange","hex":"#ff3b00","role":"Accent for highlighted text categories, decorative icon fills, active border states","group":"accent","cssVariable":"--color-flame-orange"},{"name":"Violet Streak","hex":"#b60ae3","role":"Decorative accent for internal elements, button border hover state; Decorative gradient for overlays or highlighted zones, providing a soft, shifting visual anchor","group":"accent","gradient":"linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 10%, rgb(182, 10, 227) 50%, rgba(255, 255, 255, 0.1) 90%, rgba(255, 255, 255, 0) 100%)","cssVariable":"--color-violet-streak"}],"typography":[{"role":"General body text, navigation elements, buttons, input fields, and all other functional UI text. Its compact shape ensures efficiency while maintaining legibility.","sizes":"14px, 18px","family":"ABC Diatype","weight":"400, 500","lineHeight":"1.00, 1.30, 1.35, 1.50","substitute":"Inter","letterSpacing":"0.0100em"},{"role":"Headlines and prominent display text that convey a sense of elegance and sophistication. The lighter weights at large sizes create impact through restraint rather than volume. Its slightly wider tracking at smaller sizes improves legibility, while negative tracking at large sizes compacts headlines.","sizes":"16px, 18px, 20px, 24px, 28px, 32px, 40px, 61px, 80px, 96px","family":"Cranny","weight":"300, 400","lineHeight":"0.91, 1.00, 1.10, 1.30, 1.50","substitute":"Playfair Display","letterSpacing":"-0.0070em (at larger sizes), 0.0080em, 0.0100em"},{"role":"Monospaced text, code snippets, and small utility text for technical precision and content differentiation.","sizes":"14px","family":"Satoshi","weight":"400","lineHeight":"1.30","substitute":"Inter","letterSpacing":"0.0100em"},{"role":"Used for specific emphasis in body copy or for short, impactful statements. Its heavier weight provides a robust counterpoint to the delicacy of Cranny and the functional clarity of ABC Diatype.","sizes":"16px, 40px","family":"Cabinetgrotesk","weight":"500, 700","lineHeight":"1.00, 1.20","substitute":"Archivo","letterSpacing":"0.0100em"}],"spacing":{"radius":{"cards":"8px","images":"18px","inputs":"0px","buttons":"24px","navItems":"32px","smallComponents":"4px"},"elementGap":"8px","sectionGap":"48px","cardPadding":"32px"},"radius":{"cards":"8px","images":"18px","inputs":"0px","buttons":"24px","navItems":"32px","smallComponents":"4px"},"shadows":{"surfaces":[{"hex":"#f0f0eb","name":"Paper White","level":0,"purpose":"Primary page background, expansive content areas"},{"hex":"#e1e1db","name":"Canvas Muted","level":1,"purpose":"Card backgrounds, secondary container surfaces"},{"hex":"#d7d7cf","name":"Stone Whisper","level":2,"purpose":"Section dividers, underlying contextual elements"}]},"guidelines":{"do":["Always use Paper White (#f0f0eb) as the default page canvas, creating a consistent light background.","Apply ABC Diatype for all body text and UI labels, ensuring clarity and efficiency with its 0.0100em letter spacing.","Reserve Cranny font for headlines and display text, leveraging its elegant weight 300 or 400 with size-dependent letter spacing for sophisticated visual hierarchy.","Button corners should consistently have a 24px border-radius for primary and outlined buttons, and 40px for larger tertiary buttons, maintaining a soft, approachable feel.","Utilize Inkwell Black (#111110) for primary button backgrounds and primary text, creating high contrast and clear calls to action.","Implement a default element gap of 8px for vertical and horizontal spacing between small UI elements, establishing a comfortable density.","Card backgrounds should default to Canvas Muted (#e1e1db) with an 8px border-radius, providing subtle visual separation without heavy borders or shadows."],"dont":["Avoid using multiple chromatic colors for interactive elements; stick to Flame Orange (#ff3b00) or Violet Streak (#b60ae3) for accents, never for full button fills.","Do not use heavy shadows or multi-layered elevation; surfaces are defined by subtle background changes and light borders, not Z-axis depth.","Do not use default system fonts; ABC Diatype, Cranny, Satoshi, and Cabinetgrotesk are the only approved typefaces.","Avoid arbitrary letter spacing; use the defined -0.007em (for large Cranny) or 0.010em (for ABC Diatype) for precise type rendering.","Do not introduce new border-radius values; adhere strictly to 4px, 8px, 18px, 24px, 32px, and 40px for components as specified.","Never use less than 48px vertical spacing between major page sections to maintain a spacious and breathable layout.","Do not introduce new accent gradients. The 'Gradient Aura' provides a controlled, decorative element that should not be replicated or modified."]}}