Bay Window · marigold
Design system
Geometric rounded sans, pill controls, no borders on content, one soft shadow per raised block. Marigold carries every action; slate is ink and structure. This page is an internal reference, not part of the customer-facing site.
Logo
Direction 4b, “Lid” — one bin in three-quarter view with the lid ajar in marigold. Chosen over the Stack, Badge and Wordmark candidates because it stays legible at 16px and reads as a container rather than a generic box. Four shapes on a 132 × 132 canvas with no padding baked in. Path geometry is final: reproduce it verbatim, don’t redraw or re-round the coordinates.
Shapes, back to front
1
Bin body
path d="M28 52 h76 l-8 60 h-60 z"
#1E2226
2
Lid edge
rect x=20 y=38 w=92 h=12 rx=4
#D8A93F
3
Lid top
path d="M20 38 l16 -16 h60 l16 16 z"
#F5E7C4
4
Handle slot
rect x=52 y=66 w=28 h=5 rx=2.5
#FFFFFF
Clear space is 1/6 of the mark’s width on every side — 22px at the 132px canvas. Nothing else sits inside that band.
Size rules
The handle slot fills in and muddies the body below 40px, so it comes out. Everything below is drawn at true rendered size.
96px — ≥ 64
All four shapes. The full mark.
48px — 40–63
Shapes 1–3. Drop the handle slot. This is the band the site nav sits in, at 42px.
32px — 16–39
Shapes 1–3. Favicon and tab icon; verify at 1× on a low-DPI display.
14px — < 16
Do not use. The handoff sends you to the [CHECK] MMB wordmark from direction 4d, which was never cut — so there is no approved sub-16px option yet.
Lockups
Three, and only three. The horizontal lockup is the site nav; the reversed lockup is the footer; the mark alone is the favicon.
1 — Horizontal (primary)
The Moving Bins Co.
Bin rental & delivery
Mark 42, gap 14. Name Outfit 600 / 17 / -0.02em, tagline Plex Mono 400 / 9.5 / 0.12em upper. The site nav runs the name at 19px to sit with its own type ramp.
2 — Reversed (dark ground)
The Moving Bins Co.
Mark 34, gap 12, card radius 16, padding 20/22. No tagline in this lockup. Handle slot omitted — it would be white on white.
3 — Mark only
32px, centred, on ground or transparent. App icon, favicon, avatar. This is what the browser tab shows on every page.
Colour variants
Marigold is the lid edge in every variant — it is the one accent, same as everywhere else on the site.
On light
Surface or ground. Body ink, lid edge marigold, lid top straw, slot white.
Reversed on dark
Body white, lid edge marigold, lid top marigold ink. No handle slot.
Single colour [CHECK]
Body, lid edge and lid top in one ink, lid top inset 2px to hold the gap. Embroidery and one-colour print only. No production file has been cut for this yet — the rule describes intent.
As a home link
The mark itself never changes colour. On hover the text half of the lockup goes ink → muted over 120ms ease-out. Focus-visible draws a 2px marigold outline at 3px offset around the whole lockup, mark included. No animation, no loading or error state — the mark is static.
Don’t
Re-round or “clean up” the path coordinates. Recolour the lid edge away from marigold. Keep the handle slot below 40px. Set the mark on a mid-tone that leaves neither the light nor the reversed variant enough contrast. Add a stroke, shadow or gradient — the mark is four flat fills.
Assets
images/logo/mmb-mark.svg
Full mark, light ground, 132×132
images/logo/mmb-mark-reversed.svg
Reversed, for dark grounds
images/logo/mmb-mark-small.svg
32px build, no handle slot. This is the favicon.
In the nav and footer the mark is inlined in the markup rather than loaded as a file, so its fills can read the same --ink / --marigold / --marigold-pale tokens as the rest of the page. Change a token and the logo follows. The standalone files carry literal hex because a linked SVG can’t see the page’s custom properties.
Still open from the handoff: no Pantone or CMYK match for marigold has been set, and vinyl and embroidery minimums need a physical proof before they’re fixed. [CHECK]
Colour
Ground
#F1F2F4
Page background
Surface
#FFFFFF
Cards, bands, fields at focus
Soft
#E3E7EC
Dividers, inactive controls
Marigold
#D8A93F
Every action, selected date
Marigold pale
#F5E7C4
Step markers, badges, hover
Marigold ink
#8A6516
Text links, badge text
Muted
#5F666F
Body text, labels
Ink
#1E2226
Headings, dark bands
Type scale
Outfit, three weights only: 400 body, 500 emphasis, 600 headings.
Display 44 / 600
Rent moving bins
H1 38 / 600
Book a delivery date
H2 30 / 600
Pricing by bin count
H3 20 / 600
We deliver
Lead 17 / 400
Stackable bins, delivered
Body 15.5 / 400
Keep them up to two weeks
Small 13.5 / 400
No deposit required
Mono label 11 / 500
How it works
Spacing & radius
4px base. Section rhythm 56–88px, the most generous of the five directions.
xs
4px
sm
8px
md
16px
lg
24px
xl
32px
2xl
56px
3xl
72px
4xl
88px
Radius
16 field
24 block
28 card
999 pill
Buttons — every state
Default
Book a date
Hover
Book a date
Pressed
Book a date
Focus
Book a date
Disabled
Book a date
Secondary
See pricing
Secondary hover
See pricing
On dark
Read the policy
Text link
Full service area →
Text link hover
Full service area →
Fields — every state
Rest
Mobile we can text
Filled
(650) 265-1193
Focus
(650) 265-11|
Error
(650) 265
That number looks short — we text the delivery window.
Disabled
Pickup address matches delivery
Calendar day — every state
14
Available
15
Hover
16
Selected
17
Fully booked
18
Today
19
Past
Chips & badges
Bay View
Selected
Most booked
[CHECK]
Blocks
Cards never carry borders. Depth comes from one soft shadow, or from the dark block.
Flat block
Sits on white. Used for steps and quiet lists.
Raised card
One shadow, reserved for the booking panel.
Dark notice
For the promise and the policy, once per page.