Design System
HTML Elements
A complete reference of all styled HTML elements — typography, forms, media, links, and interactive components — all following the Blue Marine design language.
Brand Logo
The primary logo used across all displays and client-facing interfaces.
Light
Dark
Brand Blue
Headings, Text & Links
Headings <h1> – <h6>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph <p>
The IoT platform connects smart sensors to cloud-driven logic. Built for Montréal's growing tech ecosystem, it delivers real-time insights and seamless automation.
Inline Elements
Use strong for importance, em for emphasis, mark for highlights, del for deletions, and code for inline code.
Links <a>
Visit iot-automation.ca or learn about our Zigbee integration →
Blockquote <blockquote>
"Smart automation starts with reliable connectivity — Zigbee and Matter are our foundation."
Lists <ul> <ol>
Unordered
- Zigbee sensors
- Matter devices
- HTTPS endpoints
- Edge gateways
Ordered
- Connect device
- Set automation rule
- Monitor dashboard
- Export report
Code Block <pre>
// Zigbee device handler
device.on("sensor:update", (data) => {
const { temp, humidity } = data;
if (temp > 28) {
automation.trigger("cooling_on");
}
});Input, Select, Button & More
Form <form> / <input> / <textarea>
Select <select>
Checkbox <input type="checkbox">
Radio <input type="radio">
Range <input type="range">
Buttons <button>
Image, Figure, Video & iFrame
Image <img>
alt="Smart home sensor device"
Figure <figure> + <figcaption>
Video <video>
<video controls src='demo.mp4' />
iFrame <iframe>
Embedded: Montréal, QC — iot-automation.ca HQ
Divider <hr> & Address <address>
Horizontal rule separating content sections:
iot-automation.ca
Montréal, Québec 🍁
Canada
info@iot-automation.ca
Table with Pagination
Connected Devices
15 devices · <table>
| Device ID | Name | Protocol | Type | Signal | Status | Last Seen |
|---|---|---|---|---|---|---|
| ZB-001 | Living Room Temp | Zigbee | Temperature | 92% | Online | 2 min ago |
| MT-002 | Front Door Lock | Matter | Security | 87% | Online | 5 min ago |
| HT-003 | API Endpoint /temp | HTTPS | API | 100% | Active | < 1 min ago |
| ZB-004 | Kitchen Motion | Zigbee | Motion | 78% | Online | 12 min ago |
| MT-005 | Smart Thermostat | Matter | Climate | 0% | Offline | 2 hrs ago |
Showing 1–5 of 15 devices
Complete Weather Icon Set
19 professional weather condition icons for modern dashboards
Most Valuable IoT Variables
Key data points for intelligent building automation
Temperature
Humidity
Weather Code
Partly cloudy