Law firm · Dark

Redline

Film-noir black and white with grain, tight uppercase grotesque and a single reviewer's-pen red that strikes through and corrects a contract as you scroll.

Palette

--bg#0c0c0c
main background
--bg-2#141414
alternating bands and panels
--papel#f1ede9
contract sheet
--tinta#1a1a1a
sheet text
--texto#f2f2f0
titles on dark
--texto-2#8a8a88
paragraphs, inactive items
--linha#282727
dividers, button borders, inactive words
--acento#c2272d
redline: strikes, underlined insertions, margin notes (darkened from #d23a3f to 5:1 on the paper)

Typography

Display: tight neo-grotesque, weight 600, uppercase, tracking -0.03em, line-height 0.95; hero at clamp(2rem,4.2vw,3.6rem); sector list at clamp(3rem,7vw,6rem) — suggestions: Inter Tight / Schibsted Grotesk.
Body: same family 400, 13–14px, --texto-2, blocks of 3 lines.
Support/labels: mono 9–10px uppercase, tracking 0.14em (nav, key-value tables, indexes, deadlines) — suggestions: IBM Plex Mono / JetBrains Mono.
Document: book serif 400 for the contract body and small caps/uppercase 600 for clause titles — suggestions: Newsreader / Libre Caslon Text.
Treatments: paragraph symbol inside a thin circle as a "drop cap" before headlines; "01/02/03" indexes in large thin display; numbers in tabular mono.

Sections

Nav — triangle + uppercase name at 11px on the left; 3 centered mono links; contact and a link with an arrow on the right.
Hero — full-bleed looping B&W video (hands signing under a desk lamp, night city in the background) with grain; 2-line headline at the bottom left with the symbol; bottom ruler with mono metadata.
Practice areas (pin) — three stacked panels; each: large index on the left, 3-line uppercase title, paragraph, outline button; on the right a mono key-value table; background with a B&W photo that swaps; progress tabs at the base.
Method + contract — left: label, title, list of 3 steps with a deadline on the right and a square marker on the active one, closing note; right: cream contract sheet that rises and receives redlines.
Sectors — 4 giant words in a numbered list; inactive in gray, active in white; photo thumbnail appears in the row; mono tags on the right.
Partners — B&W portrait on the left; label, 2-line title and list of names with mono license number on the right; active name swaps the portrait.
Contact — night B&W background, headline with symbol on the left, thin-line form on the right.
Footer — brand + mono columns.

Motion and interaction

Grain: continuous → 128px noise canvas reapplied at 12fps, opacity 0.08, mix-blend overlay.
Scramble: entering the viewport → mono labels and indexes scramble characters for 500ms before settling.
Practice areas: scroll scrub with pin → the next panel enters via opacity + y 40, background photo crossfades with scale 1.05→1.
Redline: scroll scrub with pin → strike crosses the term (scaleX 0→1), underlined insertion appears letter by letter, margin note with a diagonal line draws itself.
Sectors: hover/scroll → active word goes from --linha to --texto, thumbnail reveals via clip-path inside the row.
Partners: scroll → active name swaps the portrait with a 500ms crossfade.
Tech: GSAP ScrollTrigger + Lenis + homegrown SplitText-like.

Components

Outline button: 1px light --linha border at 30%, 9px uppercase mono, arrow, radius 0.
Mono key-value table: --texto-2 label on the left, value on the right, 1px line between rows.
Section index: display 300 number at 48px.
Contract sheet: cream paper, soft shadow 0 30px 60px rgba(0,0,0,.5), wide margins, signature lines.
Margin note: 8px mono text in --acento with a diagonal stroke to the term.
Sector row: mono number, giant word, mono tags, 1px divider.
Form field: only a 1px bottom border, mono label above.