Website kits
Creative agency services page
Agency services page with four service lines, each with an included-items checklist, a typical timeline and a starting price, plus three engagement models.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page for a prospective client who already likes the work and now wants to know what they would get, how long it takes and roughly what it costs. Each of the four service lines (brand identity, websites, product design and content) opens with who it is for, then lists what is included as a checklist and states a typical timeline and a starting price. Publishing a “from” price filters out projects that could never fit and saves both sides a discovery call. Three engagement models follow for buyers who think about how to work together rather than what to buy, and the page closes by inviting anyone unsure to describe the problem instead. Replace the prices and timelines first, using figures from your last few signed quotes rather than what you hope to charge. A tip for studios: say what is excluded, such as fonts, stock photos and hosting, so it does not surprise anyone on the first invoice.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 26
- Container (grid) × 4
- Container (grid, 3 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 35
- Heading × 10
- Icon List × 4
- Button × 1
Things worth knowing
- Each “What is included” list converts to an Icon List with check icons, four in total, so inclusions can be added or removed row by row.
- The timeline and starting price pills are Text Editor widgets in a small Container. The price is written as “From $14,000” rather than a bare number, which keeps the converter from turning it into a counting Counter widget.
- The three engagement model cards convert to Containers holding a Heading and three Text Editors each: the price, the description and the best-for line.
- Each service line is a two-column grid that stacks below 780px, with the description, timeline and price above the checklist.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Services — Lowtide Studio</title>
<style>
body{margin:0;font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif;color:#f2efe9;background:#0e0e10}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:96px 0;background:#0e0e10}
h1,h2,h3{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;color:#f2efe9;font-weight:700}
h1{font-size:84px;line-height:1;letter-spacing:-.045em;margin:0 0 28px;max-width:980px}
h2{font-size:44px;line-height:1.06;letter-spacing:-.035em;margin:0 0 16px}
h3{font-size:22px;line-height:1.25;letter-spacing:-.01em;margin:0 0 10px}
p{font-size:17px;line-height:1.7;color:#a3a1a8;margin:0 0 18px}
.eyebrow{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ff4d8d;margin:0 0 20px}
.button{display:inline-block;padding:16px 28px;border-radius:999px;background:#ff4d8d;color:#0e0e10;text-decoration:none;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-weight:700;font-size:16px}
.ghost{display:inline-block;padding:15px 27px;border-radius:999px;border:1px solid #f2efe9;color:#f2efe9;text-decoration:none;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-weight:700;font-size:16px}
.intro{padding:104px 0 72px}
.intro .lead{max-width:680px;font-size:20px;line-height:1.6;color:#f2efe9;margin:0}
.lines{padding-top:24px}
.line{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;padding:56px 0;border-top:1px solid #2a2a31}
.tag{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:15px;font-weight:700;color:#ff4d8d;margin:0 0 16px}
.meta{display:flex;gap:16px;flex-wrap:wrap;margin:28px 0 0}
.meta p{margin:0;padding:10px 16px;border:1px solid #2a2a31;border-radius:999px;font-size:15px;line-height:1.4;color:#f2efe9;background:#18181c}
.label{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#f2efe9;margin:0 0 18px}
.includes{display:flex;flex-direction:column;gap:14px}
.includes > div{display:flex;align-items:flex-start;gap:14px;font-size:17px;line-height:1.5;color:#f2efe9}
.tick{color:#ff4d8d;font-size:15px;line-height:1.6}
.graphite{background:#18181c}
.head{max-width:680px;margin:0 0 44px}
.models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.model{display:flex;flex-direction:column;padding:34px 30px;border:1px solid #2a2a31;border-radius:4px;background:#0e0e10}
.model .price{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:20px;font-weight:700;color:#ff4d8d;margin:0 0 14px}
.model p{font-size:16px;margin:0 0 16px}
.model .fit{margin:auto 0 0;padding-top:16px;border-top:1px solid #2a2a31;color:#f2efe9;font-size:15px}
.small{font-size:15px;margin:32px 0 0;max-width:760px}
.cta{padding:112px 0}
.cta .inner{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.cta h2{font-size:60px;line-height:1.02;letter-spacing:-.045em;max-width:720px;margin:0 0 18px}
.cta p{max-width:600px;margin:0}
@media(max-width:780px){
section{padding:64px 0}
.wrap{padding:0 16px}
.intro{padding:64px 0 40px}
h1{font-size:46px;line-height:1.04}
h2{font-size:32px}
.intro .lead{font-size:18px}
.lines{padding-top:8px}
.line{grid-template-columns:minmax(0,1fr);gap:28px;padding:44px 0}
.models{grid-template-columns:minmax(0,1fr);gap:20px}
.model{padding:26px 22px}
.cta{padding:72px 0}
.cta .inner{flex-direction:column;align-items:flex-start;gap:28px}
.cta h2{font-size:38px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<p class="eyebrow">Services and prices</p>
<h1>What we make, how long it takes and what it costs.</h1>
<p class="lead">Most projects combine two or more of the services below. The prices are where projects usually start; we send a fixed quote after the first call, and it does not change unless the scope does.</p>
</div>
</section>
<section class="lines">
<div class="wrap">
<div class="line" id="brand">
<div>
<p class="tag">01 — Brand identity</p>
<h2>A brand your team can use without calling us</h2>
<p>For companies launching, merging or simply outgrowing a logo made in a weekend. We start with what you want people to remember about you, then design the parts that carry it.</p>
<div class="meta">
<p>Typical timeline: 6–8 weeks</p>
<p>From $14,000</p>
</div>
</div>
<div>
<p class="label">What is included</p>
<div class="includes">
<div><span class="tick">✓</span><span>Positioning workshop and a one-page brand brief</span></div>
<div><span class="tick">✓</span><span>Logo, wordmark and a small icon set</span></div>
<div><span class="tick">✓</span><span>Typefaces, color system and photography direction</span></div>
<div><span class="tick">✓</span><span>Templates for slides, documents and social posts</span></div>
<div><span class="tick">✓</span><span>Brand guidelines as a web page, not a 90-page PDF</span></div>
</div>
</div>
</div>
<div class="line" id="websites">
<div>
<p class="tag">02 — Websites</p>
<h2>Websites you can edit on a Tuesday afternoon</h2>
<p>Marketing sites, portfolios and online shops, designed and built in-house on WordPress or Webflow. You get the logins, the source and a training session, not a support contract you cannot leave.</p>
<div class="meta">
<p>Typical timeline: 8–12 weeks</p>
<p>From $18,000</p>
</div>
</div>
<div>
<p class="label">What is included</p>
<div class="includes">
<div><span class="tick">✓</span><span>Sitemap, wireframes and content plan</span></div>
<div><span class="tick">✓</span><span>Responsive design for every page template</span></div>
<div><span class="tick">✓</span><span>Build, hosting setup and redirects from the old site</span></div>
<div><span class="tick">✓</span><span>Accessibility and page speed checks before launch</span></div>
<div><span class="tick">✓</span><span>Editor training and 30 days of fixes after go-live</span></div>
</div>
</div>
</div>
<div class="line" id="product">
<div>
<p class="tag">03 — Product design</p>
<h2>Interfaces for apps and software, ready to build</h2>
<p>For teams with developers but no designer, or a product that grew feature by feature. We research how people use it today and design the screens your developers need, with every state accounted for.</p>
<div class="meta">
<p>Typical timeline: 4–10 weeks</p>
<p>From $16,000</p>
</div>
</div>
<div>
<p class="label">What is included</p>
<div class="includes">
<div><span class="tick">✓</span><span>Five to eight user interviews and a findings summary</span></div>
<div><span class="tick">✓</span><span>User flows and clickable prototypes</span></div>
<div><span class="tick">✓</span><span>Interface design with empty, error and loading states</span></div>
<div><span class="tick">✓</span><span>A component library in your design tool</span></div>
<div><span class="tick">✓</span><span>Weekly handover sessions with your developers</span></div>
</div>
</div>
</div>
<div class="line" id="content">
<div>
<p class="tag">04 — Content</p>
<h2>Words and pictures, so launch day is not empty</h2>
<p>A new design with placeholder text is the most common reason a launch slips. Our writer and photo producer make the content alongside the design, or on its own for an existing site.</p>
<div class="meta">
<p>Typical timeline: 3–6 weeks</p>
<p>From $6,500</p>
</div>
</div>
<div>
<p class="label">What is included</p>
<div class="includes">
<div><span class="tick">✓</span><span>Messaging framework and tone of voice notes</span></div>
<div><span class="tick">✓</span><span>Copy for up to 12 website pages</span></div>
<div><span class="tick">✓</span><span>One photo day: team, workspace and product</span></div>
<div><span class="tick">✓</span><span>Launch announcement and three months of post ideas</span></div>
</div>
</div>
</div>
</div>
</section>
<section class="graphite">
<div class="wrap">
<div class="head">
<p class="eyebrow">Ways to work with us</p>
<h2>Three engagement models</h2>
<p>Pick the one that fits how your team makes decisions. Many clients start with a project and move to a retainer after launch.</p>
</div>
<div class="models">
<div class="model">
<h3>Fixed-scope project</h3>
<p class="price">Quoted per project</p>
<p>A defined deliverable, a fixed price and a launch date agreed before we start. Paid in three stages: start, design sign-off and launch.</p>
<p class="fit">Best for a rebrand, a new website or a first version of a product.</p>
</div>
<div class="model">
<h3>Monthly retainer</h3>
<p class="price">From $4,800 per month</p>
<p>A set number of studio days each month for ongoing design, new pages, campaigns and product updates. Three-month minimum, then month to month.</p>
<p class="fit">Best for teams shipping something new most months.</p>
</div>
<div class="model">
<h3>Design sprint</h3>
<p class="price">$7,500 for two weeks</p>
<p>Two weeks to test one idea: a workshop, a prototype and five customer interviews, with a written recommendation at the end.</p>
<p class="fit">Best before you commit budget to a bigger build.</p>
</div>
</div>
<p class="small">Prices are in US dollars and exclude sales tax, stock photo licenses, fonts and hosting, which we pass on at cost and list in the quote.</p>
</div>
</section>
<section class="cta">
<div class="wrap inner">
<div>
<h2>Not sure which service you need?</h2>
<p>Tell us what is not working today. We will suggest the smallest piece of work that would fix it, even if that is a two-week sprint rather than a full project.</p>
</div>
<a class="button" href="/contact/">Start a project</a>
</div>
</section>
</body>
</html>
