Kairos Silver Smoke
Photographer profile in the album UI. Pick the pictures your shoot should feel like: silver smoke thickens with each pick and the picks become a written brief, ready to copy or send.
Summary
Photographer profile in the album UI. Pick the pictures your shoot should feel like: silver smoke thickens with each pick and the picks become a written brief, ready to copy or send. The numbers, credits and text are invented demo content.
Prompt
The brief this page was built from.
Build a public DEPO profile, "Kairos Silver Smoke", in the product UI of depo0/album.php: dark
ground, Poppins headings, Lato text, yellow primary actions, pill sub-navigation, rails of
rounded tiles, signed-in site header and footer. The animated background is unique to this
profile and is tied to a working tool. Background: Procedural smoke whose density follows the
number of picks. Tool: the reference picker and generated brief in a docked tray. Honour reduced
motion and work from 360 px to 1920 px.
Look
- Type: Poppins (headings), Lato (text), self-hosted site fonts.
- Palette: site tokens #18171a, #27262b, #ffb500, #469a58, plus the profile's background colours.
- Layout: sub-navigation, identity, the profile's tool in glass panels, rails of tiles and people.
- Motion: one canvas background at low resolution, paused in a hidden tab, a still frame under reduced motion.
Built with
| Part | What |
|---|---|
| HTML | public/demo63/index.html |
| CSS | public/demo63/css/demo63.css, profile.css, copies of the depo0 site CSS |
| JS | public/demo63/js/demo63.js, bg.js (canvas loop), depo0 header and footer scripts; vanilla |
| Libraries | none |
| Fonts | public/demo63/fonts/ |
| Images | /_img/photos/, /_img/site/first-page/, public/demo63/img/ (icons, logos) |
Borrowed
Header, footer, site CSS and album components from public/depo0. Otherwise nothing borrowed.
Config
None — static page.
Suits a site for…
What kind of website would this design fit? Agree with a tag by clicking it, or add your own — a tag can be several words.
No tags yet — be the first.
Comments 0
No comments yet — be the first.