Journal · May 24, 2026
Ideas for sharper brand decisions
Demo card — the 1px border light is the perseus BorderBeam.
Perseus Style Guide — build progress
31 / 49 steps
01 · 02 — Foundation tokens
Color tokens + Inter (verified vs live)
background
card
contrast
ink
muted
border
03 · 04 — Typography
Inter scale + components
Build a brand people need.
Section heading H1 (56px)
Sub heading H2 (40px)
Card title H3
Lead paragraph — muted, max 60ch, used under headings to set the scene calmly.
Body text at 14px with the global negative tracking, color foreground.
Muted caption / meta line.
02 / 08Our work
05 — Spacing rhythm
section-y clamp + 8px rhythm
.section-y — clamp(6rem, 14vh, 12.5rem)
06 — Container & grid
12-col, 4/8 and 7/5 splits
col-span-4
col-span-8
col-span-7
col-span-5
07 · 08 — Edges & texture
radius family, hairline, dot-grid (no shadow)
rounded-lg card
rounded-md chip
pill
.dot-grid behind content (6% ink)
09 — Motion
Reveal + hover underline + image zoom
This block fades + rises once on scroll-in (Reveal).
Hover me — underline grows from left
Hover the image — subtle 1.03 zoom, no shadow.
10 — Media & icons
Figure (ratio/crop/grayscale hover)
11 · 12 · 13 — Button
Pill, variants, sizes, states (incl. loading)
edge — beam on the border
inside — beam inset (border + 1px in)
14 · 15 · 16 · 17 — Atoms
Link, badge, eyebrow, index label
18 · 19 · 20 — Form
Fields (filled, 8px, no border), states, checkbox/radio
Enter a valid email
21 — Modal / Dialog
Radix: focus trap, Esc, scroll lock, soft overlay shadow
22 · 23 — Card
Flat (hairline, no shadow) + interactive hover
Static card
Flat: #fff + #e7e7e7 hairline + 10px radius, no shadow.
Distinguished by the surface delta + hairline alone.
Interactive
Hover: border darkens one ink step (no shadow).
24 · 25 — Nav
Transparent → solid on scroll + overlay menu
The nav is live at the top of this page. Scroll to see it gain a blurred background + hairline. Click Menu for the full-screen overlay (focus-trap, Esc).
27 — Section wrapper
section-y + index/eyebrow/dots + Reveal
1 / 8
Our work
A numbered editorial section
Index + eyebrow + faint dot grid, wrapped in a container.
28 · 29 — Sector carousel
Snap track + active-center emphasis (opacity/scale), overlaid card
01 / 08Industry 01Construction
Cinematic coverage of construction progress and finished builds—site storytelling, craftsmanship details, and before/after reveals for contractors and developers.
Explore Construction- 02 / 08Industry 02
Real Estate
High-end listing films and photo coverage—interior walkthroughs, lifestyle moments, and aerials designed to elevate properties and attract buyers.
Explore Real Estate - 03 / 08Industry 03
Fitness
Dynamic fitness content—training sessions, brand commercials, and social-first edits that capture energy, community, and performance.
Explore Fitness - 04 / 08Industry 04
Events
Event highlight films and photography—corporate, private, and live experiences captured with fast turnarounds and polished storytelling.
Explore Events - 05 / 08Industry 05
Boats & Yachts
Luxury marine visuals—on-water cinematics, dockside tours, and lifestyle shots that showcase vessels with premium polish.
Explore Boats & Yachts - 06 / 08Industry 06
Venue
Venue features that sell the space—architecture, lighting, flow, and ambience captured to help couples and clients picture their event.
Explore Venue - 07 / 08Industry 07
Health & Beauty
Clean, editorial visuals for clinics and beauty brands—treatments, spaces, and product storytelling with a premium, trustworthy feel.
Explore Health & Beauty - 08 / 08Industry 08
Showroom & Store
Showroom and retail visuals—product highlights, in-store atmosphere, and brand-focused storytelling designed to drive foot traffic and online conversions.
Explore Showroom & Store
Slide 1 of 8: Construction
30 — Stat counter
Count-up on scroll-in, hairlines, tabular
0
Countries
0
Cities
0+
Projects
0
Clients
0
Videos
31 — Project / work list
Selected Work grid (card shadow, hover)
BorderBeam — preview
Light travels the card border — offset-path, pure CSS, 12s (used by step 38 blog cards)
Next up: 32-46 composed page sections (hero, about, services, map, proof, faq, blog, contact, /about set, home extras). Then responsive, styleguide, audit.