{"id":"9cc537fc-97d8-4632-8703-f9aa296c2206","name":"Eco","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/9cc537fc-97d8-4632-8703-f9aa296c2206","originalSiteUrl":"https://eco.com","capturedAt":"2026-04-11T16:17:41.349Z","colors":[{"name":"White Smoke","hex":"#ffffff","role":"Primary page background, text on dark backgrounds, active states.","group":"neutral","cssVariable":"--color-white-smoke"},{"name":"Off-White Mist","hex":"#efefef","role":"Secondary backgrounds, subtly lifted UI elements, button fills.","group":"neutral","cssVariable":"--color-off-white-mist"},{"name":"Midnight Ink","hex":"#0f111a","role":"Primary text on light backgrounds, dark mode backgrounds.","group":"neutral","cssVariable":"--color-midnight-ink"},{"name":"Dark Charcoal","hex":"#000000","role":"Deepest dark backgrounds, strong text contrast.","group":"neutral","cssVariable":"--color-dark-charcoal"},{"name":"Near Black","hex":"#141414","role":"Subtle background depth in dark sections.","group":"neutral","cssVariable":"--color-near-black"},{"name":"Light Steel","hex":"#aeaeae","role":"Subtle text emphasis, inactive states, borders in light themes.","group":"neutral","cssVariable":"--color-light-steel"},{"name":"Graphite Grey","hex":"#2a2a2a","role":"Button backgrounds, dark neutral elements.","group":"neutral","cssVariable":"--color-graphite-grey"},{"name":"Mid Grey","hex":"#222222","role":"Text on very light backgrounds, subtle borders.","group":"neutral","cssVariable":"--color-mid-grey"},{"name":"Pale Ash","hex":"#a0a0a0","role":"Muted headings, secondary text, placeholders.","group":"neutral","cssVariable":"--color-pale-ash"},{"name":"Skybound Gradient","hex":"#1c53bd","role":"Highlight elements, interactive indicators, brand-specific imagery – draws attention and signifies modernity.","group":"brand","gradient":"linear-gradient(90deg, rgb(28, 83, 189) 71%, rgb(83, 173, 254))","cssVariable":"--color-skybound-gradient"},{"name":"Cloud Grey","hex":"#a6b8d1","role":"Subtle interactive link color, non-critical emphasis – a soft, cool blue-gray that hints at interaction without aggressive saturation.","group":"accent","cssVariable":"--color-cloud-grey"}],"typography":[{"role":"Primary display and heading font, used for impactful statements. The tight letter-spacing at larger sizes gives it a contemporary and precise feel.","sizes":"14px, 16px, 24px, 40px, 84px, 90px, 96px","family":"Interdisplay","weight":"400","lineHeight":"0.90, 0.95, 1.06, 1.20, 1.43, 1.50","substitute":"Inter","letterSpacing":"-0.0400em, -0.0300em, -0.0200em, -0.0100em, 0.0180em"},{"role":"Secondary display and heading font, also used for navigation and important interactive elements. Its strong presence at larger scales complements Interdisplay.","sizes":"16px, 48px, 84px, 96px","family":"Roobert","weight":"400","lineHeight":"0.95, 1.06, 1.20, 1.33","substitute":"Montserrat","letterSpacing":"-0.0400em, -0.0300em, -0.0200em, -0.0100em"},{"role":"Standard body text and links. Slightly tighter letter-spacing ensures readability and a modern appearance.","sizes":"14px, 16px, 22px","family":"Inter","weight":"400","lineHeight":"1.00, 1.20, 1.50","substitute":"Inter","letterSpacing":"-0.0200em, -0.0100em"},{"role":"Used for code snippets, secondary labels, and data points, providing a technical contrast to the primary sans-serifs.","sizes":"14px, 16px","family":"Fragmentmono","weight":"400","lineHeight":"1.00, 1.50, 1.71","substitute":"Space Mono","letterSpacing":"-0.0100em"},{"role":"Specialized monospaced text, likely for unique technical labels or data. Its tight letter-spacing reinforces a precise data-driven feel.","sizes":"14px","family":"Aeonik Mono","weight":"400","lineHeight":"1.10","substitute":"IBM Plex Mono","letterSpacing":"-0.0400em"}],"spacing":{"radius":{"large":"128px","inputs":"8px","buttons":"8px","default":"8px"},"elementGap":"8px","sectionGap":"48px","cardPadding":"0px"},"radius":{"large":"128px","inputs":"8px","buttons":"8px","default":"8px"},"guidelines":{"do":["Do use `Roobert` with `96px` size and `-0.0400em` letter spacing for hero headlines to maintain visual impact and precision.","Do apply `8px` border-radius uniformly to all interactive elements like buttons and input fields.","Do leverage the `Skybound Gradient` (`linear-gradient(90deg, rgb(28, 83, 189) 71%, rgb(83, 173, 254))`) only for key calls-to-action or distinct visual indicators.","Do use `48px` as the standard `sectionGap` to ensure consistent vertical rhythm between major content blocks.","Do prioritize `Midnight Ink (#0f111a)` for text on light backgrounds and `White Smoke (#ffffff)` for text on dark backgrounds for accessibility and brand consistency.","Do use `Fragmentmono` for all technical code-like text or data displays, ensuring it is `14px` with a `1.00` line-height.","Do align major content centrally within `pageMaxWidth` when an explicit max-width is later established, or maintain a full-bleed layout as seen in initial hero sections."],"dont":["Don't use `Skybound Gradient` merely for decorative purposes; reserve it for functional or brand-critical highlights.","Don't introduce additional border-radius values beyond `8px`, `12px`, and `128px` to preserve the established shape vocabulary.","Don't deviate from the specified tight letter-spacing for `Interdisplay` and `Roobert` at larger sizes; it is a signature trait.","Don't use highly saturated colors for backgrounds or large areas; maintain the largely achromatic base palette.","Don't apply `box-shadow` for elevation on cards or containers; the system relies on background color shifts for depth.","Don't use `Off-White Mist (#efefef)` for primary text, as it's intended for secondary backgrounds and subtle lifts, not high-contrast text.","Don't introduce new font families; the current selection (Interdisplay, Roobert, Inter, Fragmentmono, Aeonik Mono) is curated for purpose."]}}