Screenshots of the actual template. Every page, component and state shown is included in the download.
Onyx — Dark Editorial Portfolio Template
An editorial portfolio in near-black and bone, for designers whose work is quiet, considered and photographed well.
- Category
- Portfolio
- Pages included
- 8 pages
- File format
- ZIP · HTML, CSS, JS
- Delivery
- Instant download
- Licence
- One end product
- Support
- 6 months included
- Updates
- Free, for life
- Last updated
- August 2026
- Secure payment via Stripe or PayPal
- Download link valid for 72 hours, re-issued free
- No account required, no subscription
Overview
Onyx borrows from art-book publishing: a serif display face, wide margins and pages that alternate between full-bleed imagery and generous white space. It is built for people who present objects, spaces and craft — product designers, ceramicists, photographers, art directors.
The homepage opens on a single statement and one image, then steps through selected work at a deliberate pace. The about page is written as an essay layout rather than a CV, because that is usually what wins the introduction.
What's included
- 8 hand-built HTML pages with matching CSS and JavaScript
- Three project layouts: full-bleed, split and long-scroll essay
- Captioned figure and pull-quote components for editorial writing
- Editable design tokens for colour, type scale and spacing
- Contact form markup wired for Formspree, Netlify Forms or your own endpoint
- Setup guide, component reference and a licence summary
Pages and sections included
8 ready-made pages:
- Home
- Work index
- Project detail
- About
- Journal
- Journal article
- Services
- Contact
Built from these sections and components:
- Statement hero with single image
- Selected work in a staggered grid
- Full-bleed project opener
- Split image and text sections
- Pull quotes and captioned figures
- Essay-style about page
- Studio details and stockists
- Journal teasers
- Contact block with response-time note
Key features
Three project layouts
A furniture launch, a photo series and a branding system each get a format that suits them, all built from the same components.
Serif display pairing
A licence-free serif and grotesque pairing already sized, tracked and tested down to 320px.
Image-first grid
A staggered work grid that keeps portrait and landscape crops in proportion without forcing square thumbnails.
Slow, deliberate motion
Fades measured in fractions of a second, and none at all for visitors who ask for reduced motion.
Essay about page
A long-form layout with drop caps, sidenotes and a portrait block — for the story a bio line cannot carry.
Light mode included
The same pages in bone and ink, switched with one attribute.
Responsive and mobile design
Onyx is built mobile-first and tested at 320, 375, 414, 768, 1024, 1440 and 1920 pixels before release. Small screens are not an afterthought — navigation, tables, galleries and the 8-page structure are each redesigned for the space available rather than shrunk to fit.
- Fluid type and spacing scales, so headlines stay in proportion between a phone and a 27-inch display.
- Tap targets of at least 44×44 pixels on every control, with visible focus rings for keyboard users.
- Images served at sensible dimensions with lazy loading below the fold and reserved space to prevent layout shift.
- Tested in current Chrome, Safari, Firefox and Edge, on iOS and Android, and with reduced-motion preferences respected.
Customisation and editing
Everything you will want to change is in an obvious place. Colours, fonts, radii and spacing are CSS custom properties declared in one block at the top of the stylesheet — change those six or so lines and all 8 pages follow. Text and links are edited directly in the HTML, with comments marking each section.
- No build step, no Node, no package manager — open the folder in any editor and double-click a page to preview it.
- Swap images by dropping your own files into /assets/img using the same filenames, or point the markup anywhere you like.
- Every component is commented and reusable, so adding a page means copying a block rather than writing CSS from scratch.
- Clean, semantic markup that ports cleanly into WordPress, Webflow, Astro, Eleventy or a React project when you outgrow static files.
Ideal for
- Product, furniture and object designers
- Photographers and art directors with a still-life practice
- Studios presenting a small number of considered projects
- Makers who sell through galleries and stockists
Frequently asked questions
It is designed for six to twenty. Fewer than six and the staggered grid looks sparse — the template includes a two-column variant for smaller bodies of work.
There is no cart built in, but each project page has a purchase block you can point at Shopify, Stripe Payment Links or an enquiry form. For a full storefront, Luxora or Mosaic is the better starting point.
Basic comfort with HTML and CSS is enough. Text, images and links are edited directly in the HTML, and colours and fonts live in a short list of variables at the top of the stylesheet. If you can edit a text file, you can launch one of these.
One licence covers one end product — your own website, or one client project. You can modify the template as much as you like. You cannot resell, redistribute, sublicense or share the template files themselves.
Anywhere that serves static files: Netlify, Vercel, Cloudflare Pages, GitHub Pages, or classic shared hosting via FTP. Most are free for a site this size, and the guide covers each.
Because templates are delivered instantly and cannot be returned, all sales are final once the download link is issued. If a file is corrupt or a page does not match its preview, contact us within 14 days and we will fix it or refund you in full.
You might also like