WrenfieldEstate Law Design system
Appearance
The site →

03 · Molecules

Molecules

Two or three atoms doing one job between them. A molecule owns its internal spacing and nothing outside itself; where one of these is filled from the site's own data, the specimen is filled from that same data, so what is shown is a real attorney and a real practice area rather than lorem.

Source src/assets/css/wrenfield.cssRule A molecule owns its inside, never its outside

Fields

A label over a well. The label is a caption rather than a heading: small, weighted, sentence case, and always a real label element bound to the control.

Single field

The unit every form is made of. 1.35rem of clearance underneath, set by the field and not by whatever follows it.

.field

Two to a line

Email and phone travel together, so they share a row as soon as there is 26rem to share.

.row2

Below 26rem they stack, and the gap between them closes to nothing, because two stacked fields already have the field's own clearance between them.

Cards

Four card shapes and one rule holding them together: a hairline all round, a 4px brand rule along the top, and the whole card as the target when there is only one thing in it to click.

Service card

A heading and a sentence. Not a link — this one is read, not followed.

.card

Trust administration

What a successor trustee has to do, in what order, and which of it actually needs a lawyer.

Probate

Eight to eighteen months in California, and the parts of it that can be shortened.

Office card

The same card carrying an address. The number is set in the mono voice because it is a number, and the standing note sits under it at the smallest size on the card.

.card .office-addr .office-tel .office-note

Santa Monica

1010 Ocean Park Boulevard, Suite 300
Santa Monica, CA 90405

310-555-0142

By appointment. There is no charge for the first conversation.

San Jose

99 South Almaden Boulevard, Suite 600
San Jose, CA 95113

408-555-0119

By appointment. There is no charge for the first conversation.

Practice area card

A card that ends in a list. The list's rules do the separating, so it needs one at the top and none under the last item.

.area .area-list

Estate planning

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

  • Revocable living trusts
  • Wills, powers of attorney and directives
  • Funding the trust

Trust administration

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

  • Successor trustee representation
  • Notices and trust certifications
  • Trust accountings

Practice area row

A thumbnail beside its text, used on the landing page. The thumbnail slot holds its own square whether or not a picture has arrived.

.pa .pa-thumb .pa-text

An older couple's hands resting together beside an adviser's paperwork. Estate planning The 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 administration What happens after. The notices, valuations, transfers and accountings a successor trustee is required to produce.

Attorney card

A portrait at 4:5, a name, a role, one line of what they do and where, and a short introduction. The call to action is pinned to the foot so it lines up across a row however long the introductions run.

.pcard .pcard-media .pcard-cta

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

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

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

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

Read more

The whole card is one anchor, so there is no second target inside it and nothing to tab past. The arrow is a span, not a link.

Who card

The small form of the same idea, used on a sub page to say which attorneys do this work. A round crop, a name, a role.

.whocard

Daniel Wrenfield Founder Claire Osei Co-founder Elliot Vance Attorney

Post card

16:9 over text, the area in the mono voice above the title, the date pinned to the foot. The whole card is the link.

.postcard

Probate What probate actually costs in California The statutory fee is a percentage of the gross estate, which is why a mortgaged house costs what an unmortgaged one does. Trust administration Is my house actually in my trust? A trust that was never funded does none of the work it was written to do, and this is the commonest failure we see.

Rows

Where the site would use a card and does not. A row is a card with the box taken away and the rule left behind, and it is the right answer whenever the things being listed are read in order.

Area list row

A name and a sentence, ruled between. On a wide screen the name takes a fixed track so the sentences line up.

.arealist

Fee line

A term and its answer, as a description list rather than a table, because there are two columns and one of them is a label.

.matter-line

Flat fee
$4,800 for a couple's revocable trust, will, directives and deeds
Hourly
$525, billed in tenths, for administration and anything contested
Statutory
Set by the Probate Code as a percentage of the gross estate

Numbered step

The same sequence in two grounds. On paper the numeral is the brand; on the panel it is the panel's own accent, because the light green is unreadable there.

.steps .thanks-steps

  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.

On the panel

The panel version of the same list.

.section.after .steps

  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.

Declined work

What a person will not take, said plainly. A heading and a sentence, ruled between, no icon and no apology.

.declines

  • Contested trust litigation

    We draft to prevent it and we administer around it, but a fight that has already started belongs with a litigator.

  • Anything with a deadline this week

    A plan written in a hurry is the plan that fails. If there is a filing date, say so and we will tell you who can meet it.

Roster facts

One line of facts held apart by their own rules rather than by dots, so a wrap never leaves an orphan separator.

.ros-meta

Admitted 2007CaliforniaCertified specialistSanta Monica

Quotations and figures

Where the site raises its voice, it does it in the serif italic and it does it once.

Endorsement

A quotation with the marks supplied by CSS rather than typed, so nobody has to remember which way they curl.

.endorsement

He told my mother what the process would cost before she asked, which no one else had done.
R. Alvarez Successor trustee Pasadena Client, 2023

Pull

One sentence lifted out of a section. A rule down the left in the brand and nothing else.

.pull

A trust that was never funded does none of the work it was written to do.

Figure

A fact over its label. The answer is set in the serif and never hyphenated, because these hold short tokens like “7th Cir.” that must not break.

.fig .fig-n .fig-l

2007

Admitted

California

Jurisdiction

9th Cir.

Courts

English, Twi

Languages

Credential

An institution, what was earned there, and when. Three ranks of type doing the work a table would otherwise do.

.mark-inst .mark-cred .mark-year

UCLA School of Law

Juris Doctor, Order of the Coif

2007

State Bar of California

Certified specialist, estate planning, trust and probate law

2014

Board of Legal Specialization

Controls

The small assemblies that change what is on the page rather than saying something.

Filter bar

The archive filter: a caption and a row of chips. It is hidden entirely when script has not run, because a filter that cannot filter is a lie.

.filterbar .filterchips .postcount

Filter by practice area

Showing 27 pieces

Nothing found

The empty state, in the serif rather than in a box. It is a sentence, not an error.

.postnone

Nothing filed under that yet.

Menu entry

A name over a role, the way a directory entry reads. Used in the attorneys menu in the bar.

.navdrop-name .navdrop-role

All attorneys