Graphite – Creative Agency & Portfolio HTML Template

Graphite – Creative Agency & Portfolio HTML Template

Graphite is a monochrome HTML template for web design studios, creative agencies and freelancers. Every page is drawn on one scaled grid, like a sheet on a drafting table: bold Manrope headlines, Instrument Serif italics and JetBrains Mono labels, with hairline rules, rulers and a crosshair that measures the page as the mouse moves. It comes with a dark default and a light scheme that visitors switch in the header, and every page is hand-coded HTML5, CSS3 and plain JavaScript, with no framework and no jQuery.

16 pages

• Three home pages: Editorial with a photo header, Blueprint and a pencil drawing header
• About, Services, Portfolio, Pricing, FAQ, Testimonials and Contact
• Shop and Checkout with an order received screen
• Blog and Blog post
• 404 page with a page finder, and a Coming soon page with a launch countdown

Sections that work, not just look

Graphite is built to be used. Filters filter, sliders slide, counters count from real data, and every interactive part is reachable from the keyboard.

• Drafting-table page headers with rulers, corner marks and a live crosshair
• Project index with category filters, a featured project viewer, a mosaic and a grid/list archive
• Service shutters, before/after comparison, packages and a FAQ wall
• Pricing plans, a comparison table, a sample invoice, add-ons and payment schedules
• Project brief and quote forms with live validation
• Testimonials and review grids with topic filters
• A sign in / sign up sheet that opens from the header on every page
• Coming soon countdown with time zones and a calendar (.ics) button

A complete shop flow

The shop shows how a studio can sell templates, fonts and prints:

• Featured product box with Personal and Commercial licences
• Catalogue with categories, sorting by popularity, newest or price, and a 3 or 4 column grid
• Licence documents the buyer chooses and signs with their name
• Bundles with the saving worked out from the products they hold
• Receipt cart: a floating pill opens the cart as a printed receipt, with quantities, removal and totals; the cart is kept between pages
• Checkout with numbered steps, labels above the fields, field validation ("( ! ) REQUIRED", "( ! ) ENTER A VALID EMAIL"), payment method cards, an order note, a coupon field, a sticky order summary and an order received screen

The shop and checkout run in the browser for the demo. Connect them to your own store or payment provider when you go live; no orders or payments are processed by the template itself.

Dark and light, on every page

The scheme switch in the header turns the whole site from the dark default to the light scheme, and the visitor's choice is remembered in their browser. Colours are CSS custom properties, so changing the palette takes a few lines.

Fast, valid and accessible

• Lighthouse 99–100 for performance, accessibility, best practices and SEO, on mobile and desktop
• Valid HTML and CSS (W3C Nu validator)
• Responsive from 320 px phones to 2560 px screens, scaled from one design grid
• Keyboard-friendly menus and controls, visible focus, Pause buttons on everything that moves on its own
• Respects "reduced motion"
• Fonts self-hosted in WOFF2 (SIL Open Font License); no external font requests
• Minified CSS and JavaScript, WebP images and an .htaccess with caching and compression

Clean, readable code

• One stylesheet with BEM-style class names, organised in commented sections
• One script file, split into commented sections per page and feature
• No build step needed: open the HTML files and edit them
• Comments in English throughout

What you get

• 16 HTML pages
• CSS and JavaScript, readable and minified
• Fonts with their licences

Support

Questions about setting up or customising Graphite are welcome. Please tell us which page and which browser you are using so we can help faster.