{"id":"139c4bee-396d-494c-baf0-fe211bf4928d","name":"14islands","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/139c4bee-396d-494c-baf0-fe211bf4928d","originalSiteUrl":"https://14islands.com","capturedAt":"2026-04-11T16:38:42.882Z","colors":[{"name":"Canvas White","hex":"#f2f2f2","role":"Primary page background, neutral surfaces. Provides a clean, bright stage for content.","group":"neutral","cssVariable":"--color-canvas-white"},{"name":"Deep Graphite","hex":"#070707","role":"Primary text, headings, icons, actionable element borders. Serves as the dominant dark element for strong contrast.","group":"neutral","cssVariable":"--color-deep-graphite"},{"name":"Off White","hex":"#ffffff","role":"Used sparingly for specific background elements within content areas. Acts as a subtle variation to Canvas White.","group":"neutral","cssVariable":"--color-off-white"},{"name":"Soft Gray Highlight","hex":"#a2a2a9","role":"Secondary text, subtle borders, inactive states, and highlights. Offers a toned-down visual alternative to Deep Graphite.","group":"neutral","cssVariable":"--color-soft-gray-highlight"},{"name":"Medium Gray Highlight","hex":"#797979","role":"Tertiary text, less prominent information. Provides a slightly darker, more readable alternative to Soft Gray Highlight for smaller text.","group":"neutral","cssVariable":"--color-medium-gray-highlight"}],"typography":[{"role":"Display and large headlines. Its custom, wide letterforms and negative letter-spacing create a distinctive, impactful cadence, making large text feel like design elements themselves.","sizes":"27px, 75px, 100px, 180px","family":"AftenScreen","weight":"400","weights":[400],"lineHeight":"0.80, 1.00, 1.30","substitute":"Open Sans, Montserrat","letterSpacing":"-0.05em at 180px, -0.04em at 100px"},{"role":"Body copy, navigation, small headlines, and functional text. A workhorse font that ensures readability without visual fuss, supporting the dramatic headlines.","sizes":"12px, 16px","family":"BentonSans","weight":"400","weights":[400],"lineHeight":"1.20, 1.40","substitute":"Inter, Lato","letterSpacing":"normal"}],"spacing":{"radius":{"default":"4.16667px"},"elementGap":"","sectionGap":"","cardPadding":"21px"},"radius":{"default":"4.16667px"},"guidelines":{"do":["Prioritize `Canvas White` (`#f2f2f2`) as the main background for content areas and `Deep Graphite` (`#070707`) for all primary text, ensuring visual clarity and impact.","Use `AftenScreen` at its largest sizes (75px, 100px, 180px) with negative letter-spacing for all hero and section headlines to create dramatic visual tension.","Employ `BentonSans` at 16px weight 400 with a 1.4 line height for all body copy and secondary informational text to maintain high readability.","Introduce `Soft Gray Highlight` (`#a2a2a9`) for secondary text elements or visual accents, especially for subheadings or subtle distinctions.","Apply a consistent `4.16667px` border-radius to all image containers and interactive elements, avoiding sharp corners while still maintaining a structured feel.","Maintain generous vertical spacing between sections, using values around `100px` to `108px` to ensure content breathes.","Ensure interactive elements (buttons, links) are either `Deep Graphite` (`#070707`) or `Soft Gray Highlight` (`#a2a2a9`) with no background, relying on text and subtle borders for indication."],"dont":["Avoid using background colors other than `Canvas White` (`#f2f2f2`) or `Off White` (`#ffffff`) for primary content sections.","Do not introduce highly saturated or vivid chromatic colors; adhere strictly to the established neutral palette.","Refrain from using strong box-shadows or complex elevation effects; the design relies on spacing and typography for hierarchy.","Do not deviate from the specified negative letter-spacing for `AftenScreen` headlines, as this is a core part of its visual identity.","Avoid pill-shaped or overly rounded elements; the standard `4.16667px` radius should be used consistently.","Do not use generic system fonts; always specify `BentonSans` or `AftenScreen` (or their approved substitutes) for all text.","Do not add additional padding or background styles to the 'Minimal Button' components; their design is intentionally understated."]}}