# Design Reference - 14islands
> Editorial Minimal Canvas — Large, impactful typography commands attention against vast, light-gray expanses.

## Source
- Original site: https://14islands.com
- Captured: 2026-04-11T16:38:42.882Z

## Tags
- minimalist
- editorial
- typography-driven
- monochromatic
- high-contrast
- elegant
- structured
- design-agency
- clean

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Canvas White | `#f2f2f2` | neutral | Primary page background, neutral surfaces. Provides a clean, bright stage for content. |
| Deep Graphite | `#070707` | neutral | Primary text, headings, icons, actionable element borders. Serves as the dominant dark element for strong contrast. |
| Off White | `#ffffff` | neutral | Used sparingly for specific background elements within content areas. Acts as a subtle variation to Canvas White. |
| Soft Gray Highlight | `#a2a2a9` | neutral | Secondary text, subtle borders, inactive states, and highlights. Offers a toned-down visual alternative to Deep Graphite. |
| Medium Gray Highlight | `#797979` | neutral | Tertiary text, less prominent information. Provides a slightly darker, more readable alternative to Soft Gray Highlight for smaller text. |

## 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 And Radius
```json
{
  "spacing": {
    "radius": {
      "default": "4.16667px"
    },
    "elementGap": "",
    "sectionGap": "",
    "cardPadding": "21px"
  },
  "radius": {
    "default": "4.16667px"
  }
}
```

## Component Patterns
- name: Agency Intro Block
- name: Work Grid — Project Cards
- name: Section Heading — Lovable Products
- 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.

## 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.

## Don't
- 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.