Clckwebstudio.
ServicesWorkAboutContact
Book a call
Clickwebstudio — Brand System v1.0
Portland · 2026
The Clickwebstudio brand system
A studio,
in one click.
Clickwebstudio.
Primary lockup
“Click-dot” wordmark
Use on paper / ivory
“Click-dot” wordmark
Use on paper / ivory
The idea
One deliberate dot. The moment a cursor meets intent — the click that starts everything we make.
Personality
Editorial, precise, warm.
Accent
Signal Orange
Typeface
Fraunces & Geist
(01) — Symbol
One symbol. Bold,
simple, unmistakable.
The Clickwebstudio mark is a solid Signal Orange disc cradling a cut-out cursor — the split-second of a click made permanent. High-contrast, geometric, legible at 16 pixels on a favicon and 16 feet on a van. One shape, one move, one moment.
Primary symbol · S1bOn papercursor cut · bold×1.0
Inverse · S1bOn inkink cut on signal01 / 01
Primary lockup — symbol + wordmark
On paper · horizontal
Clickwebstudio
On ink · horizontal
Clickwebstudio
On signal · horizontal
Clickwebstudio
Scale · works from favicon to signage
Symbol first. The disc is the primary — big, bold, catchy. The wordmark pairs beside it in horizontal lockups, and stands alone where the mark has already set the scene (app screens, repeat appearances, contextual surfaces). Never recolor the cursor cut-out. Never rotate the shape.
(01.y) — Wordmark variations
Six ways the wordmark
shows up. One family.
Paired with the symbol — or on its own when space demands. The wordmarks below hold the tone of the brand in text. Pick the variation that fits the surface; the symbol keeps the family honest.
Variation · 01
Editorial wordmark
Primary. A Fraunces setting where the “click” dot replaces the i tittle. Warm, quiet, unmistakably ours.
01.a · primaryon paper
Clckwebstudio.
fraunces · 300 · opsz 144×1.0Variation · 02
Cursor bracket
A cropped frame with a pointer inside — the split-second before a click lands. Works small, works on signage, works as a favicon.
02.a · mark + texton inkgeist · 60002 / 06
ClickwebstudioDesign · Build · Grow
Variation · 03
Orbit monogram
The click as an orbiting moment — one solid dot entering a dashed ring. Feels alive. Use for loaders, avatars, and motion.
03.a · animated-readyon paperrotates 30°/s03 / 06
ClickwebstudioEst. 2015
Variation · 04
Stencil CW
A compact monogram block for where space is scarce — app icons, embroidery, foil stamps. The dot lives in the corner like a signature.
04.a · monogramon signalsquare — 1:104 / 06
cw
ClickwebstudioDesign studio, est. 2015
Variation · 05
Kinetic underscore
A modern grotesk cut with a loud underline bar — for posters, title cards, and anywhere the mark needs to punch above its weight.
05.a · expressiveon paper
clickwebstudio
geist · 70005 / 06Variation · 06
Technical stamp
A boxed, spec-sheet lockup for contracts, receipts, invoices, and back-of-house surfaces. Mechanical — reads as a part number.
06.a · document markon papermono · 50006 / 06
Clickwebstudio
System / ID 2015 · v1.0
(01.x) — Construction
How the dot
gets placed. A rule per measure.
a · cap 0.72×b · dot 0.34×c · kern −35d · period italic
Clck.
- 01The dot replaces the lowercase i.In the primary wordmark, the tittle is never drawn — the filled dot stands in. It is the logo.
- 02The dot is Signal Orange, or full ink.Never white, never outlined, never another hue. When the background is orange, the dot becomes ink.
- 03Italic period closes every primary lockup.The italic full stop reads as a seal. Only the period is italic — the rest of the word stays upright.
- 04Clear space equals one cap height.Keep a one-cap buffer on all sides. Never crop into the dot or period.
- 05Do not re-typeset the logo.It isn't Fraunces — it's our cut of Fraunces, with custom spacing. Always place the artwork file.
- 06Never tilt, outline, or gradient.The mark is quiet on purpose. Let the rest of the design do the performing.
Clear spaceMinimum buffer
Clck.
Minimum sizeReads cleanly at 16px
Cl
72px · print
Cl
40px · standard
Cl
22px · dense ui
Cl
14px · min
Rule 02Don't
Clck.
No other hue for the dot.
Rule 06Don't
Clck.
No italics on the wordmark. No gradients.
Rule 04Don't
Clck.
Never crowd the mark — honor the clear-space rule.
(02) — Color system
One loud accent,
three quiet neighbors. No gradients.
Signal Orange
Accent · Primary
HEX#FF5B1F
RGB255 · 91 · 31
OKLCH0.72 / 0.18 / 50°
CMYK0 · 72 · 92 · 0
PANTONEOrange 021 C
Deep Ink
Text · Surface
HEX#14130F
RGB20 · 19 · 15
OKLCH0.17 / 0.01 / 80°
CMYK70 · 65 · 75 · 90
PANTONEBlack 6 C
Paper
Base · Default
HEX#F4F0E6
RGB244 · 240 · 230
OKLCH0.96 / 0.02 / 85°
CMYK2 · 3 · 8 · 0
PANTONEWarm Gray 1 C
Stone
Support · Tint
HEX#ECE7D8
RGB236 · 231 · 216
OKLCH0.92 / 0.02 / 85°
CMYK6 · 6 · 14 · 0
PANTONEWarm Gray 2 C
Primary surface
60%
Type & UI
25%
Cards & rules
10%
Accent only
5%
Signal Orange is a punctuation mark, not a background. Use it on the dot, on a single CTA, on a hover state, on a caught-eye detail. Large orange fields are reserved for hero posters and campaign moments — never for full-page backgrounds in product UI.
(03) — Typography
Fraunces for feeling.
Geist for work. Mono for the receipts.
Display · D1
Fraunces / 300 / opsz 144
A studio,
in one click.
in one click.
Size96 / 120px
Track-3.5%
Leading0.95
Soft20 / italic 100
Headline · H1
Fraunces / 400 / opsz 72
Websites that actually work — for the people who use them.
Size40 / 56px
Track-2%
Leading1.0
Body · B1
Geist / 400
We're a small team of designers, developers and marketers building websites, brands and e-commerce stores that feel as good as they convert. Ten years in, still obsessed with the details.
Size16 / 18px
Track-0.3%
Leading1.55
Small · S1
Geist / 500
Book a consultation · Portland, OR · Now accepting Q3 projects · Reply within one business day.
Size13 / 14px
Track-0.3%
Leading1.5
Mono · M1
JetBrains Mono / 500
(01) — System / ID 2015 · v1.0 · Revision b
Size11 / 12px
Track+14%
CaseUppercase
Display · Frauncesvariable
Aa Aa
Light · 300
Regular · 400
Italic · 400
Variable · opsz 9–144
SOFT 0–100
Body · Geist
Aa
300 · 400 · 500 · 600 · 700
System · Mono
Aa
JetBrains
400 · 500
400 · 500
The italic is sacred. Fraunces italic is our emotional register — use it on single words, never whole sentences. When you do, color it Signal Orange. Think of it as a spoken emphasis, not a style.
(05) — Voice
How we sound
in a sentence. Plain, warm, exact.
Trait
We are
We aren't
Plainspoken
Say the thing. Short sentences. Real verbs.
Corporate throat-clearing. “Leverage”, “solutions”, “unlock”.
Warm
A person wrote this, for a person. We like our clients.
Overly familiar. Emojis in proposals. Fake enthusiasm.
Specific
Numbers, names, weeks. 38% lift. Week 6. Portland.
“Best-in-class.” “Industry-leading.” Any vague superlative.
Confident
We have opinions. We share them early.
Hedging. “Just.” “Kinda.” “We think maybe.”
Curious
We ask questions before we answer them.
Selling. Pitching. Pretending we already know.
Websites that actually work — for the people who use them.
Hero · Home
A 30-minute call. No slide deck. No salespeople.
CTA · Contact
We don't lock you in. We'd rather earn the renewal.
Plans · Retainer
(06) — Applications
The system, out
in the wild. A short tour.
Clckwebstudio.
Ada WhitfordFounder · Design
ada@clickwebstudio.com
+1 503 555 0188
ada@clickwebstudio.com
+1 503 555 0188
Langley, BC
Canada
Canada
Stationery · Business card 3.5 × 2 inRecycled 18pt warm-white
A studio,
in one
click.
May 14 · 6PM
1420 NW Thurman
1420 NW Thurman
rsvp→
Campaign · Open-studio posterA2 · risograph orange + black
Websites that actually work.
Digital · Site header + heroDesktop 1440 · light
click.
web.
studio.
web.
studio.
Merch · Team teeSingle-color screen print
Clckwebstudio.
INVOICE · 2026-014
Issued · 12 Apr 2026
Due · 26 Apr 2026
Issued · 12 Apr 2026
Due · 26 Apr 2026
Studio · Retainer · Apr$6,000.00
SEO · Content sprint$2,400.00
Build · Store migration$4,800.00
Total · USD$13,200.00
thanks — ada.
Document · InvoiceLetter · PDF
Now booking · Q3 2026
Say hi. Get a site.
clickwebstudio.com/hi →
Social · 1200 × 1200Instagram / LinkedIn