Awwwards

# Awwwards — Style Reference
> Monochrome Grid Blueprint

**Theme:** light

**Site:** https://awwwards.com

This design system feels like a hyper-organized digital archive, presenting information with stark contrast and deliberate typography. A heavy reliance on achromatic tones (#222222, #e9e9e9, #ffffff) creates a crisp, no-nonsense canvas. The custom Inter Tight typeface with its wide range of weights and tight line heights defines a distinctive, modern editorial voice. Small, deliberate rounded corners and minimal visual decoration ensure focus remains squarely on core content, like a precise technical schematic.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Sunset Orange | `#fa5d29` | `--color-sunset-orange` | Link highlights, occasional accent text. A vivid, warm pop against the dominant neutrals for interactive elements or rare emphasis. |
| Lemon Zest | `#fff083` | `--color-lemon-zest` | Highlighting badges, occasional alert backgrounds. A secondary vivid accent for less critical attention. |
| Midnight Graphite | `#222222` | `--color-midnight-graphite` | Primary text, headings, prominent icons, button text on light backgrounds. Establishes a bold and clear visual hierarchy against the light neutrals. |
| Arctic White | `#ffffff` | `--color-arctic-white` | Page backgrounds, card backgrounds, button text on dark backgrounds. Provides expansive clean canvases and high contrast. |
| Pale Ash | `#e9e9e9` | `--color-pale-ash` | Secondary backgrounds for soft elevation and subtle button states. Creates faint visual differentiation without strong color shifts. |
| Deep Pewter | `#808080` | `--color-deep-pewter` | Table borders and dividers. A darker neutral for structural elements. |
| Silver Mist | `#dedede` | `--color-silver-mist` | Subtle borders, inactive elements, supporting icon fills. Provides a light touch of separation and detail. |

## Tokens — Typography

### Inter Tight
- **Substitute:** Inter
- **Weights:** 300, 400, 500, 600
- **Sizes:** 10px, 11px, 12px, 13px, 14px, 15px, 16px, 18px, 19px, 21px, 22px, 24px, 32px, 42px, 127px
- **Line height:** 0.93, 1, 1.1, 1.17, 1.2, 1.27, 1.29, 1.36, 1.44, 1.45, 1.5, 1.7, 1.75, 1.87, 2, 2.15, 2.4, 3
- **Letter spacing:** normal
- **Role:** The sole typeface for all content. Its narrow metrics and precise line heights from 0.93 to 3.00 create a distinctive, information-dense, modern aesthetic across all scales, from micro-text to impactful display headlines where 127px at 0.93 line height creates a commanding visual block.

## Tokens — Spacing

- **Section gap:** 40px
- **Card padding:** 8px
- **Element gap:** 4px

## Tokens — Radius

- **Default:** 8px
- **cardInteractive:** 14px
- **none:** 0px
- **small:** 4px

## Layout

The layout primarily follows a max-width contained model for navigational elements and most content, but the hero section often utilizes full-bleed imagery. The overall structure is centered. The hero pattern is a large visual with overlaid text, capturing immediate attention. Section rhythm is generally consistent with substantial vertical spacing (approximately 40px, inferred from section gaps), creating a breathable, spacious feel. Content arrangement frequently uses large, single columns for prominent headlines and text, transitioning to more traditional article-like layouts further down the page. The information density is 'comfortable', balancing white space with impactful content blocks. Navigation is a prominent sticky top bar with clearly defined interactive elements.

## Imagery

The site's imagery strategy is a mix of high-quality lifestyle photography and occasional abstract graphics. Photography featuring people often has a muted, desaturated color palette, focusing on natural light and an unposed, candid feel. Products, when present, appear within these lifestyle contexts rather than isolated. The images are typically full-bleed or large masked areas, often serving as background elements behind overlaid text. They are raw-edged, without explicit rounded corners, contrasting with the rounded UI elements. Text overlays are common, creating a magazine-like editorial presentation where visuals provide atmospheric context rather than direct product showcase.

## Components

### Site of the Day Header Card

### Bottom Navigation Tab Bar

### Search Input Field

### Primary Ghost Button
*Navigation, secondary actions*

Text-only button with Midnight Graphite (#222222) text. No background, no padding, no border, and 0px border-radius. Relies on text color and hover states for interaction.

### Solid Dark Button
*Call-to-action, primary action*

Solid Midnight Graphite (#222222) background with Arctic White (#ffffff) text. 8px border-radius and horizontal padding of 20px. Vertical padding is managed by line-height.

### Secondary Solid Button
*Affirmative actions, less prominent CTAs*

Solid Pale Ash (#e9e9e9) background with Midnight Graphite (#222222) text. 8px border-radius and horizontal padding of 15.6px. Vertical padding is managed by line-height.

### Interactive Card with Round Corners
*Clickable content blocks, featured items*

Arctic White (#ffffff) background with 14px border-radius. No box shadow or padding on the card itself; content provides internal spacing. Used for visually distinct interactive blocks.

### Standard Content Card
*Informational blocks, list items*

Transparent background with 0px border-radius. No box shadow or padding. Acts as a container for related information using only internal content spacing.

### Search Input Field
*Site search, form entries*

Transparent background, Midnight Graphite (#222222) text. Left padding of 38px, no explicit border-radius (0px). Underlined by inferred style from input fields.

### Badge with Background
*Categorization, short labels*

Transparent background with Arctic White (#ffffff) text and 8px border-radius. Padding is 0, visual context provides spacing.

### Padded Detail Badge
*Specific score or data labels*

Transparent background with Midnight Graphite (#222222) text. 4px border-radius. Padded with 2px top, 1px bottom, and 8px left/right. Provides a contained, minimal label.

## Guidelines

### Do

- Always use Inter Tight across all text elements, maintaining consistent font identity.
- Prioritize Midnight Graphite (#222222) for all primary text and Arctic White (#ffffff) for backgrounds to ensure AAA contrast.
- Apply 8px border-radius for interactive elements like buttons and general cards, for a consistent soft-edge feel.
- Utilize Pale Ash (#e9e9e9) for subtle background differentiation, such as secondary button states or layered content blocks.
- Ensure horizontal element spacing for text-based components is a multiple of 4px, seen in 6px and 8px common values.
- Reserve Sunset Orange (#fa5d29) for key interactive elements or critical alerts, leveraging its vividness sparingly.

### Don't

- Avoid introducing additional typefaces; Inter Tight is the singular typographic voice.
- Do not use strong drop shadows; the system relies on background color shifts and borders for depth.
- Do not vary from the established border radii for interactive elements; 8px and 4px radii are key to the visual language.
- Avoid excessive color; maintain the dominant achromatic palette, using accent colors only for designated functional purposes.
- Do not use generic padding values; adhere to the 4px base unit or derived token values for consistent density.
- Avoid design elements that introduce significant visual clutter; simplicity and directness are paramount.

## Agent Prompt Guide

### Quick Color Reference
- Text: #222222 (Midnight Graphite)
- Background: #ffffff (Arctic White)
- CTA Background: #222222 (Midnight Graphite)
- CTA Text: #ffffff (Arctic White)
- Accent: #fa5d29 (Sunset Orange)
- Subtle Background: #e9e9e9 (Pale Ash)

### 3-5 Example Component Prompts
1. Create a primary call-to-action button: Solid Midnight Graphite background, Arctic White text (Inter Tight weight 400, 16px, 1.25 line-height), 8px border-radius, 20px horizontal padding.
2. Design a navigation link: Midnight Graphite text (Inter Tight weight 400, 15px, 1.2 line-height), no background, no padding, 0px border-radius.
3. Implement a detail badge: Transparent background, Midnight Graphite text (Inter Tight weight 400, 10px, 1.4 line-height), 4px border-radius, 8px horizontal padding, 2px top padding, 1px bottom padding.
4. Build an interactive card: Arctic White background, 14px border-radius, no shadow, no internal padding on the card itself. Content inside will define spacing.