Style Samples

Reusable typography, buttons, forms, tables, and image treatments for the demo portfolio.

Portfolio Text

Use bold or strong text for important project outcomes. Use italic or emphasized text for supporting notes, captions, or client quotes. Small details such as awards, references, highlighted phrases, and inline code like portfolio-grid can all be styled consistently. Finally, this is how a project link appears.

Case Study Heading

A short subtitle can frame the client, sector, or project result.

This text block shows how a project overview can introduce the brief, explain the creative direction, and give visitors enough context before they browse images or results.

Service Heading

Use smaller headings for process notes, deliverables, or project phases.

A supporting paragraph can describe what was delivered, how decisions were made, and what the finished portfolio piece demonstrates.

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Blockquote

Gamma gave the portfolio a brighter, clearer structure and made the project story easier to follow from the first screen.

Preformatted

Project: Gamma Portfolio Demo
Role: Design, layout, content structure
Status: Ready for custom portfolio content

Lists

Portfolio Highlights

  • Featured work with bright visual previews.
  • Short summaries for each project outcome.
  • Clear enquiry paths for new clients.

Service Notes

  • Brand identity and visual direction.
  • Responsive web page structure.
  • Launch-ready content presentation.

Project Process

  1. Review the portfolio goals.
  2. Choose the strongest project stories.
  3. Prepare imagery and supporting copy.
  4. Build the page layout.
  5. Check the responsive design.
  6. Publish and refine after feedback.

Icons

Actions

Table

Service Packages

Package Description Price
Starter Single page portfolio setup with demo content. 299
Portfolio Project cards, contact page, and image styling. 499
Content Polish Portfolio copy, headings, and enquiry prompts. 249
Launch Check Responsive review and final presentation checks. 149
Asset Refresh Bright image set prepared for the portfolio layout. 199
1395

Project Timeline

Phase Description Days
Discovery Agree portfolio goals and page structure. 1
Content Prepare headings, summaries, and calls to action. 2
Visuals Place image assets and tune the colour treatment. 2
Build Assemble responsive pages and forms. 3
Review Check mobile layout and final copy. 1
9

Buttons

  • Special
  • Unavailable
  • Archived

Form

Image

Fit

Left & Right

Inline images can support a portfolio story without interrupting the reading flow. Use this pattern for small logos, detail crops, icons, or visual notes that reinforce a project description while the surrounding copy explains the work in plain language.

Right-aligned images work well for short supporting sections, process notes, or testimonial excerpts. The goal is to keep the page easy to scan while giving visitors enough visual texture to stay engaged.