Visit site
New CS · Brand System v1 · 2026
01 Main mark

One mark. One memory.

The Crafter Station mark is a single interlaced glyph in forged gold. It carries the brand alone in spaces where the name is already known: app icons, favicons, merch.

02 Geometry

Built on four circles.

The mark is constructed on a 4-circle grid of R=64. Every variant, every application, every clear-space rule derives from those four primitives.

Crafter Station — Logo Construction

Geometry & symmetry system

  1. 01 Base grid
  2. 02 Primary shapes
  3. 03 Intersections
  4. 04 Path refinement
  5. 05 Final mark
06 Construction overview
2R 2R 2R 2R 45° 45° 45° 45°
RBase radius
2RMain proportion
03 Variants

Five states. One system.

The mark adapts to medium. Monoline for inline UI. Filled for primary use. Stamp for engravings. Hologram for screens. Signal for sparse layouts.

Variants — System
Monoline
Filled
Stamp
Hologram
Signal
04 Lockups

Mark and wordmark together.

Five canonical lockups cover ~95% of use cases. Horizontal is primary. Spacing rules lock to R/2 = 32 units.

Crafter
Station
Horizontal · primary Headers · Business cards · Docs
Crafter
Station
Vertical Avatars
Crafter Station
Compact Footers
Mark only Favicon · App icon · Sticker
Crafter.
Wordmark only Email sigs · Inline copy
Spacing system
Mark height
= Cap height of wordmark
Gap (h)
R / 2 = 32 units
Gap (v)
R / 4 = 16 units
Type
Geist 700 · -0.025em
Dot
#FFC107 · always
05 Typography

Geist. End of conversation.

Geist Sans for prose, Geist Mono for labels and data. Fluid scale across breakpoints. Variable axis 400–700.

Geist · Display 700
Crafter Station.
Geist Variable weights 400–700 OpenType ss01, ss03, cv11
Type scale · Geist Fluid clamp() across breakpoints
  1. 01 Display The quick brown fox jumps over the lazy dog 96px / clamp(48px, 8vw, 96px) w700 -0.04em lh 0.92 Hero statements
  2. 02 H1 The quick brown fox jumps over the lazy dog 56px / clamp(36px, 5vw, 56px) w700 -0.035em lh 1.05 Section titles
  3. 03 H2 The quick brown fox jumps over the lazy dog 40px / clamp(28px, 3.5vw, 40px) w600 -0.025em lh 1.1 Sub-sections
  4. 04 H3 The quick brown fox jumps over the lazy dog 24px / clamp(20px, 2.2vw, 24px) w600 -0.015em lh 1.2 Card titles
  5. 05 Body The quick brown fox jumps over the lazy dog 16px w400 -0.005em lh 1.6 Paragraphs, copy
  6. 06 Body sm The quick brown fox jumps over the lazy dog 14px w400 0 lh 1.55 Secondary copy
  7. 07 Caption The quick brown fox jumps over the lazy dog 12px w500 0.02em lh 1.45 Captions, meta
Mono scale · Geist Mono For labels, code, data, technical chrome
CS · forged.gold · 2026 Mono label 11px w500 0.16em Section labels, all-caps
CS · forged.gold · 2026 Mono data 12px w400 0 Code, dimensions, IDs
CS · forged.gold · 2026 Mono micro 10px w500 0.14em Tags, chips

Body in context

Crafter Station builds in public. We ship before we are ready, then iterate until it earns its place. The system you are looking at — every mark, every gradient, every micro-interaction — is the same system that ships our products, our community pages, and our open source tools.

Body 16/26 · Geist 400 · letter-spacing -0.005em · max-measure 64ch

06 Color system

Six tokens. Two themes.

Forged gold as the only accent. Obsidian and titanium as the resting state. Light theme inverts surfaces but keeps gold dominant in the mark.

Color system
Forged gold #FFC107
Obsidian #0D0D0D
Titanium #141414
Gold highlight #FFD435
Gold ember #DDA607
Gold deep #C68B05
07 Clear space

Breathing room is non-negotiable.

Minimum clear space equals the height of the mark itself (x). Min size 16px to maintain legibility at favicons.

Clear space & min size
16px
24px
32px
08 Applications

The mark in the wild.

Five canonical contexts: app icon, laser engraving, embroidery, metal badge, holographic UI. Each respects the geometry above.

Applications — Examples
iOS app icon mockup
App icon
Laser engraving on brass
Laser engraving
Gold satin-stitch embroidery on black cotton
Merch — Embroidery
Brass enamel pin product shot
Metal badge
Holographic UI mockup with grid and gold glow
Holographic UI
09 Patterns

Decorative systems derived from the mark.

Procedural · CSS-native

Tile mark Mark repeated at fixed grid
Halftone dots Dot density scales with depth
Diagonal weave 45° crossed line repeat
Topo lines Concentric expanding circles
Gold stripe Thin gold pinstripe
Fine grid Technical drawing baseline
Forge noise Procedural film grain
Constellation Anchor points + linking arcs

Photographic textures · generated

