COMPONENTS · CARDS

Basic cards

The building blocks every Avava page is made of. Click anything — it works.
THEME
DENSITY
00

Anatomy

Engineering drawing — dimensions, numbered parts and the spec list
AABBCCDDEEFF 11223344
ASpring 27 campaignNordic Thread · Proposal⋯
Outerwear for SS27, shot in Berlin and on the Baltic coast. Calm, honest light.
LaterOpen deal
380211 201414 123546
NOPART · SPEC
1Headericon 36 · title 16/700 · ⋯ 32
2Body13.5/1.55 · progress 6
3Footerdivider · pt 12 · 36 pills
4Cornerradius 24 (18 compact)
5Primary action#f2f3f6 · 800 · 36
6Surfacevar(--b-1b1f2a,#1b1f2a) → var(--b-151821,#151821) · 1px
AVAVA · STUDIO OSDRAWNREV03CARD / BASICSCALE1:1SHEET1/1
ALL DIMENSIONS IN PX · DARK THEME
01

Content

Text-first cards
Simpletitle + text
Brand workshop recapThree directions shortlisted. Lena prefers the “quiet coast” route — moodboard v2 goes out Friday.Updated 2 h ago
Header + menutitle · sub · ⋯
Lookbook selectsFjord Outdoor · 42 images
Round 1 is ready for the client. Hero frames are starred.
Footer actionsbody · divider · 2 actions
Approve round 1 selects?42 images from the Bergen shoot. Approving sends them to retouching.
Statuschip · progress · meta
Kaya — Website v2
Milestone 3 of 468%
Due Nov 27
Accent platelight gradient · dark ink
NEXT UP · IN 25 MINClient review — Nordic Thread14:30 – 15:00 · Google Meet · Lena, Olivia
01b

Content · Editorial

The same five cards without boxes — big numbers, rules and type
SIMPLE
01NOTE · OCT 16
Brand workshop, in three lines.“The quiet coast route feels most like us.”— Lena Holm, Nordic Thread
MENU
02⋯
Lookbook selectsFjord Outdoor · 42 images
01Open→02Share with client03Duplicate04Delete
FOOTER
03DECISION NEEDED
Approve round 1?42 frames from Bergen go to retouching tomorrow at 09:00.
Approve →or decide later
STATUS
04● AT RISK
Kaya — Website v2
54%6 days
behind plan
BriefDesignBuildLaunch
ACCENT
25NEXT UP · IN 25 MINClient review,
Nordic Thread14:30 – 15:00 · Google Meet · Lena, Olivia
Join call →Snooze
02

Media

Image slots — drop your own photos
Cover top16:10 image · badge · text
New
CASE STUDYMývatn at dawnNordic Thread · 6 min read
Full-bleedimage · gradient · text over
FJORD OUTDOOR · LOOKBOOKParka lookbook, Bergen in the rainShot by Jon Reyes
Horizontalimage left · text right
Glaze studies for the new shopKaya Ceramics · 18 imagesOpen gallery →
Gallery 2×24 slots · +N overlay
Behind the scenes16 photos
+12
02b

Media · Magazine

The same four cards without boxes — square photos, rules and big type
COVER TOP
CASE STUDY · Nº 086 MIN
Mývatn at dawnHow we shot Nordic Thread’s spring campaign in four hours of blue light.
FULL-BLEED
FJORD OUTDOOR · AW26
Bergen,
in the rain.Shot by Jon Reyes
HORIZONTAL
03
Glaze studies for the new shopKaya Ceramics · 18 images · Open →
GALLERY
+12
Behind the scenes15 PHOTOS
03

People

Team and clients
Profileavatar · stats · 2 actions
Olivia LaneProducer · Berlin
24projects1,248followers4.9★rating
People listavatar · status dot
Alex ReyesPhotographer · on setOnline
Sara OrtizArt directorAway
Jon ReyesPhotographer · BergenOnline
Ana PetitRetoucherOffline
Clientlogo · contact · chips
NTNordic ThreadOslo · client since 2023
Lena Holmlena@nordicthread.no
3 deals€62k wonpays in 12 d
03b

People · Magazine

Profile as a cover story, the team as a call sheet, the client as a feature
PROFILE
AVAVA · PEOPLENº 01 / 24
Olivia SINCE’24MARCH PRODUCER · BERLIN
LaneONLINE
“I make sure the light, the crew and the client all show up at the same time.”
24PROJECTS1,248FOLLOWERS4.9RATING
Follow →Message
PEOPLE LIST
FRI · OCT 16On the call sheet
1 ON1 AWAY1 BUSY1 OFF
01Alex ReyesPhotographerOn set · BergenONLINE
02Sara OrtizArt directorBack at 14:00AWAY
03Jon ReyesPhotographerIn a client callBUSY
04Ana PetitRetoucherLast seen 2 h agoOFFLINE
Full roster (12) →
CLIENT
NTCLIENT · SINCE 2023
Nordic ThreadOSLO
“You made our coats look like weather.LENA HOLM — HEAD OF MARKETING
2023Winter lookbook€12.8k
2025Spring 26 campaign€32.4k
2026Spring 27 campaign€38.6k · open
€62K WON · PAYS IN 12 DOpen →
04

Lists

Rows inside a card
Checklistprogress · checkboxes
Shoot prep2 of 5
Eventstime · colour bar
Today
09:00Stand-upTeam · 15 min
11:00Fjord — lookbook selectsClient · Google Meet
13:30Portfolio reviewTeam · Room 2
16:00Kaya — website sign-offClient · Studio A
Tabs insidesegment · swap content
Revenue
€18,420+12% vs last week
04b

Lists · Magazine

Checklist, today and revenue with mastheads, giant numbers and rules
CHECKLIST
SHOOT PREP · Nº 08THU 08:00
2/ 5Before we rollDUE IN18h
✓Book the freight liftOliviaMON
✓Confirm crew call sheetOliviaTUE
03Pack 2 × Profoto B10AlexTODAY
04Weather check for ThursdaySaraWED
05Print model releasesAnnaTHU
+ Add a lineAssign →
TODAY
THE DAILY · VOL. 424 EVENTS · 4.75 H
16FRIDAYOctober
0811141719
09:00→ 09:15TEAMStand-upGoogle MeetDONE
11:00→ 12:00CLIENTFjord — lookbook selectsJonas Berg · MeetNEXT · IN 25 MIN · JOIN →
13:30→ 15:00TEAMPortfolio reviewRoom 2
16:00→ 17:00CLIENTKaya — website sign-offStudio A
Open calendar →
REVENUE · TABS
THE LEDGERWEEK 42 · 2026
DayWeekMonth
€18.4k
▲ 12%vs €16.4k last week · best since June
€3.9k
MTWTFSS
€14.2kINVOICED€4.2kRETAINERS92%OF GOAL
- - - last week
05

States

How cards react
Hoverlift −3px · cyan border
Hover meInteractive cards lift 3 px and get a cyan border. Use only when the whole card is clickable.
Selectedclick to toggle
Loadingskeleton · shimmer
Emptyicon · line · action
No projects yetProjects you create or join show up here.
Errorcoral · retry
!Couldn’t load invoicesThe server took too long to answer. Your data is safe.
Disabledopacity .5 · no pointer
Client portal🔒 Studio+
Upgrade to give clients their own login with proposals and invoices.
05b

States · Magazine

Six states frozen side by side — giant words, numbered tags, ruled actions
HOVER
01HOVERLIFT −6
HoverHoverThe title fills from left as you move in. Rule thickens 1 → 3 px, arrow slides 6 px.
Open case study→
SELECTED
02SELECTED1 OF 3
€49/ seat
Studio planUnlimited projects · client portal · 2 TB✓CHOSEN
SelectedClick to clear
LOADING
03LOADING0.8 S
FETCHING ACTIVITY · 3 / 5
↻ Reloadskeleton mirrors layout
EMPTY
04EMPTY0 ITEMS
00your first
project here
Nothing here — yet.Projects you create or are invited to land on this page.
+ Start a project→
ERROR
05ERRORGET /INVOICES
504
Invoices didn’t load.Timed out after 10 s. Your data is safe — we’ll retry in 8 s.
↻ Retry nowSimulate error
DISABLED
06DISABLEDSTUDIO+
Portal
Client portalClients log in to see proposals and pay invoices.🔒 LOCKED · UPGRADE
Enablecursor: not-allowed
DO✓One clear primary action per card — on the right✓Keep the whole card clickable OR its buttons, not both✓Use skeletons that match the final layout✓Put status in a chip, not in coloured text✓Same radius and padding across a grid
DON’T✕Nest cards inside cards more than once✕Mix accent plates and dark cards in one row✕Show more than 3 actions — move the rest to ⋯✕Use coral for anything that isn’t a problem✕Truncate titles to one word — wrap to two lines instead