Brand + web system

Craftly Studio, broken down.

The studio's own identity and site — the system Craftly ships client work with. This page takes it apart: the palette observed from the live site, the type, and the repeating chrome. Exact design tokens land from the repo/CSS (manifest).

In my words

Why it's mine

Craftly is my studio — the brand, the site, and the offer are all mine. I built it to be the front door for the way I actually work: one person taking a project from brand to shipped build, no handoff, no account-manager layer.

So the identity had to sell that directly — a dark, confident stage with a single warm accent, copy that names the pain (“no hiring headaches”), and a system tight enough that I can stand up a new client site on it fast. This teardown reads that system back off the live page.

Role: Founder — brand + build
Since: 2025
Scope: Identity · site · offer
Stack: WordPress · Figma

The originals

The finished outputs, first

The live studio site (craftly.studio).

Color

Constants, and what varies

Sampled from the live site: a near-black stage, one warm orange action, a grape highlight. Exact hex tokens confirm from the repo.

Constants

Stage ink

#0f0f0f

Panel

#1a1a1a

Action orange

#f97316

Highlight grape

#a855f7

Paper

#ffffff

Muted

#9ca3af

Type

Typefaces + specimens

Design + Dev. No Handoff.

Display / hero — Grotesque black.

CRAFTLY.

Wordmark — Geometric sans (orange, tight tracking).

Closest-match stand-ins for the page; the production type comes from the site's CSS tokens.

The chrome

Repeating components, named

The repeating furniture on the studio site.

Nav + Book-a-call

Left wordmark, center links, a warm CTA pinned right — same on every page.

Hero

Big claim in display black, one accent word, a two-line promise, dual CTA.

Trust bar

“Trusted by 150+ startups & SMEs” avatar stack under the hero.

Service cards

The offer split into cards — brand, web, product, data.

Pricing / subscription

The single-subscription model, framed against hiring a team.

The asset set

The vocabulary the system draws on

Components

NavHeroTrust barService cardPricingFooter CTA

Palette

Tools

FigmaWordPressDiviHTML/CSS

Studio lexicon

How the offer talks

No handoff

One person, brand to build — no design-to-dev translation loss.

MVP

Minimum viable product — the shippable first cut Craftly stands up fast.

GTM

Go-to-market — brand + site + launch treated as one motion, not three vendors.

Design system

The reusable token + component kit each client site is built on.

Ship velocity

How fast a validated change reaches production — the studio's real pitch.

Runway

The founder's cost/time budget; the single-subscription model is priced against it.