Agency · Landing
Hard-edged agency landing in raw monospace: 3px rules, offset hard shadows, one yellow block, zero border-radius, and no apologies.
| Color | Hex | Use |
|---|---|---|
| bg | #f2efe9 | page background |
| ink | #111111 | rules · text · shadows |
| ink-2 | #333333 | body copy · nav |
| muted | #6b6456 | eyebrows · meta |
| yellow | #ffdd00 | THE only accent |
| white | #ffffff | fact cards · marquee |
| Type | Face | Spec |
| face | mono only | 100% of the page |
| h1 | clamp 46→92 | 800 · −0.055em · 0.92 |
| proj name | clamp 20→32 | 800 · −0.04em |
| labels | 10–12 · 700 | +0.08–0.14em |
| Shape | Value | Use |
| radius | 0 | everywhere |
| borders | 2–3px ink | rules · buttons · rows |
| shadow | 5px 5px 0 | hard offset · press-down |
| gutter | 26px | max-width 1180 |
MISSION Agency landing that refuses to look like an agency landing.
Raw mono, 3px rules, offset shadows, one yellow block.
TYPE 100% monospace. h1 clamp(46,7.2vw,92)/800 −0.055em upper.
Labels 10–12/700 +0.1em uppercase.
COLOR bg #f2efe9 · ink #111 · ink-2 #333 · muted #6b6456
yellow #ffdd00 — ONLY on CTA, hero box, footer box, hover
SHAPE radius 0 everywhere · borders 2–3px · shadows 5px 5px 0,
hover press-down (translate 2px, shadow 2px)
COPY "WE BUILD / UNBORING / WEB STUFF." · "No templates. No
'hmm, let me check the brand guidelines.'…"
FULL tokens, marquee spec, do/don'ts & checklist →
ai-guide.md (copy button fetches the whole file)
<!-- excerpt — full file: reference.html (self-contained) -->
<section class="hero">
<div class="eyebrow">Independent web studio · Est. 2019</div>
<h1>We build<br /><span class="box">unboring</span><br />web stuff.</h1>
<p>No templates. No “hmm, let me check the brand
guidelines.” No stock-photo hero sections.…</p>
<div class="hero-actions">
<a class="btn yellow" href="#">See the work</a>
<a class="btn" href="#">Read the process</a>
</div>
</section>
<div class="marquee">
<div class="track">Portfolio ◆ Work ◆ Process ◆ …</div>
</div>