# VantaAI

Project Details

Industry

AI Security

Service

Web Development

Role

Design Engineer

Year

2022

Project Overview

Vanta needed a public face and a working dashboard for a security product that watches threats in real time — a story told in milliseconds, not marketing slides.

We built a marketing site that makes the invisible visible and a dashboard that keeps operators calm under alert storms, shipped on a stack tuned for speed.

![Vanta AI — case visual 1](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%22700%22%20viewBox%3D%220%200%201600%20700%22%3E%3Crect%20width%3D%221600%22%20height%3D%22700%22%20fill%3D%22%2315171d%22%2F%3E%3Cg%20filter%3D%22url(%23b)%22%3E%3Cellipse%20cx%3D%221262%22%20cy%3D%22567%22%20rx%3D%22328%22%20ry%3D%22266%22%20fill%3D%22%23c2303e%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22898%22%20cy%3D%22451%22%20rx%3D%22269%22%20ry%3D%22274%22%20fill%3D%22%23c2303e%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%221321%22%20cy%3D%22530%22%20rx%3D%22588%22%20ry%3D%22112%22%20fill%3D%22%233a2a6b%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22357%22%20cy%3D%22422%22%20rx%3D%22762%22%20ry%3D%22102%22%20fill%3D%22%233a2a6b%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22879%22%20cy%3D%22413%22%20rx%3D%22499%22%20ry%3D%22293%22%20fill%3D%22%230c0e13%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22214%22%20cy%3D%22350%22%20rx%3D%22474%22%20ry%3D%22258%22%20fill%3D%22%230c0e13%22%20opacity%3D%220.85%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22b%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%22145%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E)

![Vanta AI — case visual 2](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%22700%22%20viewBox%3D%220%200%201600%20700%22%3E%3Crect%20width%3D%221600%22%20height%3D%22700%22%20fill%3D%22%23e9e2d8%22%2F%3E%3Cg%20filter%3D%22url(%23b)%22%3E%3Cellipse%20cx%3D%22272%22%20cy%3D%22291%22%20rx%3D%22685%22%20ry%3D%22236%22%20fill%3D%22%23ff7a3c%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22843%22%20cy%3D%22474%22%20rx%3D%22401%22%20ry%3D%22117%22%20fill%3D%22%23ff7a3c%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22222%22%20cy%3D%22496%22%20rx%3D%22622%22%20ry%3D%22109%22%20fill%3D%22%23d94f2a%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22662%22%20cy%3D%22163%22%20rx%3D%22359%22%20ry%3D%22158%22%20fill%3D%22%23d94f2a%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22340%22%20cy%3D%22301%22%20rx%3D%22410%22%20ry%3D%22171%22%20fill%3D%22%23403a90%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22711%22%20cy%3D%22383%22%20rx%3D%22744%22%20ry%3D%22275%22%20fill%3D%22%23403a90%22%20opacity%3D%220.85%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22b%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%22145%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E)

![Vanta AI — case visual 3](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%22700%22%20viewBox%3D%220%200%201600%20700%22%3E%3Crect%20width%3D%221600%22%20height%3D%22700%22%20fill%3D%22%231a1d24%22%2F%3E%3Cg%20filter%3D%22url(%23b)%22%3E%3Cellipse%20cx%3D%22838%22%20cy%3D%22145%22%20rx%3D%22495%22%20ry%3D%22294%22%20fill%3D%22%235b5f6b%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22264%22%20cy%3D%2296%22%20rx%3D%22454%22%20ry%3D%22258%22%20fill%3D%22%235b5f6b%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22456%22%20cy%3D%22269%22%20rx%3D%22400%22%20ry%3D%22226%22%20fill%3D%22%232c3140%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%221230%22%20cy%3D%22421%22%20rx%3D%22271%22%20ry%3D%22100%22%20fill%3D%22%232c3140%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%221056%22%20cy%3D%22266%22%20rx%3D%22288%22%20ry%3D%22232%22%20fill%3D%22%23c94b3a%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22886%22%20cy%3D%22513%22%20rx%3D%22684%22%20ry%3D%22129%22%20fill%3D%22%23c94b3a%22%20opacity%3D%220.85%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22b%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%22145%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E)

