A dark-themed bento grid landing page built for Angular API reference tools. It leads with live metric tiles, progresses through feature cards, and closes with a one-click install call to action. The design follows a Dashboard Pro aesthetic using a Slate and Sky color system, giving developers instant orientation the moment the page loads.
by Rocket studio
This is a single-page bento grid template designed for an Angular API reference application. It opens with a logo bar, shifts immediately into a stats-first impact grid, and guides visitors through feature cards before landing on a clear install call to action. The Dashboard Pro theme uses deep slate and sky-blue to feel like a well-configured code editor.
This template is built for developer-tool teams and open-source maintainers who need to present a technical reference product with authority. It speaks the visual language that Angular engineers already trust.
Finding clear, version-pinned API documentation is slow and frustrating when reference tools lack a credible first impression. Developers often leave a page before they trust the product. This template solves that by leading with numeric proof before asking for any commitment.
You get a complete, ready-to-customize single-page layout that communicates both depth and speed. Every section is purpose-built for a developer audience that reads in scan mode.




Theme
Dashboard Pro
Creative direction
Stats-First Impact
Color system
Slate & Sky
Style
Bento Grid
Direction
App Download
Page Sections
Logo Bar with Ecosystem Icons
Stats-first Bento Metric Tiles
Progressive Feature Card Grid
Multi-platform Install Call to Action
Terminal-style CLI Install Block
Sticky Mobile Install Bar
What type of developer tool is this template designed for?
Can I customize the metric tiles with my own statistics?
Does this template support both desktop and mobile users?
What is the terminal install block and why is it included?
Can this template be adapted for other framework documentation tools beyond Angular?
This template includes six purpose-built layout and interaction components drawn directly from the source brief.
A horizontal header ribbon displays recognizable ecosystem icons rendered in monochrome slate. Each icon brightens to sky-blue on hover, communicating ecosystem scope before a single line of copy is read.
Four self-contained bento cards appear immediately below the header. Each tile shows a large stat number in sky-blue, a cloud-white label, and a subtle sparkline tracking growth across releases.
As the visitor scrolls, metric tiles give way to feature cards covering offline mode, version diffing, type-signature search, and tree-shakable bookmarks. The grid breathes open, disclosing capability in sequence.
The primary call to action reads "Install the Reference" and offers platform-detected download buttons for macOS, Windows, and Linux. A secondary "Use in Browser" link serves commitment-averse visitors without friction.
Below the bento grid, a styled terminal block displays npx angular-docs --serve as an alternative install path. This speaks directly to developers who trust a command-line interface over a graphical button.
On mobile viewports, the install call to action collapses into a sticky bottom bar that stays visible as the visitor scrolls. No form fields are required. One tap triggers the download.
| Section | Purpose |
|---|---|
| Logo Bar Header | Establishes ecosystem scope with monochrome technology icons |
| Monospaced Headline | Anchors the page with version number and export count |
| Stats Metric Tiles | Delivers numeric proof of coverage and speed |
| Feature Card Grid | Reveals offline mode, diffing, search, and bookmarks |
| Install Call to Action | Offers platform-detected download with one click |
| Terminal Install Block | Provides CLI install path for developer confidence |
| Sticky Mobile Bar | Keeps the install action visible on small screens |
The visual identity follows a Dashboard Pro theme using a Slate and Sky color system. The palette is calibrated to feel like a premium code editor, dark enough to stay out of the way and bright enough at the edges to guide attention precisely.
The template is structured for a reliable mobile experience without sacrificing the density that developer audiences expect on desktop.
Every layout decision in this template is designed to move a skeptical developer from curiosity to installation without friction.
This template is categorized under Documentation and Support, with a specific focus on the Angular documentation and Angular API reference niche. It is a strong fit for teams shipping developer tools in the Angular ecosystem.