Screenshots of the actual template. Every page, component and state shown is included in the download.
Obsidian — Digital Agency Website Template
A dark, gradient-led agency site for studios whose work looks better against black than beige.
- Category
- Agency & Studio
- Pages included
- 9 pages
- File format
- ZIP · HTML, CSS, JS
- Delivery
- Instant download
- Licence
- One end product
- Support
- 6 months included
- Updates
- Free, for life
- Last updated
- July 2026
- Secure payment via Stripe or PayPal
- Download link valid for 72 hours, re-issued free
- No account required, no subscription
Overview
Obsidian is a digital agency template built around motion and contrast. The hero sets a claim in oversized type beside an abstract gradient panel you can swap for a showreel still, and the work grid that follows treats each project as a full-bleed tile rather than a thumbnail in a list.
It suits studios selling interactive work — product design, motion, web builds — where the portfolio carries the pitch. Service descriptions are short by design, and every section ends with a way to start a conversation.
What's included
- 9 hand-built HTML pages with matching CSS and JavaScript
- Full-bleed project tiles with hover video support
- Gradient panel component with four preset palettes
- Editable design tokens for colour, type scale and spacing
- Project enquiry form markup wired for Formspree, Netlify Forms or your own endpoint
- Setup guide, component reference and a licence summary
Pages and sections included
9 ready-made pages:
- Home
- Work index
- Project detail
- Services
- About the studio
- Process
- Insights
- Article
- Start a project
Built from these sections and components:
- Oversized statement hero with gradient panel
- Client logo row
- Full-bleed project tiles
- Services grid with numbered steps
- Process timeline
- Awards and recognition strip
- Team introduction
- Insights and article teasers
- Start a project block with budget selector
Key features
Hover video tiles
Project tiles play a muted loop on hover and fall back to a still image on touch devices and reduced-motion settings.
Budget selector
The enquiry form asks for a range up front, which filters out the conversations you were going to decline anyway.
Four gradient presets
Swap the hero and tile artwork between violet, teal, amber and monochrome by changing one class.
Process timeline
A numbered, scroll-linked timeline for explaining how you work without writing an essay.
Dark-first typography
Type weights and contrast tuned for light-on-dark, so headlines stay crisp instead of blooming.
No framework
Roughly 58KB of CSS and JS before your imagery, with lazy-loaded video sources.
Responsive and mobile design
Obsidian 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 9-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 9 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
- Digital product and interactive design studios
- Motion and 3D teams whose work suits a dark canvas
- Web development shops presenting build case studies
- Freelance art directors consolidating a client portfolio
Frequently asked questions
No. Supply a poster image only and the tile behaves as a still with a subtle zoom on hover. Video is optional per project, set in the same data file.
Yes. The palette lives in a handful of CSS variables at the top of the stylesheet — invert the surface and ink values and the components, borders and shadows follow.
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