![Vanta AI — case visual 4](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%22700%22%20viewBox%3D%220%200%201600%20700%22%3E%3Crect%20width%3D%221600%22%20height%3D%22700%22%20fill%3D%22%23211a33%22%2F%3E%3Cg%20filter%3D%22url(%23b)%22%3E%3Cellipse%20cx%3D%221205%22%20cy%3D%22104%22%20rx%3D%22419%22%20ry%3D%22141%22%20fill%3D%22%23403a90%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22346%22%20cy%3D%22351%22%20rx%3D%22338%22%20ry%3D%22225%22%20fill%3D%22%23403a90%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22721%22%20cy%3D%2294%22%20rx%3D%22789%22%20ry%3D%22120%22%20fill%3D%22%23c2303e%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22262%22%20cy%3D%22465%22%20rx%3D%22727%22%20ry%3D%22294%22%20fill%3D%22%23c2303e%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22662%22%20cy%3D%22188%22%20rx%3D%22426%22%20ry%3D%22202%22%20fill%3D%22%23181228%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%221059%22%20cy%3D%22395%22%20rx%3D%22420%22%20ry%3D%22163%22%20fill%3D%22%23181228%22%20opacity%3D%220.85%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22b%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%22145%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E)

![Vanta AI — case visual 5](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%22700%22%20viewBox%3D%220%200%201600%20700%22%3E%3Crect%20width%3D%221600%22%20height%3D%22700%22%20fill%3D%22%23ece5da%22%2F%3E%3Cg%20filter%3D%22url(%23b)%22%3E%3Cellipse%20cx%3D%221343%22%20cy%3D%22400%22%20rx%3D%22353%22%20ry%3D%22197%22%20fill%3D%22%23d94f2a%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%221198%22%20cy%3D%22400%22%20rx%3D%22679%22%20ry%3D%22196%22%20fill%3D%22%23d94f2a%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22496%22%20cy%3D%22184%22%20rx%3D%22260%22%20ry%3D%22243%22%20fill%3D%22%23403a90%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22971%22%20cy%3D%22488%22%20rx%3D%22795%22%20ry%3D%22184%22%20fill%3D%22%23403a90%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22990%22%20cy%3D%22595%22%20rx%3D%22625%22%20ry%3D%22135%22%20fill%3D%22%23f0c9a8%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%221164%22%20cy%3D%22512%22%20rx%3D%22703%22%20ry%3D%22305%22%20fill%3D%22%23f0c9a8%22%20opacity%3D%220.85%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22b%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%22145%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E)

![Vanta AI — case visual 6](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%22700%22%20viewBox%3D%220%200%201600%20700%22%3E%3Crect%20width%3D%221600%22%20height%3D%22700%22%20fill%3D%22%2310131a%22%2F%3E%3Cg%20filter%3D%22url(%23b)%22%3E%3Cellipse%20cx%3D%22691%22%20cy%3D%22137%22%20rx%3D%22622%22%20ry%3D%22201%22%20fill%3D%22%233a2a6b%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22489%22%20cy%3D%22556%22%20rx%3D%22537%22%20ry%3D%22298%22%20fill%3D%22%233a2a6b%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22546%22%20cy%3D%22400%22%20rx%3D%22295%22%20ry%3D%22134%22%20fill%3D%22%23c94b3a%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%22855%22%20cy%3D%22607%22%20rx%3D%22629%22%20ry%3D%22137%22%20fill%3D%22%23c94b3a%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%221100%22%20cy%3D%22249%22%20rx%3D%22410%22%20ry%3D%22104%22%20fill%3D%22%230c0e13%22%20opacity%3D%220.85%22%2F%3E%3Cellipse%20cx%3D%221096%22%20cy%3D%22515%22%20rx%3D%22296%22%20ry%3D%22290%22%20fill%3D%22%230c0e13%22%20opacity%3D%220.85%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22b%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%22145%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E)

[←Luno Bikes](/works/luno-bikes.md) [FormaOS→](/works/formaos.md)

> 全站页面清单：[/llms.txt](/llms.txt)