WrenfieldEstate Law Design system
Appearance
The site →

04 ยท Organisms

Organisms

A whole region of a page. An organism decides its own padding, its own ground and its own behaviour on a handset, which is why almost every one of them is a band the full width of the window with a measure held inside it.

Source src/assets/css/wrenfield.cssRule Full bleed ground, held contentBehaviour src/assets/js/main.js

Openers

Four ways a page can start, and a page picks exactly one. Which one it picks is the strongest signal the site sends about what that page is for.

Full screen hero

The home page and every practice area page. A photograph or a clip behind, the copy on the left, the intake card on the right, and the whole thing a viewport tall on a desktop.

.xhero .xhero-media .xhero-copy .xhero-panel

/practice-areas/probate/

Two scrims rather than one, so the clip is not paying for the copy's legibility on its own: a flat wash over the whole frame and a gradient rising from the bottom. The eyebrow is mixed out of the panel accent and the panel text because it sat at 4.72 against the brightest frame of the clip, which is not enough.

Brand band

A flat green band with the copy on it. Used where a page needs an opener but has nothing to photograph. The button inverts: paper fill, green text.

.hero

Trust administration

You have been named successor trustee

There is a sequence, and most of it has a deadline. We will tell you which parts actually need a lawyer.

Request a consultation

Attorney hero

A cut out figure on a dark ground, the name at 5.5rem, the practice line in the mono voice underneath. The figure carries no frame because it is a cut out on transparency.

.ahero .ahero-lockup .ahero-figure

/attorneys/daniel-wrenfield/

Plain band

No hero at all: an eyebrow, an h1, and where the page has something specific to ask for, one button under it. This is what the layout gives a page that does not declare a hero.

.band .band-cta

Writing

Questions we are asked, answered once and properly

Book a consultation

Sections

The band is the site's unit of vertical structure: full width ground, a rule underneath, and a held measure inside. Everything below is a band with something particular in it.

Band and sunken band

The alternation that gives a long page its rhythm. Paper, then the sunken grey, then paper.

.band .band-sunken

On paper

The default ground

Sunken

One step back, for a band that holds facts

On paper

And back again

Two columns

Where a section has a claim and an explanation. Collapses to one column at 60rem, claim first.

.dual

What the first conversation covers

Forty minutes, no charge, and nobody is asked to decide anything in it.

You describe the situation. We say what we think it needs, what it would cost, and how long it takes. If it needs somebody else, we say that instead and tell you who.

Nothing is signed in that meeting. A written scope and a fee follow within two days.

Numbered section

The attorney page runs 01 to 11. A running number and a caption over an opener set at up to 48px, on the wide measure rather than the reading one.

.section .label .section-open

05 · Costs

Three fee shapes, and the one your matter will take.

Nobody is quoted a range they cannot check. Each shape below says what it covers and where it stops.

Panel section

The inverted band. Dark in both appearances, with its own accent, because the light brand is not readable on it. Used once per page at most.

.section.after .steps .after-terms

10 · After

What happens once you write.

  1. We read what you sent, usually the same day.
  2. Someone calls to book the first conversation.
  3. You get a written scope and a fee before anything starts.

Writing to us does not create an attorney–client relationship, and nothing sent before one exists is confidential.

Narrative

Four short stretches, each under its own caption, filling the width rather than running down a single measure. Used where the writing is a portrait rather than an argument.

.narrative .nar-group

Before the firm

Eighteen years in estate planning at two firms, the second of which he ran.

How he works

Family meetings first, documents second. Most of what goes wrong later is a conversation that never happened.

Away from it

Restores a 1972 Land Rover that has never once started on the first turn.

Collections

Where the site shows many of one thing. Every collection here is a grid that decides its own column count from the space it is given, so none of them has a breakpoint written into a template.

Service grid

auto-fit at 17rem. Three across on a desktop, two on a tablet, one on a handset, with nothing said about any of those numbers.

.svcgrid .card

Estate planning

The documents that decide who acts for you and who receives what, written to be used rather than filed.

Trust administration

What happens after. The notices, valuations, transfers and accountings a successor trustee is required to produce.

Probate

The court proceeding that moves property when there was no trust, or when the trust did not own it.

Practice area grid

Two across at 44rem. Each row is a thumbnail beside its text, and the whole row is the link.

.pagrid .pa

An older couple's hands resting together beside an adviser's paperwork. Estate planningThe documents that decide who acts for you and who receives what, written to be used rather than filed. Two colleagues comparing a page against a laptop. Trust administrationWhat happens after. The notices, valuations, transfers and accountings a successor trustee is required to produce. A gavel on its block, someone writing on a clipboard behind. ProbateThe court proceeding that moves property when there was no trust, or when the trust did not own it. Keys held out across a desk while a contract is signed. Property transfersDeeds, retitling and the reassessment questions that follow a change in ownership of California real property.

Area rows

The landing page's other half: a numbered row per area with its own pages listed beside it, so the whole taxonomy is on one screen.

.arearows .arearow

01

Estate planning

The documents that decide who acts for you and who receives what, written to be used rather than filed.

02

Trust administration

What happens after. The notices, valuations, transfers and accountings a successor trustee is required to produce.

Attorney roster

Not the card treatment. One person to a row, the full width, picture alternating sides, the name the largest thing on the row because on that page it is the point.

