Visual systems, web design, and interface components
A dark, grid-structured page uses modular interface cards, thin linework, and bright accent colors against black and charcoal surfaces. White monospace-style labels and compact UI previews create a technical, system-oriented visual language.
About this website template
This template is built for design system showcase and web design training or resource page. It is written for web designers and UI/UX designers. Common uses include showcasing interface components and design-system modules, presenting web design tutorials and resources and sharing design-system examples and motion effects. It suits work in web design and software.
The design is dark mode, modular, technical, grid-based, minimal and interface-centric, with a technical, structured, focused and experimental tone, laid out as full-width dark hero, modular two-column card grid, repeated content sections and footer subscription area.
Template details
- Format
- website
- Purpose
- design system showcase, web design training or resource page
- Audience
- web designers, UI/UX designers
- Use cases
- showcasing interface components and design-system modules, presenting web design tutorials and resources, sharing design-system examples and motion effects
- Industries
- web design, software
- Style
- dark mode, modular, technical, grid-based, minimal, interface-centric
- Tone
- technical, structured, focused, experimental
- Typography
- monospace-style uppercase labels, small condensed text, high-contrast white headings
- Colours
- black, charcoal, white, gray, violet, magenta, teal
- Imagery
- interface screenshots, UI mockups, decorative grid lines
- Density
- high
- Aspect ratio
- 6:7
Preview
Related templates
Tetrisly wireframing and design-system component libraryWebsite
Figma design systems, UI components, and workflow resourcesWebsite
Overrides and interactive UI components for FramerWebsite
Human-centered creative tools and interface componentsWebsite
Wireframing and UI design starter kit for Sketch and FigmaWebsite
A collection of UI cards, design-system components, and workflow examplesWebsite
Handy Components Figma plugin for accessing and pasting flexible UI componentsWebsite
A design system and prototyping tool called ModuleWebsite
