Cobalt Serif Freelancer Sitev1.0.1
Use this Skill to build website page.
Build a UI/UX freelancer site with a white hero where italic serif words and one giant cobalt uppercase word straddle a blue duotone portrait, a working light and dark mode pill, a full-bleed cobalt band of scattered white pill tags and a three-plan pricing grid, with Home, Services, Pricing, three plan pages, Work, six case studies, About, Process and Contact. Every page is fully designed and linked, with a full-screen menu, work filters, plan FAQs and a demo brief form. Ideal for independent designers who want a bold editorial first impression that sells fixed-price plans.
Picked most often by
Updated Sep 17, 2026
User reviews
Loading reviews…
What you get
- A complete interactive website example with 17 connected routes, distinct content pages and original imagery.
- A reusable template and visual guide that preserve italic serif and cobalt display type, a duotone portrait, scattered white service pills and a real light-dark toggle.
- A page library, framework adaptation guide and local validator for building and checking your own version.
Good fit
- Independent brands and creators who want this specific visual direction.
- Teams with products, projects or stories to turn into a complete page family.
- Builders who need the design translated into their requested website framework.
Not for
- Copying a reference creator’s name, logo, photography or business claims.
- A ready-made backend for real payments, bookings, accounts or message delivery.
- A different visual style that discards the template’s core composition.
About this Skill
Cobalt Serif Freelancer Site
Build a complete website with italic serif and cobalt display type, a duotone portrait, scattered white service pills and a real light-dark toggle. The example uses the fictional brand Orren — UI/UX designer for founders; you can replace its content while retaining the composition, typography and image direction that make this template distinctive.
What you receive
The local example contains 17 connected routes and 10 mapped source images. Navigation leads to real content views, and the controls provide visible feedback. The package includes a visual template, style guide, page library, icon rules and a local validator.
Make it your own
Start with your name or brand, audience, main offering and the pages you need. Supply useful descriptions for each product, project or story. If you do not have final copy yet, the assistant can draft clearly fictional content for you to review.
Tell the assistant if you want a particular framework or starter. Otherwise the Skill uses Next.js App Router with TypeScript. The design becomes real components and routes in that framework. The downloadable example remains a convenient self-contained preview that you can open locally.
Give each item a distinct image subject. Owned photography is welcome; new artwork should share the same lighting, palette and treatment. Preserve the image masks and crop direction, and check important subjects at phone width before calling the page finished.
Check the result
Open every page on desktop and mobile. Try navigation, filters, forms and any cart or booking controls. Run the included validator on the local demo and the appropriate project checks on a framework build. Programmatic checks do not replace visual review.
The example does not send messages, create reservations or take payments. Connect real services only when the production project needs them. All example identities and commercial details are fictional. Generating fresh images may incur the image provider’s charge; viewing the included demo does not require new generation.
What you need before you start
- You bring
- Designer name, discipline and a two-word hero line · Six projects with a client, role, problem, approach and one result · Three plans with a price, an includes list and a timeline · Contact details and current availability
- Dependencies
- A modern browser for preview and visual review · Node.js for the included static validator · The selected framework tooling for a generated website · A host image tool or owned assets for original imagery
- Outside costs
- Generating new artwork may incur a separate provider charge. The included example can be viewed without image generation.
- Last tested
- v1.0.1 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT