Skip to content
DesignMunkDesignMunk Submit a site

Craft Wild

craft.wild.as
Craft, engineered. Explore. Generate. Refine. Scale.
Agency AI Homepage Sneak
Share Visit site
craft.wild.as DESKTOP · 1440
Craft Wild

AI Breakdown

Design export

# Design brief: the Craft Wild design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/07082855/craft-wild-as-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/07082855/craft-wild-as-featured.webp
- On DesignMunk: https://designmunk.com/craft-wild/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Craft Wild: Big Grotesk Headlines with Pixel-Storm Hero Stripe

## Overview

A precise, engineering-lean brand for a design-and-technology studio. The UI is stark and typographic: black text on white surfaces with one high-energy accent. Layouts are spacious but not airy—content sits in strong blocks separated by clear section spacing. The overall feel is disciplined, technical, and confident.

## Colors

- **primary (#0A0A0A):** Core text and headline ink across the site.
- **secondary (#7C7C7C):** Supporting copy, captions, and subdued UI text.
- **tertiary (#E0492A):** Signal accent for emphasis, badges, and occasional CTA highlights.
- **neutral (#FFFFFF):** Primary surface color for pages, cards, and buttons.
- **border (#E5E7EB):** Light dividers, card outlines, and section rules.
- **brand-dust-to-dust (#BCBCBC):** Muted utility gray for meta details and subtle UI elements.
- **surface (#FFFFFF):** Default background for all content areas.
- **on-surface (#0A0A0A):** Default text color on white surfaces.

## Typography

The system uses one family, Sneak, at light to regular weights with tight letter-spacing in display sizes. Roles:
- Headline-lg: Sneak 82px/1.2, weight 400, letter-spacing -0.035em for hero statements.
- Headline-md: Sneak 46px/1.06, weight 400, letter-spacing -0.02em for section intros.
- Headline-sm: Sneak 20px/1.2 for smaller section labels.
- Headline-xs: Sneak 18px/1.22 for overlines and UI headings.
- Body-md: Sneak 16px/1.5 for paragraphs.
Availability: Sneak is custom/self-hosted (not Google-served). If it is unavailable, substitute a widely available neo-grotesk with similar proportions: Inter, Space Grotesk, or Manrope. Keep the same sizes and approximate letter-spacing to preserve rhythm.

## Layout

Spacing follows a compact, asymmetric scale: 8, 18, 26, 42, 98. Use xl (98px) for section top/bottom padding, lg (42px) for intra-section blocks, md (26px) for grid gutters, sm (18px) for element groups, and xs (8px) for tight control around labels and buttons. A responsive 12-column grid suits the content; on narrow viewports collapse to a single column with 26px side padding. Rely on generous section spacing and concise blocks instead of heavy chrome.

## Elevation & Depth

Depth is minimal. Most components sit directly on white with thin #E5E7EB borders. The only measured shadow is sm (rgba(10,10,10,0.14) 0 2px 12px) and should be reserved for hover or elevated media. Hierarchy is conveyed through type scale, weight, and whitespace rather than layered shadows.

## Shapes

Two radii define the language: sm 4px for buttons and small inputs, md 8px for cards and featured tiles. Corners are engineered and understated; avoid rounded values beyond 8px to keep the industrial tone.

## Components

Buttons
- Primary: 40px height, 8px×16px padding, 4px radius, background #0A0A0A, text #FFFFFF.
- Secondary: 40px height, 8px×16px padding, 4px radius, text #0A0A0A on white (no fill by default).
- Link: Text-only action, radius 0.
Cards
- Background #FFFFFF, text #0A0A0A, 8px radius, 16px padding, thin #E5E7EB border optional; use sm shadow only on hover.

Distinctive components
### Hero Banner
- Headline uses Headline-lg (82px) in #0A0A0A on #FFFFFF. Supporting line in Headline-md (46px). Edge-to-edge pixel mosaic strip sits beneath as a decorative band.
### Pixel Grid Marquee
- A full-width, shallow band of animated pixel tiles. Keep background white; no additional UI inside. Spacing: xl (98px) separation below before long intro copy.
### Work Case Grid
- 3-up card layout on desktop using card token. Gutter md (26px), section padding lg (42px). Each tile uses Link/Secondary CTAs.
### Process Stepper — Explore / Generate / Refine / Scale
- Four steps labeled 01–04. Titles in Headline-sm (20px), body in 16px. Use border rules (#E5E7EB) to segment steps; 4px radius on small badges.
### Brand Context Protocol Cards
- Four descriptive blocks (Brand Truth, Skills, Output, Brand Check) using card token with 8px corners and 16px padding. Optional sm shadow on hover.
### AI Levels Ladder
- Three levels (L1, L3, L5) presented as a vertical list with left rules in #E5E7EB. Level tags may use tertiary #E0492A as the signal color.
### Experiments Gallery
- Media-first tiles with captions; use the card token and sm shadow on hover. Maintain lg (42px) vertical rhythm between rows.
### Contact Footer Panel
- Body copy at 16px with link-style CTAs. Use xl (98px) top padding and md (26px) spacing between address lines; no shadow, white background, thin dividers as needed.

## Do's and Don'ts

- Do keep primary text #0A0A0A on #FFFFFF; use #7C7C7C only for secondary meta.
- Do use Headline-lg at 82px with negative tracking for main statements; keep section heads at 46px.
- Do reserve #E0492A for true accents or tags; it should not dominate backgrounds.
- Don't introduce large radii; stay within 4px and 8px.
- Don't add deep shadows; use the sm shadow sparingly on hover or elevated media only.
- Don't compress section spacing; maintain ~98px top/bottom for clear breaks.

## Agent Prompt Guide

Quick colour reference
- Text: #0A0A0A
- Background: #FFFFFF
- Border: #E5E7EB
- Accent: #E0492A

Prompts
1) Build a hero section: white background (#FFFFFF), Sneak 82px/1.2 for the H1 (fallback Inter, Space Grotesk), tracking -0.035em, body at 16px/1.5. Place a full-width decorative pixel band beneath the headline, then add a link-style CTA. Side padding 26px, section padding top/bottom 98px.
2) Create a 3-card case grid: use a 12-column layout with 26px gutters. Each card is #FFFFFF with 8px radius, 16px padding, optional 1px border #E5E7EB. Titles at 20px, body at 16px, link-style CTA in #0A0A0A. Add sm hover shadow rgba(10,10,10,0.14) 0 2px 12px.
3) Implement the four-step "Explore / Generate / Refine / Scale" module: split into four equal columns on desktop, stacked on mobile. Step labels in 18–20px Sneak, descriptions at 16px. Use thin dividers #E5E7EB between steps, 42px vertical spacing, buttons as Secondary (text #0A0A0A, 4px radius, 40px height).
4) Design a contact footer: white surface, 98px top padding, 26px spacing between paragraphs. Body copy at 16px with email links styled as button-link (text only, radius 0). Add a subtle top border #E5E7EB to separate from previous content.

## Similar Brands

- Active Theory — High-craft, engineering-forward creative work with minimal UI chrome; tends to use darker themes and heavier motion than this page.
- Instrument — Clean agency marketing with strong systems typography; less experimental motion, more enterprise tone.
- Resn — Playful WebGL aesthetics and bold gestures; visually louder and more theatrical compared to Craft Wild's restraint.
- Pentagram — Typographic authority and black-on-white clarity; fewer engineering/motion cues, more editorial composition.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #0a0a0a;
  --color-secondary: #7c7c7c;
  --color-tertiary: #e0492a;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-dust-to-dust: #bcbcbc;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 82px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.035em;
  --text-headline-md-size: 46px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.06;
  --text-headline-md-tracking: -0.02em;
  --text-headline-sm-size: 20px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-sneak: "Sneak";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 18px;
  --spacing-md: 26px;
  --spacing-lg: 42px;
  --spacing-xl: 98px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 8px 16px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 16px;
  --button-secondary-height: 40px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #0a0a0a;
  --color-secondary: #7c7c7c;
  --color-tertiary: #e0492a;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-dust-to-dust: #bcbcbc;
  --color-surface: #ffffff;
  --color-on-surface: #0a0a0a;
  --font-headline-lg: "Sneak";
  --font-headline-md: "Sneak";
  --font-headline-sm: "Sneak";
  --font-headline-xs: "Sneak";
  --font-body-md: "Sneak";
  --text-headline-lg: 82px;
  --text-headline-md: 46px;
  --text-headline-sm: 20px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.035em;
  --tracking-headline-md: -0.02em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 4px;
  --radius-md: 8px;
  --spacing-xs: 8px;
  --spacing-sm: 18px;
  --spacing-md: 26px;
  --spacing-lg: 42px;
  --spacing-xl: 98px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.039,
                    0.039,
                    0.039
                ],
                "hex": "#0a0a0a"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.486,
                    0.486
                ],
                "hex": "#7c7c7c"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.878,
                    0.286,
                    0.165
                ],
                "hex": "#e0492a"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-dust-to-dust": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.737,
                    0.737,
                    0.737
                ],
                "hex": "#bcbcbc"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.039,
                    0.039,
                    0.039
                ],
                "hex": "#0a0a0a"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 18,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 26,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 42,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 98,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Sneak",
                "fontSize": {
                    "value": 82,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.035,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Sneak",
                "fontSize": {
                    "value": 46,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Sneak",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Sneak",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Sneak",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Craft Wild**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Agency →
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
clears.ai
Clears AI
Clears
agentwork.com
Agentwork AI
Agentwork