{"id":"139c4bee-396d-494c-baf0-fe211bf4928d","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","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":"14islands","summary":"Editorial Minimal Canvas — Large, impactful typography commands attention against vast, light-gray expanses.","description":"This design system evokes the precision of a high-end editorial layout, prioritizing clear information delivery over decorative elements. The interplay of stark `#070707` text against expansive `#F2F2F2` backgrounds creates a powerful, almost architectural contrast, while the strategic use of `--color-grey-highlight-light` (`#a2a2a9`) provides subtle visual breaks that maintain gravity. Typography drives the aesthetic, with custom fonts `AftenScreen` delivering impactful, tightly kerned headlines and `BentonSans` ensuring legible, understated body copy, resulting in a system that feels both modern and timeless.","tags":["minimalist","editorial","typography-driven","monochromatic","high-contrast","elegant","structured","design-agency","clean"],"industry":"agency","colorScheme":"light","colors":[{"name":"Canvas White","hex":"#f2f2f2","role":"Primary page background, neutral surfaces. Provides a clean, bright stage for content.","group":"neutral"},{"name":"Deep Graphite","hex":"#070707","role":"Primary text, headings, icons, actionable element borders. Serves as the dominant dark element for strong contrast.","group":"neutral"},{"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"},{"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"},{"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"}],"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"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.2},{"role":"body","size":16,"lineHeight":1.4},{"role":"heading-sm","size":27,"lineHeight":1.3},{"role":"heading","size":75,"lineHeight":1,"letterSpacing":-0.04},{"role":"heading-lg","size":100,"lineHeight":1,"letterSpacing":-0.04},{"role":"display","size":180,"lineHeight":0.8,"letterSpacing":-0.05}],"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."]},"components":[{"name":"Agency Intro Block","role":""},{"name":"Work Grid — Project Cards","role":""},{"name":"Section Heading — Lovable Products","role":""},{"name":"Text Link - Primary","role":"Interactive element, navigation links, inline text links"},{"name":"Text Link - Secondary","role":"Interactive element, secondary navigation links, subtle buttons"},{"name":"Minimal Button - Active","role":"Primary action button, selected state button"},{"name":"Minimal Button - Inactive/Secondary","role":"Secondary action button, unselected state button"},{"name":"Section Heading","role":"Primary headings for content sections"},{"name":"Inline Text Highlight","role":"Highlighting specific words or phrases."},{"name":"Body Text Paragraph","role":"Standard body copy for detailed information."}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text: `#070707`\n- Background: `#f2f2f2`\n- Secondary Text/Highlight: `#a2a2a9`\n- Default Border: `#070707`\n- Background Alternative: `#ffffff`\n\n### 3-5 Example Component Prompts\n1. **Create a hero section:** Set the background to `Deep Graphite` (`#070707`). Center the text. The main headline is 'Design & Technology', with 'Design' and 'Technology' in `AftenScreen` 180px, `Deep Graphite`, `0.8` line height, and `-0.05em` letter spacing. The '&' symbol should be `Soft Gray Highlight` (`#a2a2a9`), `AftenScreen` 75px, `0.8` line height, and `-0.05em` letter spacing. Below, add a subheadline 'Creative agency' in `BentonSans` 16px, `Soft Gray Highlight`, `1.4` line height, normal letter spacing, aligned center.\n2. **Generate a content section with alternating layout:** Set the background to `Canvas White` (`#f2f2f2`). Create two columns. Left column: a `Medium Gray Highlight` (`#797979`) text block in `BentonSans` 16px, 1.4 line height, normal letter spacing, with padding `21px`. Right column: a product screenshot with `4.16667px` border-radius.\n3. **Design a call-to-action button:** Create a 'Learn More' button with `Deep Graphite` (`#070707`) text on an `rgba(0, 0, 0, 0)` background, and a `Deep Graphite` (`#070707`) border, no padding. The font should be `BentonSans` 16px, 400 weight. Use a focus state with a slightly darker `#070707` border. No border-radius on the element itself, but make sure the content inside respects the overall aesthetic.\n4. **Build a navigation bar:** Create a horizontal navigation with `BentonSans` 16px, 400 weight links in `Deep Graphite` (`#070707`). The links should have `normal` letter spacing and no background or padding. Space items with `25px` `margin-right`. Include a logo (text-based '14islands') on the far left, using `BentonSans` 16px at `Deep Graphite`, and 'Contact' on the far right."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775925500491-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775925500491-thumb.jpg"},"similarStyleIds":["25009c35-8b3b-4898-9295-3e0e0aa07207","ff8f39ee-a10e-4a9d-a94d-6993c6084060","e75b3106-fc5b-4bb8-8d7d-a7ab224fd27d","5c9743ad-fe33-4d21-9185-db012f6f96c7","733f32ca-efc3-40fb-bc58-327bd2b45828","6bc0dff4-b803-4e0c-a8f5-bef016843ae8","fe602c0f-2862-432b-88fc-fa5f9fbc3c78","df452116-6b43-4963-991b-ebae892c8dc1","2d4fc4ba-2ea4-465f-8644-f3ff5c6713a2","ab2a0b58-377d-4674-986e-4abbdf6c49ed","a90dbcb6-e42c-4992-a83b-94879699dd4f","ab1b113a-ed21-4512-acc2-d10c8927c410","3e70af05-a07f-4c11-98ca-6ecb4765e967","657e55de-8cff-4d24-9a4e-17d3b7593a55","c43237e3-dae2-4fc6-a917-519b25c870e5","1287abc9-da90-410d-a997-96b8b11ad646","7bd31579-aec1-485c-91cf-72bbdfac40cd","e80c5b4a-fd03-460e-a577-49928a4ab5db","703d69b7-2863-44fa-a443-2ac090db3873","0e8db8d0-4d8f-48ac-a8e7-aaea9601e3ce"],"exports":{"designMdUrl":"/references/refero/139c4bee-396d-494c-baf0-fe211bf4928d/design.md","tokensJsonUrl":"/references/refero/139c4bee-396d-494c-baf0-fe211bf4928d/tokens.json","tailwindV4Url":"/references/refero/139c4bee-396d-494c-baf0-fe211bf4928d/tailwind-v4.css","cssVariablesUrl":"/references/refero/139c4bee-396d-494c-baf0-fe211bf4928d/tailwind-v4.css"}}