WrenfieldEstate Law Design system
Appearance
The site →

02 · Atoms

Atoms

The parts that cannot be taken apart. Each one is rendered here by the site's own stylesheet — nothing on this page is drawn twice — so a specimen that looks wrong is a component that is wrong.

Source src/assets/css/wrenfield.cssRule An atom never sets its own margin

Buttons

One filled button per page, and it is the thing the page is asking for. Everything else that is clickable is a link or a ghost. The filled button carries the brand's own glow; the ghost carries a hairline and nothing else.

Primary

The single ask. On a page that has one, there is no second filled button competing with it.

.btn

Request a consultation

Ghost

The secondary way out. Same height, same type, no fill and no shadow, so it never argues with the primary.

.btn.btn-ghost

Request a consultation Read about probate

Ordered ask-first. The ghost sits after the primary in the markup as well as on the page, so a keyboard meets them in the same order an eye does.

On the brand band

Inside a hero the fill inverts: the button takes the paper and the ground keeps the green. Same class, different ground.

.hero .btn

Request a consultation

Full width

Inside the intake card the button takes the card's whole width and grows to 62px, because it is the end of a form rather than an option in a row.

.intake .btn

Labels and small type

The mono voice does the labelling. If a piece of text is a fact rather than a sentence — a caption, a count, a phone number, a running number — it is set in IBM Plex Mono and it is letterspaced.

Eyebrow

Sits above a heading and names the section. Uppercase, .16em, muted.

.eyebrow

Estate planning

A plan your family can actually use

Label

The same device one step smaller, used inside a section rather than above one.

.label

Selected matters

Eleven years of trust administration, described without naming anybody.

Muted and lede

The two ranks of body text under the heading.

.lede .muted

What they want first is to be told plainly what they need, and what it costs to have it.

A second rank, still measured above 4.5 against the paper in both appearances.

A number

Counters and running numbers are set in the serif italic or the mono, never in the body sans, so a numeral reads as a numeral.

.ros-no .matter-n

mono, in a roster row

01 / 04

serif, beside a matter

03

Read but not seen

A repeated call to action needs a unique name for a screen reader without gaining a visible one. Both of these are on the page right now.

.vh .hp

Request a consultation about estate planning — the parenthetical is in the markup and not on the screen.

The honeypot field uses the same idea for a different reason: .hp is moved off screen by offset and never by display:none, because a field that is not displayed is a field a bot knows to skip.

Chips

A pill with a job. Three of them exist and they differ only in the ground they stand on: the archive filter on paper, the hero tag on a photograph, the practice tag on a dark hero.

Filter chip

Pressed and unpressed. It is a real button with aria-pressed, not a link pretending.

.chip

Hero tag

On a photograph. Tinted out of the panel's own text colour rather than out of the brand, because the brand is not reliably legible on a moving image.

.herotag

A tag is either a link to the page that answers it or a plain label. With an href the whole pill is the target; without one it stays an li.

Practice tag

The same pill on an attorney hero, listing what that person actually does.

.aherotags

Form atoms

Every field on the site is currently scoped to the intake card, so a specimen has to stand inside one. That scoping is a known limit and it is written down here rather than hidden: a field that is wanted anywhere else needs the selector lifted off .intake first.

Text field

A white well rather than a bordered box: no rule, a soft radius, a 1px inset shadow. 56px tall, which is a thumb.

.intake input[type=text]

Select

The same well with our own arrow, so a long value never crowds the chevron. Nothing real is preselected, and the placeholder is styled as one.

.selectwrap .intake select

Textarea

Starts at 3.9rem — the old box forty percent shorter — and grows only if the person dragging it wants it to.

.intake textarea

Focus

Three pixels of the brand, offset by two, on everything focusable. Click into the field below and then press Tab.

:focus-visible --focus

A ghost

Focus is never removed and never replaced with a colour change alone. The ring is drawn outside the element with outline-offset, so it survives on a filled control and on a transparent one.

Marks and icons

The site draws its own. Every icon is inline SVG on currentColor at 1.8 or 2 stroke, sized in ems so it grows with the text it sits in.

Wordmark

Set rather than drawn: two tspans in Literata, the first italic and semibold, the second regular and muted. It recolours with the appearance because it is text.

.wordmark .mark

WrenfieldEstate Law

Wrenfield Estate Law

The second form is the footer's, where the mark is a paragraph rather than a link and carries the brand square before it.

The icon set

Everything the site uses, at the size it uses it.

inline svg

chevron down chevron right arrow right bars close sun moon pin

Monogram

What a portrait slot holds until the photograph lands. Initials in the serif italic on the sunken ground, never an empty grey box and never a stock silhouette.

[data-monogram]

Empty media

The same honesty at the other sizes: a slot that has no picture yet holds its own frame and says so, so the grid never reflows when the pictures arrive.

.is-empty

The tick

One drawn mark, on the confirmation page only. It draws itself in under half a second and holds still for anyone who has asked for less motion.

.thanks-mark

Separators

The site separates with a line far more often than with a box. There is one rule weight, and where a heavier one is wanted the same colour is used at 2px.

Rules

A hairline in --rule, a heavier one in --text for the top of a section.

--rule --rule-2

1px --rule · between rows, under a bar, around a card
1px --rule-2 · the quieter one, inside a panel
2px --text · the top of a group, in the catalogue only
4px --accent · the top of a card

Bulleted line

The checklist bullet: a .55rem circle in the brand, sitting on the cap height rather than centred, with a rule under every item.

.checklist

  • A revocable living trust, funded, with the house actually in it
  • A pour-over will, so nothing left out falls to intestacy
  • A durable power of attorney that a bank will accept