.roster .ros .ros-media .ros-body

  • A man with gray hair and a short gray beard, in glasses and a charcoal three piece suit with a dark tie, one hand in his pocket, looking toward the camera.

    01 / 04

    Founder

    Daniel Wrenfield

    Trust design and family governance

    Practiced in estate planning for eighteen years before opening the firm. Handles trust design, family meetings and the conversations nobody wants to start.

    2007CaliforniaSanta Monica

    Read more about Daniel

  • A woman with dark hair swept back, in a navy blazer over a blue and white striped shirt, arms folded, looking toward the camera.

    02 / 04

    Co-founder

    Claire Osei

    Trust administration and property transfers

    Trust administration and property transfers. Spent six years in probate litigation, which is a useful thing to have read before drafting anything.

    2011CaliforniaSanta Monica

    Read more about Claire

Attorney grid

The card treatment, used where the attorneys are one section of a longer page rather than the whole of it.

.people .pcard

A man with gray hair and a short gray beard, in glasses and a charcoal three piece suit with a dark tie, one hand in his pocket, looking toward the camera.

Daniel Wrenfield

Founder

Trust design and family governance · Santa Monica

Read more

 A woman with dark hair swept back, in a navy blazer over a blue and white striped shirt, arms folded, looking toward the camera.

Claire Osei

Co-founder

Trust administration and property transfers · Santa Monica

Read more

 A man with light brown hair and a short beard, in a gray suit with a blue shirt and tie, arms folded, looking toward the camera.

Elliot Vance

Attorney

Probate and estate administration · San Jose

Read more

The archive

auto-fill at 19rem with the filter above it. The filter hides cards with the hidden attribute, which is why .postcard has to restate its own display.

.postgrid .postcard .filterbar

Filter by practice area

Showing 3 pieces

Estate planning Do I need a living trust if I already have a will? A will decides who receives what. It does not decide whether a court has to be involved in handing it over. Probate Can I avoid probate if the estate is small? Often, yes. Whether you qualify is arithmetic rather than argument, and it is worth doing before anyone opens a file. Property transfers Does putting my house in a trust reassess my property taxes? No. Transferring your own home into your own revocable trust is not a change in ownership, so it carries no property tax consequence at all.

Fee bands

Three fee shapes, each with its own lines and a closing sentence in the serif italic.

.bands .band-item .matter-lines

Flat fee

For work whose shape is known before it starts.

Couple's plan
$4,800, including deeds and a funding letter
Single plan
$3,400

Hourly

For administration, and for anything anybody is arguing about.

Partner
$525, billed in tenths

Nobody is quoted a range they cannot check against this page.

Selected matters

A serif numeral, a name, a line of facts in the mono voice, and what actually happened.

.matters .matter

01

A trust that had never been funded

Los Angeles County · 2022 · Administration

The house had been left out for eleven years. A Heggstad petition put it back without a full probate.

02

Two siblings, one business, no agreement

Santa Clara County · 2023 · Succession

A buy–sell written after the fact, funded with insurance, signed by both before their father's diagnosis was known.

Endorsements

auto-fit at 19rem. Quotations, never headshots, never star ratings.

.endorse .endorsement

He told my mother what the process would cost before she asked, which no one else had done.
R. AlvarezSuccessor trusteeClient, 2023
I have referred him work for nine years and have never had it come back to me.
J. OkonkwoCPAOkonkwo & ReedReferral source

The marks wall

Education, admissions, associations and recognition, ruled into groups. The long form; .credcols is the short one.

.markwall .mark-group .mark-row

Education

UCLA School of Law

Juris Doctor, Order of the Coif

2007

Pomona College

BA, History

2003

Admissions

State Bar of California

Certified specialist, estate planning, trust and probate law

2014

Board of Legal Specialization

Credential columns

The short form of the same thing, at the foot of a page rather than in the middle of one.

.credcols .credcol

Admitted
  • California, 2007
  • US District Court, C.D. Cal.
Associations
  • ACTEC
  • NAELA
  • Los Angeles County Bar
Languages
  • English
  • Spanish

Figures strip

The answers over their labels, ruled between, sitting directly under an attorney hero.

.figs .figs-row

2007

Admitted

California

Jurisdiction

Certified specialist

Recognition

English, Spanish

Languages

Recognition strip

Membership marks, painted through their own alpha as a mask so they take the page's ink rather than arriving in six different brand colours. An empty slot says so with a rule rather than pretending to be a logo.

.awards .awardrow .award-mark

The ask

Every page ends by asking for the same thing in the same words. There is one form on the site and it appears in three sizes.

Intake card

The whole form. A container query sizes its heading, so the card gets smaller type when it is narrow rather than when the window is.

.intake .field .row2 .selectwrap .intake-after

Book a consultation

There is no cost for the first conversation. Read our privacy notice.

On the home page this card sits on the photograph and takes a glass ground, but only at the desktop breakpoint where it actually overlaps the image, and never for anyone who has asked for reduced transparency.

Intake, away from a hero

The same card on a page that has no hero to put it in. Smaller heading, tighter fields, the same form.

.intake.intake-mini

Ask about funding a trust

Tell us what is in the trust and what is not, and we will tell you what is missing.

Contact close

The last band on a page: a heading, a sentence, and both ways of reaching the firm side by side.

.section.contact .contact-actions

11 · Contact

Write to Daniel.

Forty minutes, no charge, and nobody is asked to decide anything in it.

Request a consultation 310-555-0142

The close

What is at the bottom of every page, in the order it appears there.

Confirmation

Where every form lands. A drawn tick, the sequence in the site's own numbering, and every office's number in the mono voice.

.thanks .thanks-mark .thanks-steps .thanks-tel

That has reached us. Somebody will call within one working day.

What happens next

  1. We read what you sent, usually the same day.
  2. Someone calls to book the first conversation.
  3. You get a written scope and a fee before anything starts.

If it is urgent