14islands

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

**Theme:** light

**Site:** https://14islands.com

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.

## Tokens — Colors

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

## Tokens — Typography

### AftenScreen
- **Substitute:** Open Sans, Montserrat
- **Weights:** 400
- **Sizes:** 27px, 75px, 100px, 180px
- **Line height:** 0.8, 1, 1.3
- **Letter spacing:** -0.05em at 180px, -0.04em at 100px
- **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.

### BentonSans
- **Substitute:** Inter, Lato
- **Weights:** 400
- **Sizes:** 12px, 16px
- **Line height:** 1.2, 1.4
- **Letter spacing:** normal
- **Role:** Body copy, navigation, small headlines, and functional text. A workhorse font that ensures readability without visual fuss, supporting the dramatic headlines.

## Tokens — Type Scale

| Role | Size | Line height | Letter spacing |
|------|------|------|------|
| caption | 12px | 1.2 | — |
| body | 16px | 1.4 | — |
| heading-sm | 27px | 1.3 | — |
| heading | 75px | 1 | -0.04em |
| heading-lg | 100px | 1 | -0.04em |
| display | 180px | 0.8 | -0.05em |

## Tokens — Spacing

- **Card padding:** 21px

## Tokens — Radius

- **Default:** 4.16667px

## Layout

The page primarily uses a full-bleed pattern for its background colors (Canvas White), but content within these sections is constrained to a central max-width viewport (implicitly present, though not explicitly defined by a max-width token). The hero section features a large, centered headline over a dark background section, establishing a strong typographic focal point. Sections are clearly delineated by generous vertical spacing (`100px` to `108px`) and sometimes by subtle background color changes (e.g., `#f2f2f2` to a darker block). Content arrangement frequently uses a text-left, image-right or vice-versa alternating pattern, and showcases work in a clean grid-like structure (e.g., 2-column image grid). The navigation is a minimalist top bar, likely sticky, with spaced-out text links.

## Imagery

The site uses a mix of high-quality, professional photography and product screenshots. Photography is typically studio-shot, often with muted backgrounds or a focus on the subject. Images are contained, not full-bleed, usually presented in rectangular frames with a subtle `4.16667px` border-radius. In some cases, illustrations or abstract graphics for product showcases are used, often demonstrating clean lines and a somewhat flat aesthetic. Imagery plays an explanatory and showcase role, breaking up text-heavy sections and visually presenting work examples, maintaining a balanced density between visuals and text.

## Components

### Agency Intro Block

### Work Grid — Project Cards

### Section Heading — Lovable Products

### Text Link - Primary
*Interactive element, navigation links, inline text links*

Plain text link in Deep Graphite (#070707) with no background or padding, emphasizing the content's editorial tone. Underline appears on hover/active states, matching text color. Typographic details match BentonSans 16px, 1.4 line height, normal letter spacing.

### Text Link - Secondary
*Interactive element, secondary navigation links, subtle buttons*

Plain text link in Soft Gray Highlight (#a2a2a9) with no background or padding. Used for less prominent interactive elements. Typographic details match BentonSans 16px, 1.4 line height, normal letter spacing.

### Minimal Button - Active
*Primary action button, selected state button*

A button with Deep Graphite (#070707) text and a matching border, without background or padding. Essentially a text link with an implicit clickable area. Typographic details match BentonSans 400.

### Minimal Button - Inactive/Secondary
*Secondary action button, unselected state button*

A button with Soft Gray Highlight (#a2a2a9) text and a matching border, without background or padding. Used for less emphasized actions. Typographic details match BentonSans 400.

### Section Heading
*Primary headings for content sections*

Deep Graphite (#070707) text set in AftenScreen 180px, 0.8 line height, and -0.05em letter spacing. The dramatic scale and tight kerning are a signature brand element.

### Inline Text Highlight
*Highlighting specific words or phrases.*

A segment of text in Medium Gray Highlight (#a2a2a9) within a Deep Graphite (#070707) string, typically using AftenScreen 75px, 1.0 line height, and -0.04em letter spacing. Used for visual variations within display text, like the '&' operator.

### Body Text Paragraph
*Standard body copy for detailed information.*

Paragraphs are set in BentonSans 16px, 1.4 line height, normal letter spacing, and Deep Graphite (#070707) color. Clear and legible for extended reading.

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

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

## Agent Prompt Guide

### Quick Color Reference
- Text: `#070707`
- Background: `#f2f2f2`
- Secondary Text/Highlight: `#a2a2a9`
- Default Border: `#070707`
- Background Alternative: `#ffffff`

### 3-5 Example Component Prompts
1. **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.
2. **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.
3. **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.
4. **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.