{"id":"9cc537fc-97d8-4632-8703-f9aa296c2206","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","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":"Eco","summary":"Architectural tech blueprint. Polished surfaces and precise typography overlay an expansive, slightly muted cityscape.","description":"Eco presents a refined, almost architectural aesthetic that blends high-tech precision with a subtle, underlying warmth. The visual impression is one of confident authority, conveyed through a largely achromatic palette punctuated by a single, vibrant gradient. Large, impactful typography with precise letter-spacing anchors sections, while soft, rounded elements provide a counterpoint to the generally sharp interface, creating a balanced and approachable digital experience for complex financial technology.","tags":["gradient-accent","high-contrast","minimalist","typographic-heavy","dark-mode-sections","clean","professional","tech-focused","monochromatic-base","large-typography"],"industry":"fintech","colorScheme":"both","colors":[{"name":"White Smoke","hex":"#ffffff","role":"Primary page background, text on dark backgrounds, active states.","group":"neutral"},{"name":"Off-White Mist","hex":"#efefef","role":"Secondary backgrounds, subtly lifted UI elements, button fills.","group":"neutral"},{"name":"Midnight Ink","hex":"#0f111a","role":"Primary text on light backgrounds, dark mode backgrounds.","group":"neutral"},{"name":"Dark Charcoal","hex":"#000000","role":"Deepest dark backgrounds, strong text contrast.","group":"neutral"},{"name":"Near Black","hex":"#141414","role":"Subtle background depth in dark sections.","group":"neutral"},{"name":"Light Steel","hex":"#aeaeae","role":"Subtle text emphasis, inactive states, borders in light themes.","group":"neutral"},{"name":"Graphite Grey","hex":"#2a2a2a","role":"Button backgrounds, dark neutral elements.","group":"neutral"},{"name":"Mid Grey","hex":"#222222","role":"Text on very light backgrounds, subtle borders.","group":"neutral"},{"name":"Pale Ash","hex":"#a0a0a0","role":"Muted headings, secondary text, placeholders.","group":"neutral"},{"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))"},{"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"}],"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"}],"typeScale":[{"role":"caption","size":14,"lineHeight":1,"letterSpacing":-0.01},{"role":"body","size":16,"lineHeight":1.5},{"role":"subheading","size":22,"lineHeight":1.5,"letterSpacing":-0.01},{"role":"heading","size":24,"lineHeight":1.2,"letterSpacing":-0.02},{"role":"heading-lg","size":40,"lineHeight":1.2,"letterSpacing":-0.02},{"role":"display","size":96,"lineHeight":0.95,"letterSpacing":-0.04}],"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."]},"components":[{"name":"CTA Button Group","role":""},{"name":"Feature Stat Block","role":""},{"name":"Feature Cards Row","role":""},{"name":"Primary Filled Button","role":"Main call to action for interactive steps."},{"name":"Secondary Filled Button","role":"Alternative call to action, less prominent than primary."},{"name":"Text Link Button","role":"Minimalistic interactive elements, inline with text."},{"name":"Input Field","role":"Data entry fields across the application."},{"name":"Navigation Link","role":"Primary navigation items in headers and footers."},{"name":"Hero Headline","role":"Largest, most prominent text on key landing sections."},{"name":"Subheadline / Body Intro","role":"Supportive text for headlines or section introductions."}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text: `#0f111a` (Midnight Ink)\n- Background: `#ffffff` (White Smoke)\n- CTA: `#2a2a2a` (Graphite Grey)\n- Border: `rgba(0,0,0,0)` (Transparent)\n- Accent: `linear-gradient(90deg, rgb(28, 83, 189) 71%, rgb(83, 173, 254))` (Skybound Gradient)\n\n### 3-5 Example Component Prompts\n1. **Create a Primary Filled Button:** `background-color: #2a2a2a; color: #efefef; border-radius: 8px; padding: 8px 16px; font-family: Interdisplay; font-weight: 400; font-size: 14px; line-height: 1.43; letter-spacing: -0.0100em;`\n2. **Generate a Hero Headline:** `font-family: Roobert; font-weight: 400; font-size: 96px; line-height: 0.95; letter-spacing: -0.0400em; color: #ffffff; text-align: center;`\n3. **Design an Input Field:** `background-color: rgba(240, 240, 235, 0.18); color: #ffffff; border-radius: 8px; padding: 16px 24px; font-family: Inter; font-weight: 400; font-size: 16px; line-height: 1.50;`\n4. **Build a Standard Body Text Paragraph:** `font-family: Inter; font-weight: 400; font-size: 16px; line-height: 1.50; color: #0f111a; letter-spacing: -0.0100em;`\n5. **Construct a Secondary Section Subheading:** `font-family: Interdisplay; font-weight: 400; font-size: 24px; line-height: 1.20; letter-spacing: -0.0200em; color: #0f111a;`"}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775924237244-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775924237244-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/9cc537fc-97d8-4632-8703-f9aa296c2206-1777560611309-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/9cc537fc-97d8-4632-8703-f9aa296c2206-1777560611309-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/9cc537fc-97d8-4632-8703-f9aa296c2206-1777560611309-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/9cc537fc-97d8-4632-8703-f9aa296c2206-1777560611309-preview-detail-poster.jpg"},"similarStyleIds":["a76ec6ba-20b3-495c-9d89-1e58281e79e7","7b083729-e694-4b66-82a3-befb08451722","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","aeefc294-a8f7-443d-b76a-538dddc29afe","66eb1c37-a8e5-4e6c-b17f-a75385b462e7","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","e050061c-346d-44cc-92ba-6b22beb4a91f","fece962d-a580-4365-8afd-c9905a2502b1","32845f27-6b24-48be-af25-8e664f826b30","48e5de76-05d5-4c4e-a269-c7c245b291ec","4d4772a3-e1da-415f-a6d7-658dcefdcecd","80d7ef36-ed7e-48bb-b558-f772eb40106f","12255b63-e506-4bc1-a4cd-d05487de32f3","6c0b77d3-71f9-469d-98aa-4ce1d6d76ac8","1ae4bcfe-c613-42fc-aab7-f9583381e7cc","6036b661-3886-4f76-a5e6-bb8960eb7db5","34baa524-5d5b-4165-bbab-d01f05e6d6b9","9fecf7d6-b717-49ca-8edc-b10d6110b21c"],"exports":{"designMdUrl":"/references/refero/9cc537fc-97d8-4632-8703-f9aa296c2206/design.md","tokensJsonUrl":"/references/refero/9cc537fc-97d8-4632-8703-f9aa296c2206/tokens.json","tailwindV4Url":"/references/refero/9cc537fc-97d8-4632-8703-f9aa296c2206/tailwind-v4.css","cssVariablesUrl":"/references/refero/9cc537fc-97d8-4632-8703-f9aa296c2206/tailwind-v4.css"}}