# getartcraft.com

Source: https://getartcraft.com/
Captured: 2026-10-06
Tags: saas, landing, light, both, swiss, minimal, editorial, technical, confident, calm, human
Colors: #f2f1ee, #d1d0ce, #050507, #929290, #b0afae, #717171, #4e4e4f, #2c2c2e
Type (h1): Archivo · 36px/37.8px · 620 · tracking -1.08px — "Capable tools for artists."
Type (h2): Archivo · 60px/61.2px · 620 · tracking -2.1px — "The control that mere words cannot buy."
Type (h3): Archivo · 24px/32px · 620 · tracking -0.48px — "Image to Location"
Type (body): Inter · 18px/29.25px · 400 — "ArtCraft builds open source tools for artists. We pride ourselves on freedom of "
Type (small): Geist Mono · 11px/16.5px · 500 · tracking 1.65px — "HOME"
Type (button): Geist Mono · 11px/16.5px · 700 · tracking 1.32px — "DOWNLOAD FREE"
Button: "Download free" — fill #101014, text #f2f1ee, radius 0px, border 0px, padding 0px 24px, height 48px, type 11px/700

## Images

- Hero (desktop): https://media.lvly.design/library/getartcraft-com/hero.webp?v=3e6861e0
- Page crop (mid-1): https://media.lvly.design/library/getartcraft-com/mid-1.webp?v=969b563c
- Page crop (mid-2): https://media.lvly.design/library/getartcraft-com/mid-2.webp?v=35946df4
- Hero (mobile): https://media.lvly.design/library/getartcraft-com/mobile-hero.webp?v=b49ea783
- Full page (desktop): https://media.lvly.design/library/getartcraft-com/full.jpg?v=8fd9fc65
- Full page (mobile): https://media.lvly.design/library/getartcraft-com/mobile-full.jpg?v=e06b0d75
- Clip preview (mp4): https://media.lvly.design/library/getartcraft-com/video-wup1th.preview.mp4?v=c18c56bb

ArtCraft dresses an AI art tool as a drafting table: a warm paper-gray field (#f2f1ee) ruled by hairline frames, a measuring ruler running down the right edge, and every label set in tracked Geist Mono caps like annotations on a technical drawing. Against that engineering calm, the type does the expressive work. A super-wide, heavy wordmark anchors the hero, Archivo headlines at weight 620 sit at tight negative tracking, and each one swaps a single word for a light serif italic ("for *artists*", "Stop *renting* from websites"). The only chroma comes from the product footage. Feature cards are full-bleed screenshots and film stills in a two-column grid with shared 1px borders, so the page reads as a catalog of real output rather than marketing illustration. The CTAs are square, near-black and mono-cased. Nothing on the page has a radius.

## Steal-worthy details

- Mixed-voice headline: a heavy grotesk sentence with one word swapped into a light serif italic of the same cap height, so the human word stands out against the tool language
- Vertical ruler pinned to the right edge, with ticks every ~56px and mono numerals every fifth tick, plus a blue marker that reads out scroll progress as "033%"
- Fixed section index in the bottom-right corner, set in stacked, right-aligned wide caps (ARTCRAFT / FEATURES / OWNERSHIP …), used as both table of contents and wayfinding with no container
- Active nav item shown as an inverted ink chip (dark fill, paper text) inside an otherwise borderless mono nav, with hairline vertical dividers between nav groups and the icon cells
- Super-extended geometric wordmark at ~880px wide, letter-spaced wider than the type around it, used as the hero headline in place of a tagline
- A filled ink button and an outlined button of equal height (48px, 0 radius), each in 11px mono caps at weight 700, with a line of tracked gray spec facts underneath (OPEN SOURCE · MACOS · WINDOWS · WEB)
- Section header strips: a full-width bordered band with "01 / CRAFTING FEATURES" on the left and a mono caption on the right ("REAL FOOTAGE — CAPTURED IN ARTCRAFT"), which turns each section into a numbered plate
- Feature cards topped by a mono caption row (category left, "03" right) above the media, so the cards share one continuous hairline grid instead of floating with gaps
- Crop-mark crosshairs where section borders meet the outer frame, a print-registration cue that costs one glyph
- Tickers under the hero: a full-width mono marquee of model and feature names separated by dots, with no fill and no border
- Three-column value props labeled A / B / C in tiny mono, divided only by vertical hairlines

## Style recipe

Build on a warm paper-gray ground (#f2f1ee) with near-black ink (#101014 for fills, #050507 for type) and a gray ramp (#d1d0ce hairlines, #929290 / #717171 muted text, #4e4e4f secondary). Keep the page monochrome. Color comes only from real product imagery, plus at most one small electric-blue indicator (around #3b6cf0) for a live readout. Use zero border radius everywhere.

Typography uses three voices. Headlines are Archivo at weight 620 with tight tracking: 72px/0.98 at -0.04em for display, 60px/1.02 at -0.035em for section titles, and 24px/1.33 at -0.02em for card titles. In each headline, set one emotionally loaded word in a light serif italic at the same size. Body text is Inter 18px/1.625 in muted gray. Labels, nav, buttons and captions are Geist Mono 11px, uppercase, weight 500 at +0.15em tracking (700 at +0.12em for buttons). A super-extended geometric wordmark can stand in as a hero headline.

Lay out inside an outer frame of 1px #d1d0ce hairlines, with cards sharing their borders instead of floating with gaps. Start each section with a full-width bordered strip that carries a mono "NN / SECTION NAME" label on the left and a mono caption on the right. Give each card a mono caption row (category left, two-digit index right) above edge-to-edge media, then a padded title and body. Mark frame intersections with small + crosshairs. Use instrument-like chrome: an edge ruler with numbered ticks, a fixed corner index in wide caps, and tracked mono spec lines under CTAs with facts separated by middots.

Buttons are 48px tall, 24px horizontal padding and square. The primary is filled #101014 with #f2f1ee mono caps, the secondary is a 1px ink outline on the ground color. For nav, use mono caps links separated by vertical hairline dividers into groups, and show the active item as an inverted ink chip. No shadows, gradients or decorative illustration: the frame, the type and the footage carry the page.