Build a complete, responsive multi-section marketing website for my business in a warm editorial style — the feel of a well-set literary magazine, not a tech landing page.
AESTHETIC DIRECTION
The design language is typographic and bookish. Use hairline rules (1px, low-contrast) to structure the page the way a magazine uses them: a masthead-style header with a thin utility line above the logo and navigation, rules between major sections, and a centered ornament or folio mark to close the hero. Headlines are large serif with occasional words set in italic as accents. Body copy is set to a comfortable reading measure (around 60–70 characters). One paragraph in the main editorial section should open with a drop cap. Include a large italic serif pull-quote and a full-width testimonial band on a slightly tinted surface. Avoid card grids with heavy shadows, gradients, and rounded corner boxes — structure comes from rules and whitespace, not containers.
COLOR
The page background is a warm cream white (#faf7f0). Body text is a near-black ink (#1d1a15). The primary accent is a forest green (#1f6f43) — use it for links, buttons, italic accent words in headlines, and other selective emphasis. The secondary accent is an orange (#a8681c) — use it sparingly for eyebrows, small-caps labels, and the drop cap. Tinted panels and bands sit on a soft ivory (#f1ebdd). Keep the overall page light on accent color: ink and background do most of the work.
TYPOGRAPHY
Use a characterful old-style display serif for headings with a clean neutral sans-serif for body text (Fraunces for headings, Inter for body). Headlines are set large and confident with tight leading; eyebrows and labels are small, letterspaced uppercase in the body face.
SPACING
Overall spacing should feel balanced and comfortable, with unhurried room between sections (6.5rem section padding).
MOOD
The site should feel warm and literary, like a trusted periodical.
STRUCTURE
Include: the masthead header; a centered hero with an eyebrow line, a large headline with an italic accent word, a short standfirst paragraph and a primary button plus a quiet text link; a three-column "what we do" section separated by vertical hairlines; a two-column editorial section pairing a large italic pull-quote with prose (drop cap on the first paragraph); a full-width testimonial band; a centered closing call-to-action; and a multi-column footer with small-caps headings.
Adapt all copy to my actual business, keep the design language perfectly consistent across every section, and make it fully responsive — the three-column section stacks to one column on small screens.