Study 01 · Branding and typography
The identity of a premium residential plumbing company, set out like the front page of an architect's drawing set: evergreen ground, limestone paper, brass hairlines, numbered sheets. The specimens below use the live type switch above unless a specimen is labelled with its own typeface.
A monoline "A" built from two legs and a pipe-like crossbar. The crossbar is drawn as two parallel lines (the pipe walls) that run through the right leg and end in a short flange, so the letter reads as a roof apex and a pipe run at the same time. Every stroke is 2 px on a 36 px grid with mitred joins and square caps. The wordmark is live text, never an image.
Primary lockup · on evergreen
APEXPlumbing Co.Primary lockup · on limestone
APEXPlumbing Co.Stacked lockup · for narrow or square spaces
APEXPlumbing Co.Mark alone · evergreen on limestone
Mark exploration
M1 · Selected
M2 · Union
M3 · Open pipe
M1 keeps the pipe visible at small sizes. M2 reads as a coupling but loses the pipe walls. M3 is the quietest but looks like an ordinary "A" below 24 px.
App and favicon sizes
Evergreen tile, brass mark. At 16 px the flange and pipe lines merge into one bar, which is acceptable for a favicon.
Construction and rules
Solid evergreen at every width, 76 px on desktop and 64 px on phones, with a hairline in brass at 35% opacity. The phone number is a text link in serif numerals with a divider; the quote request is the one brass button. Active navigation is a 2 px brass underline 10 px below the text. These are fixed-width specimens, so they look the same at any window size.
Desktop · 1100 px and up · evergreen
Desktop · inverse variant on limestone (for pages with a light top, e.g. print or inner pages)
Tablet · 768 to 1099 px · logo, phone link and menu button; navigation moves into the sheet
Phone · under 768 px · closed, open sheet, and the fixed call bar
Two pairings, each set with identical content, sizes and spacing so the differences are the typefaces and nothing else. Headings use weight 400 for Newsreader and 500 for Source Serif 4, because Source Serif 4 is lighter in colour than its numbers suggest and needs the extra weight to hold the same presence.
Nashville, Tennessee · Residential plumbing
Repairs, installations and emergency help. We explain the options and the cost before any work begins.
Small leaks waste water and can cause costly damage behind walls and under floors. We locate the source and repair it with minimal disruption. Sentences are set at 17 px on a 1.6 line height.
Nashville, Tennessee · Residential plumbing
Repairs, installations and emergency help. We explain the options and the cost before any work begins.
Small leaks waste water and can cause costly damage behind walls and under floors. We locate the source and repair it with minimal disruption. Sentences are set at 17 px on a 1.6 line height.
| Role | Desktop / mobile | Weight | Line height | Tracking |
|---|---|---|---|---|
| Display (hero H1 only) | 64 px / 34–38 px | 400 (A) · 500 (B) | 1.04 | −0.018em |
| H1 (page headers) | 60 px / 36 px | 400 · 500 | 1.05 | −0.015em |
| H2 (section titles) | 44 px / 30 px | 400 · 500 | 1.1 | −0.01em |
| H3 (feature titles) | 28–40 px / 24–32 px | 400 · 500 | 1.15 | −0.005em |
| Index and step numerals | 30–72 px, serif lining figures | 300 | 0.9–1 | −0.02em |
| Lead paragraph | 20 px / 18 px | 400 | 1.5 | 0 |
| Body | 17 px | 400 | 1.6 | 0 |
| Navigation | 15 px | 500 | 1.2 | +0.01em |
| Buttons | 15 px | 600 | 1.1 | +0.02em |
| Labels and eyebrows | 11–12 px caps | 600 | 1.3 | +0.16em |
| Form labels / small print | 15 px / 14 px | 600 / 400 | 1.3 / 1.5 | 0 |
Recommendation
Judged on the rendered specimens above and on the hero and services studies (switch type at the top of any study to see the same layout in both):
Open question for the implementation phase: Newsreader at weight 400 is lighter in colour than Source Serif 4 at 500, so small serif text (below 24 px) should use weight 450 to stay comfortable. Check this on a real phone in sunlight before final sign-off.
Evergreen and limestone carry the identity. Brass is a hairline and a button on dark. Oxblood belongs to emergency content only. Contrast ratios are calculated from the hex values (WCAG relative luminance).
Intended distribution of a typical page
Evergreen 38 · Limestone 46 · Stone 6 · Sage 4 · Brass 3 · Oxblood 3 (percent of surface area, approximate).
Square, 48 px tall (52–64 px for the main calls), one weight. Phone is always the primary action; the quote request is the secondary action everywhere except the header, where it is the single brass button. Hover and focus states are shown as static simulations.
Text link
About drain cleaningEmergency (oxblood section)
Emergency line · (615) 555-0100Read the safety stepsLabels sit above fields. Inputs are 52 px tall, square, with a 1 px evergreen border at 50% and a lift-coloured fill. Focus is a 3 px evergreen ring with a 2 px offset (brass-light on dark). Errors use a 2 px oxblood border, a warning triangle and plain text, never colour alone. All inputs, selects and buttons share the same heights.
Validation and submit
Success state, in the same panel: "Your details look valid, but this demo has no form service connected, so nothing was sent. Please call us instead."
The "drawing sheet" language is carried by small, consistent devices: sheet labels, a numbered service index, large step numerals and hairline rules. They organise the page; they are never decoration.
Sheet label and rule
Eyebrow · Brass Deep on light
Home / Services / Drain cleaning
Demonstration contentService index numerals · 01 to 07
Process steps · 1 to 3
Natural light, warm or neutral tones, real work and real fixtures, no cyan or artificial blue. These six free Pexels photographs are the closest honest matches found for this study, with candid notes on where each falls short. They are placeholders for the final art direction, not final photography.
Gaps this set does not fill: a bright, natural-light hero of a technician working in a premium bathroom or kitchen at 1,800 px or wider; a US-style water heater installation; a tasteful emergency or water-damage image; and a neighbourhood image for the service-areas page. A photo shoot, or a more patient search, would be needed for these.