Leather hand-tooled Tactile · merch · packaging
Brass dust Hero backgrounds · social
10 Iconography

A consistent glyph set.

24×24 grid. 2px stroke. Round caps and joins. Current-color so icons inherit theme automatically.

Grid 24 × 24
Stroke 2 px
Caps round
Joins round
Color current
Ship
Craft
Hammer
Code
Terminal
Lightning
Compass
Sparkle
Layers
Cube
Spark
Globe
11 Motion

Motion reveals state, never decorates.

Ease out cubic-bezier(0.16, 1, 0.3, 1) Default · enters, reveals
Ease in-out cubic-bezier(0.65, 0, 0.35, 1) Page transitions, modals
Spring cubic-bezier(0.34, 1.56, 0.64, 1) Buttons, micro-interactions

Duration scale — live demos

XS 120ms
Hover · focus echo
SM 200ms
Tap · click
MD 320ms
Card reveal
LG 520ms
Modal · sheet
XL 800ms
Hero entrance

Principles

  1. Animation reveals state, never decorates. Every motion answers "what just changed?"
  2. Respect reduced motion. All animations gate behind prefers-reduced-motion.
  3. Default fast. 200ms unless there is a reason. Slow = special.
  4. One motion per interaction. Compound animations confuse — pick the dominant one.
  5. Gold for affirmative. Confirmations, successes, brand emphasis use forged gold.
12 Imagery

Show the act of making.

Four photography treatments. Real hands, real workshops, real light. No stock people. Gold appears as accent, never as dominant frame element.

Obsidian portrait obsidian
Obsidian portrait

Subject in deep darkness, rim of forged gold

filter: contrast(1.05) saturate(1.05)
Gold dust golddust
Gold dust

Andean landscape · golden hour · atmospheric dust

filter: saturate(1.1)
Workshop photo workshop
Workshop photo

Hands at work · brass · shallow depth of field

filter: contrast(1.05) saturate(1)
Documentary B&W bw
Documentary B&W

Real workspace · grain · single light · Magnum

filter: contrast(1.05)

Photography principles

01 Show hands, not heads

Photos of the act of building beat portraits.

02 Forge over polish

Embrace texture: bricks, wood, steel, paper, leather.

03 No stock people, ever

Real faces from the community or no faces at all.

04 Gold accent ≤ 15% frame

Gold appears as accent in the photo, never dominant.

13 Voice & tone

How Crafter Station sounds.

Direct, in the open, bilingual. We ship before we hedge. We say craft, not synergy.

Corporate Not us

"We leverage cross-functional synergies to drive scalable impact across our stakeholder ecosystem."

Marketing Not us

"Unlock the next level of productivity with our revolutionary platform built for the future of work."

Crafter Station Us

"We build, then ship. The site you're reading is the product. Code is in the open. PRs welcome."

Brand voice attributes

01 Direct

Verbs first. No hedging.

02 In the open

Ship logs, not press releases.

03 Bilingual

ES + EN mix naturally — code-switch where it lands.

04 Maker-first

Examples, demos, code. No abstract jargon.

05 Personal

Real people behind the brand. First names, real Twitter.

Glossary · words we use vs don't

We say

  • ship · ship in public
  • build · build with us
  • craft · crafted in Lima
  • tools for makers
  • open source
  • community

We avoid

  • revolutionary · disruptive
  • synergy · stakeholder
  • solutions · ecosystem
  • leverage · enable
  • cutting-edge · world-class
  • AI-powered (without context)
14 Brand pillars

Five values, one repeatable loop.

01

Craft.

Make things by hand. Care about the seams.

e.g. Hand-coded SVG paths, not generated images.
02

Ship.

Done before it's perfect. Iterate in public.

e.g. v0 → v1 in 48h. v2 lives in PRs.
03

Repeat.

Compounding effort. Showing up daily.

e.g. 5 hackathons / year, 1 product / month.
04

Open.

Code on GitHub. Decisions on Twitter.

e.g. Brand sheet you're reading is OSS.
05

Latam.

Rooted in Lima. Building for the Spanish-first web.

e.g. Bilingual ES + EN docs, code switching welcome.
15 Social templates

Ready-to-export canvases.

OG image for share metadata, Twitter banner, Instagram square, IG/FB stories. All grid-snapped to the same R as the mark.

16 Don'ts

What never to do with the mark.

Six anti-patterns. If you find yourself doing one of these, use a variant from section 03 instead.

Don't stretch

Preserve aspect ratio at all times. Stretching breaks the geometric construction.

Don't recolor

The mark is forged gold #FFC107. Off-brand colors dilute recognition.

Don't rotate

The mark is read upright. Tilting reads as decorative, not as identity.

Don't drop-shadow

The mark already carries its own contrast. Shadows weaken it.

Don't low contrast

Avoid placing gold on yellow, tan, or low-contrast backgrounds.

Don't outline

Don't add strokes to the filled variant. Use the monoline variant instead.

Crafter Station · Brand System v1 Forged gold #FFC107 2026-05-20