The Design System behind the site.
Colour, type, and the small decisions underneath them, read directly off this site’s own stylesheet, so this page can’t say something the site doesn’t already do.
A name set in type.
Mel·lif·lu·ous is currently a wordmark rather than a drawn mark: live text in Newsreader, using the same treatment as the site nav. For a typographic name that is a defensible answer, not a gap, and it means the name stays selectable, searchable and perfectly sharp at any size.
Is the wordmark the final answer, or does a drawn mark follow?
There is no vector logo, so there is nothing to offer as a download here yet. Two ways to close this: keep the wordmark and treat it as the identity, in which case this section documents the exact face, weight and tracking and gains a download link to nothing; or commission a mark, in which case an assets-logo/ folder appears in Design Guidelines, is copied into the theme, and this section gains real SVG and PNG downloads on light and dark. The existing lead is Content Docs/Projects/Wildroot & Amber/Logo/Logo Mellifluous.psd. The .ai files beside it are laser-cut layouts for the installation, not logos.
Real photos.
Natural light, real locations, minimal processing. A photograph should look like something that happened rather than something that was arranged. No stock, and no heavy grading.
Pulled live from published posts, so this grid changes as the site does.
Phosphor Light.
Phosphor Light at 1.5px stroke with rounded joins, drawn on a 20×20 grid with a 2px inset. Icons label and orient rather than decorate, so they sit at the same optical weight as the text beside them. Mixing icon sets is the fastest way to make a careful layout look assembled from parts, which is why there is exactly one.
Warm neutrals and one forest green.
The palette is almost entirely neutral, tinted warm rather than grey, with a single forest green carrying every accent and every action. One colour doing the work of both is a deliberate constraint. Everything else on this page is either a surface, a shade of text, or an accent reserved for illustration.
Neutrals
Every layout sits on one of these three. Neutral is the default page, White lifts a panel or a card off it, and Dark is for full-width sections that need to break the rhythm.
Primary
Every word on the site is one of these three. Body carries paragraphs, Muted handles captions, metadata and anything stepping back from the main line, and Muted soft is for dividers and placeholders rather than for reading. Ratios are measured against Neutral in the browser on load rather than typed in, so they cannot drift from the colour beside them: Body and Muted pass AA, and Muted soft misses even the large-text floor, which is why it is not a text colour.
Secondary
Forest green is the only colour on the site that asks for a click. Forest fills buttons and colours links, Forest dark is the hover and pressed state so a rollover never changes hue, and Forest light supports on dark backgrounds and in the single editorial italic each page is allowed.
Greyscale
Numbered dark to light. Grey 5 draws every border on the site and Grey 4 the emphasised ones, so the ramp is where strokes come from rather than a set of one-off greys. The darker three are held for charts, diagrams and disabled states. All five are pure neutrals, unlike the rest of the palette, which is warmed toward the brand.
Additional colours
Accents for illustration and editorial work, used sparingly and never for interface. A layout should feel finished without them. None of the three carries enough contrast on Neutral to set text in, so they are fills and marks: if one ever needs to carry a word it needs a darker sibling, not a bigger font.
Semantic
Two colours that mean something rather than look like something. Success confirms, Error reports a failure, and neither is used for emphasis or decoration anywhere else. They stay conventional on purpose: a person reads the meaning before they read the design, so a green that means anything other than "this worked" costs comprehension.
Newsreader for voice. Inter for everything else.
Two families, split by job rather than by level, and Inter is shared with Lara Kroeker Interactive on purpose. The two are set up as mirrors: on the studio site Inter is the voice and a serif italic is the rare accent, while here Inter steps back and Newsreader does the talking. Same root, opposite hierarchy.
Newsreader sets the hero and section headings, in one regular weight, plus the 300 italic in forest that each page is allowed once and never twice. Everything structural underneath is Inter: component titles, body copy, leads, labels, buttons and metadata, where neutrality is the point.
--type-micro-size
--type-display-size
Section heading
.display-h2--type-h2-size
Component title
.h3--type-body-lg-size
Lead paragraph, for openings and introductions.
.lead--type-lead-size
Body copy, the standard reading size used everywhere else.
.body-copy--type-body-size
Editorial accent
.accent--type-italic-size · once per page
Two type scales exist, and only one of them is the scale
Alongside the named scale above, colors_and_type.css carries a parallel --type-ui-* ladder of thirteen steps from 9px to 82px. Some of it is genuinely in use, so it cannot simply be deleted, but a system with two scales has no scale: the next person sizing a label picks whichever they find first. The decision is whether the --type-ui-* steps fold into the named scale, or stay as an explicitly separate interface ladder with a documented reason and its own row on this page. Worth settling before this page is sent to anyone, because right now it documents half the type system.
Space. Shape. Depth.
The three scales nobody looks at directly. Spacing sets the rhythm, radius gives every edge its character, and elevation decides what sits above what.
Spacing
A 4px base, doubling early and widening late, so component padding stays fine-grained while the space between sections stays generous.
Radius
Corner rounding scales with the size of the surface. Buttons take 8px, deliberately: the pill is reserved for tags and chips here, which is the opposite of most systems and is what keeps a tag from reading as a button.
Thirteen radius steps, several of them two pixels apart
The token file defines none, 2xs, xs, s, sm, m, md, card, lg, feature, shell, xl, pill, circle. Seven are shown above, because those are the ones doing real work; the rest sit between them at 3px, 6px, 10px, 20px and 22px, close enough that nothing visibly changes when one is swapped for its neighbour. That is the definition of a step that is not earning its place. Worth pruning to the shown set before this page claims the scale is the scale.
Elevation
Quiet by default. A hairline border carries most separation on this site, and a shadow is a response to interaction rather than a permanent state.
One forest fill. Everything else recedes.
Three levels of emphasis: a filled button for the main action, a ghost outline for the secondary one, and a text link for everything else. Aim for one filled button per view. Hover deepens the green rather than changing colour, so the rollover reads the same everywhere.