Awwwards ·United States (Denver) ·Picked 2026.10.18
Heron AI
AI SaaS (architecture and BIM) website design reference — Orange・All caps・Preloader・Company facts first
Source：heronaiapp.com ↗ Checked 2026.10.18
Editor's note
What this site does
A product site that answers who the company is — type, founding year, location — on a spec card, before it explains the product.
Conversion
Notes
What you see
Two colours: orange (#F15534) and dark grey. A preloader runs through its own steps as the page arrives — "001 INITIALIZE CORE SYSTEM", "002 LOAD AI MODELS".
What stands out is the company spec placed immediately after the hero. Four fields — TYPE / FOUNDED / FOCUS / LOCATION — state that this is a technology and AI software company, founded in 2026, working on building-code checking for architecture (via BIM and Revit), based in Denver. The body copy is set almost entirely in capitals.
What to take from it
On the site of a young company, not knowing who is behind the product is itself a reason to leave. Here that question is answered as a spec table rather than as decoration, and before the product pitch begins. The recent founding date is not hidden; it is one of the four fields.
The same information usually ends up quarantined on an About page. Four lines near the top remove a good deal of the hesitation that precedes an enquiry.
Typography
Typefaces
| Element | Desktop size / weight | Desktop line height | Mobile size / weight |
|---|---|---|---|
| h1 | 47px / 700 | 1.00 | 31px / 600 |
| h2 | 40px / 600 | 1.00 | 31px / 600 |
| Body (p) | 13px / 500 | 1.30 | 15px / 500 |
| Button | 13px / 500 | 1.30 | 15px / 500 |
Measured values (desktop 1440px, mobile 375px, 2026.10.18). The most frequent setting for each element is shown. Sites that use h1 for a logo or small label will show a small h1.
Download
Download the wireframe
This structure, as a wireframe you can edit in Figma
The page structure above, rebuilt from DevNJ's wireframe parts. It contains none of the original site's copy, images or code.
Using it in Figma
- Download the SVG.
- Drag and drop the file onto a Figma canvas.
- It opens with one layer group per section — start by reordering sections or replacing the copy.
Text comes in as text layers (set in Noto Sans JP).
Screenshots are shown at reduced size as quotations supporting the commentary. All rights in the design, copy and images belong to Heron AI and their respective owners. The wireframes are not copies of the original site; they rebuild its structure from DevNJ's parts. Owners or designers who would like this entry removed or corrected can contact us; we respond within two business days. Featured on: Awwwards — Site of the Day
