Figma inventory: Asset preview - purchase

  • File key: f5hqGpjBqXvfbWnNr4AXXO
  • File name: "Asset preview - purchase"
  • URL pattern: https://www.figma.com/design/f5hqGpjBqXvfbWnNr4AXXO/?node-id=<id with - instead of :>
  • Example: node 2003:1310 opens as ?node-id=2003-1310
  • MCP: get_metadata / get_screenshot / get_design_context with fileKey + nodeId (colon form)
  • Screenshots: docs/figma/screens/ (PNG, 1x, captured 2026-10-05)
  • Inventory is read-only. Nothing in Figma was edited.

Node index

Node idNameTypeThemeWhat it shows
2003:1310Ready for dev - No plan base price licenses & pricesSection (6 screens + States sub-section + dialog)defaultNo plan / logged-in buyer without packs or subscription. Pick license, add to cart, mini cart, pack upsell, contact support. Jira 943.
2022:474Ready for dev - Packs - Asset within packsSection (6 screens)defaultBuyer has a pack (punch card). Asset covered. Download with credit, downloading, re-download, empty pack, overloaded. Jira 944.
2022:1101Ready for dev - Packs - Asset outside punch cardSection (1 screen)defaultBuyer has a pack, but this asset's product is not in it. Jira 945 link (labelled "subscriptions").
2022:1287Ready for dev - Subscription - Asset within subscriptionSection (4 screens)defaultBuyer has a subscription covering the asset. Download, licenses covered, need a different license, buy a non-included license.
2022:1473Ready for dev - Subscription - Asset outside subscriptionSection (3 screens)defaultBuyer has a subscription, asset product not included. Buy one-off or request adding product.
2022:1659Ready for dev - Packs & subscriptionSection (4 screens)defaultBuyer has both a pack and a subscription. All four in/out combinations.
2144:5932Frame 3162Component sheetdefault (component fallbacks are NTB values)Purchase rail component set (11 variants), RadioButton (custom), Button with tooltip, Plan options.
2709:16607Component wrapper - Pack status sectionComponent sheetdefaultPack info section (radial chart + workspace + license badges), 5 variants.
2081:6986Component wrapper - Navbar/ClientComponent sheetdefault + NTBNavbar variants: Default, NTB, Theme4 (admin), Test checkout knapp (Cart button).
3703:17371Checkout page companyScreenntbCheckout, buying as company, card selected, terms card, "Pay now".
3705:18544Checkout page private personScreenntbCheckout, buying as private person, address form, invoice disabled, extra withdrawal checkbox.
3723:23690Checkout layout AScreenntbLayout variant A: items left, billing + payment + order summary right. Invoice selected. "Order with obligation to pay".
3723:24554Checkout layout BScreenntbLayout variant B: billing + payment + items left, sticky order summary right. Wider 1728 canvas.
3729:30859Checkout Page Layouts A/BScreenntbIteration merging A/B: "Review your images (4)" list, billing + order summary right. No payment method card. "Pay now · 5 475 kr".

Screens inside each asset preview section

SectionFrame idFrame nameRail instanceScreenshot
2003:13102089:11201Asset preview2591:17877base-01-asset-preview-full.png, base-02-rail-default.png
2003:13102594:15774Asset preview - Selecting another license2594:15787base-03-rail-selecting-another-license.png
2003:13102200:14686Asset preview - More license options2594:13374base-04-rail-more-license-options.png
2003:13102397:26830Mini cartn/abase-05-mini-cart.png
2003:13102397:27357Asset preview - Continue shopping2397:28604base-07-rail-continue-shopping.png
2003:13102397:29954Mini cart - 8 items pack offern/abase-06-mini-cart-8-items-pack-offer.png
2003:13102486:35460Dialog (Contact support)n/abase-08-contact-support-dialog.png
2003:1310 > 2373:16527 States2486:38907Overloaded media section2594:16254base-09-rail-state-overloaded-media.png
2003:1310 > States2594:26813Without instructions & restrictions2594:26826base-10-rail-state-without-instructions.png
2003:1310 > States2771:110708Vertical asset2771:110717base-11-rail-state-vertical-asset.png
2022:4742708:14446Packs - Asset within packs - Default state2708:14462packs-in-01-rail-default.png
2022:4742725:33186Packs - Asset within packs - Downloading state2794:120374packs-in-05-rail-downloading-a.png
2022:4742727:48114Packs - Asset within packs - Downloading state (after 400ms)2727:48130packs-in-06-rail-downloading-b.png, packs-in-07-frame-download-started-toast.png
2022:4742725:39075Packs - Asset within packs - Previously bought on the same pack2727:39564packs-in-04-rail-previously-bought.png
2022:4742725:38587Packs - Asset within packs - No credits left on pack2725:38603packs-in-02-rail-no-credits-left.png
2022:4742727:53559Packs - Asset within packs - Overloaded2727:53575packs-in-03-rail-overloaded.png
2022:11012734:64678Packs - Asset outide packs2734:64699packs-out-01-rail-asset-outside-pack.png
2022:12872397:41660Subscription - Asset within subscription2594:27248sub-in-01-rail-default.png
2022:12872594:51006Subscription - Asset within subscription (licenses covered expanded)2594:51022sub-in-02-rail-licenses-covered.png
2022:12872527:9086... - Other license options2594:39806sub-in-03-rail-other-license-options.png
2022:12872594:39924... - Select license2594:39941sub-in-04-rail-select-license.png
2022:14732594:50541Subscription - Asset outside subscription2594:56555sub-out-01-rail-default.png
2022:14732652:88229... - Buy license2652:88245sub-out-02-rail-buy-license.png
2022:14732652:92869... - Add to subscription2652:92885sub-out-03-rail-add-to-subscription.png
2022:16592739:69670Within pack and subscription2739:73550combo-01-rail-in-pack-and-subscription.png
2022:16592739:70715not within pack, within subscription2739:73622combo-02-rail-in-subscription-not-pack.png
2022:16592739:73694Within pack, not subscription2739:75003combo-04-rail-in-pack-not-subscription.png
2022:16592739:71232not within pack or subscription2739:75323combo-03-rail-in-neither.png

Other screenshots: 2003-1310-overview.png, base-12-states-section.png, packs-in-00-section-overview.png, comp-0*.png, nav-01-navbar-themes.png, checkout-0*.png.

Shared asset preview page (left side)

  • Canvas 1440 wide. Browser chrome mock (80px) with URL loki.ntb.no/search, tab "NTB LOKI".
  • Navbar 64px (see Navbar section).
  • Content column: 1056 wide, inner max width 768 (max-w-3xl), black background.
  • Right purchase rail: fixed 384 wide, white, sticky top, min-h 570.
  • Top bar: "Back to gallery" link (annotated: dynamic text by origin, e.g. "Back to gallery", "Back to Album", "Back to front page"). Right side: prev / next arrows, open-external, bookmark icon buttons.
  • Image in Aspect Ratio container.
  • Title: "Men's European Championship qualifying match Spain - Norway".
  • Caption: "Valencia, Spain 20190323. Håvard Nordtveit during the European Championship qualifying match between Spain a..." (truncated).
  • Creator / Credit rows with external-link arrow: "Creator Stian Lysberg Solum", "Credit NTB" (other frames "Zuma press").
  • Keyword chips: "Action", "Soccer", "European Championship", "International Matches", "Full Figure".
  • Metadata: "Photo taken 2019-03-23", "Archived 2019-03-24", "Resolution 3235 x 3052 px", "Print 300 DPI 61.4 x 40.9cm", "Media type Image", "Filetype JPEG", "Media ID C1XJUUvG_9Q", "Job ID ADHCLKdh12".
  • Rails of thumbnails: "Similar images", "Same photo series", "More from the same event", each with "View all ->" pill.
  • Footer: "Help & Feedback", link "Contact support" (opens Contact support dialog).

Asset preview variants: purchase rail per scenario

A. No plan (base prices) - section 2003:1310

Default rail (2591:17877):

  • Heading "Purchase a license".
  • Subtext "Prices in NOK, VAT (25%) excluded."
  • Radio cards, single select, first selected by default:
    • "Personal & Internal use" - "750 kr". Selected card shows description "Private home display or internal company use. No public web, social, or third-party distribution."
    • "Web & Social" - "1400 kr"
    • "Business Website & commercial" - "4000 kr"
    • "Example license 4" - "1400 kr"
    • "Example license 5" - "1400 kr"
    • Contact sales card: "Other usage options" + dark button "Contact us"
  • Instructions box (muted bg, info icon): label "Instructions & restrictions", body is the asset's restriction text. Example: "EDITORIAL USE ONLY No use with unauthorised audio, video, data, fixture lists, club/league logos or 'live' services. Online in-match use limited to 120 images, no video emulation. No use in betting, games or single club/league/player publications."
  • Alternative restriction text in other frames: "imago is entitled to issue a simple usage license at the time of provision. Personality and trademark rights as well as copyright laws regarding art-works shown must be observed. Commercial use at your own risk."
  • Footer bar (top border, shadow): primary full-width button "Add to cart" + cart icon.
  • Price format: integer, no thousands separator, suffix " kr" ("1400 kr", "4000 kr").

Selecting another license (2594:15787):

  • Same list, "Web & Social" selected and expanded with description.
  • Description copy is a placeholder copy of the Personal text.

More license options (2594:13374):

  • Same list fully visible incl. "Other usage options / Contact us".
  • Flow arrow "More license options" from default frame. In metadata, licenses 4, 5 and contact card sit inside a Collapsible (alternative 3) with a toggle button, so a collapsed state exists.

Continue shopping (2397:28604), after adding to cart:

  • Heading "Purchase a license", small subtext "Prices in NOK, VAT (25%) excluded."
  • Added item collapsed into a compact disabled row: badge "Added to cart" + "Personal & Internal..." (truncated) + "750 kr" in muted text.
  • Remaining options: "Web & Social 1400 kr", "Business Website & commercial 4000 kr".
  • Text button "View more license options" with chevron.
  • Footer: "Add to cart" disabled (grey) until another license is chosen, secondary button "View cart".

Mini cart drawer (2397:26830), 384 wide:

  • Close (X) button top right.
  • Header: cart icon, "Cart", count badge "1", link "Full view" + arrow-up-right.
  • Line item: thumbnail, title truncated "Men's European Champi...", price "1400 kr", license select dropdown showing "Web & Social", "Remove" with trash icon.
  • Dashed upsell card: stack icon, "Consider buying a pack", "If you're buying more than 3 images, packs are more value for your money ->".
  • Footer: "Total" "1400 kr", "Prices in NOK, VAT (25%) excluded.", primary "Checkout ->", secondary "Continue shopping".

Mini cart, 8 items pack offer (2397:29954):

  • Count badge "8".
  • Items all "750 kr" with select "Personal & Internal use". Titles: "2026 Russian Cross-Cou...", "Female skier goal line on...", "Downhill male cross coun..." (x2, list scrolls).
  • Upsell moves to footer and is highlighted (blue tint, solid border): "Consider buying a pack" / "If you're buying more than 3 images, packs are more value for your money. Learn more ->".
  • "Total" "6000 kr".
  • Flow label: "Many added items later".

Contact support dialog (2486:35460), from footer "Contact support":

  • Title "Contact support", close X.
  • "We'll include this media's details to speed things up:"
  • "Media ID: XXXXXX"
  • Label "Describe your request", textarea placeholder "Briefly describe the issue or question."
  • Buttons "Cancel" (outline), "Send message" (disabled until text).

States sub-section (2373:16527):

  • Overloaded media section: many keyword chips with "View more" toggle, rail identical to default.
  • Without instructions & restrictions: frame meant to show rail without the instructions box. The rail instance shown is the subscription "Inside subscription / Need a different license?" variant instead (see open questions).
  • Vertical asset: portrait image ("2026 Russian Cross-Country Skiing Championships In Yuzhno-Sakhalinsk"), rail unchanged.

B. Pack (punch card), asset within pack - section 2022:474

Accordion-based rail. No "Purchase a license" heading.

Default state (2708:14462):

  • Accordion 1, collapsed: "Covered by your pack" / subline "Personal & internal use • Social and web".
  • Accordion 2, expanded: "Need a different license?" / "Buy a one-off license (from 750 kr)".
    • Radio cards: "Web & Social 1400 kr", "Business Website & commercial 4000 kr" (licenses already covered by pack are omitted).
    • "View more license options" toggle.

Covered by pack expanded (Downloading state frames, 2794:120374):

  • Instructions & restrictions box.
  • Button state "Downloading" with spinner, disabled grey.
  • Pack status section: radial chart "8 left" / "of 10 downloads"; workspace logo + "Aschehoug" / "Workspace"; license badges with check: "Personal & Internal use", "Social & web", "Commercial use", "Educational purposes".
  • Collapsible link "View license details covered in your pack".
  • Collapsed "Need a different license?" / "Buy a one-off license (from 750 kr)".

After 400ms (2727:48130 + toast):

  • Toast at top of content: "Download started" / "1 credit used. Track it in order history." / button "View orders".
  • Rail button changes to outline "View order history ->", helper "Having issues? Download again from order history."
  • Counter decrements to "7 left of 10 downloads".

Default ready state (seen in component sheet): primary button "Download using pack".

Previously bought on same pack (2727:39564), flow label "Visiting previously downloaded asset":

  • Accordion title "Already licensed by your pack".
  • Primary button "Download again (free)", helper "Re-downloads do not use credits".
  • Radial chart greyed: "8 left of 10 downloads".

No credits left (2725:38603):

  • Accordion title "Pack empty" / "Personal & internal use • Social and web".
  • Alert: "Your pack is empty" / "Add more credits to your pack or buy a one-off license to download the media asset."
  • Primary "Request more download credits", outline "Buy a one-off license (from 750 kr)".
  • Instructions box, then disabled "Download using pack".
  • Chart "0 left of 10 downloads", badges placeholder "Badge".
  • Collapsed "Need a different license?" / "Buy a one-off license (from 750 kr)".

Overloaded (2727:53575):

  • Long workspace name "LKaslkbasCKBLasca..." truncated.
  • Chart "10000 left of 1000000 downloads" (text overflows ring).
  • Six license badges truncated + "View 10 more ->".
  • "View license details covered in your pack" expanded: "Personal & Internal use" with description list.

C. Pack, asset outside pack - section 2022:1101 (2734:64699)

  • Alert: "Not in your pack" / "Your pack: NTB Creative" / "This asset: NTB Editorial" / button "View your plan" + arrow-up-right.
  • Heading "What can I do?"
  • Accordion expanded "Buy a one-off license now (from 750 kr)":
    • "Personal & Internal use 750 kr", "Web & Social 1400 kr", "Business Website & commercial 4000 kr" (none preselected).
    • "Show more" toggle.
    • "Add to cart" primary.
  • Accordion collapsed "Add NTB Editorial to your pack or subscription".

D. Subscription, asset within subscription - section 2022:1287

Default (2594:27248):

  • Accordion expanded "Included in your subscription":
    • Instructions & restrictions box.
    • Primary "Download".
    • Underlined collapsible "What's included in your subscription".
  • Accordion collapsed "Need a different license?" / "Contact support to add a new license onto your subscription or buy a one-off license".

Licenses covered (2594:51022), flow label "Licenses covered by subscription":

  • Collapsible renamed "Licenses covered in your subscription", expanded.
  • List items with license icon: "Personal & Internal use" + description, "Social & web" + description (placeholder copy reused).

Other license options (2594:39806), flow label "Outisde subscription":

  • "Included in your subscription" collapsed.
  • "Need a different license?" expanded:
    • Outline button "Request adding a license onto subscription".
    • Divider text "or select a license to buy directly".
    • "Web & Social 1400 kr", "Business Website & commercial 4000 kr".
    • Disabled card "Personal & Internal use" with badge "Included".
    • "Show more" toggle.
  • Sticky footer "Add to cart" disabled.

Select license (2594:39941):

  • "Web & Social" selected with description.
  • Disabled card badge now reads "Subscribed" (was "Included").
  • "Add to cart" enabled.

E. Subscription, asset outside subscription - section 2022:1473

Default (2594:56555):

  • Alert "Not in your subscription" / "Your subscription: NTB Creative, NTB Creative videos. This asset: NTB Editorial" / "View your plan".
  • "What can I do?"
  • Collapsed: "Buy a one-off license now (from 750 kr)", "Add NTB Editorial to your subscription".

Buy license (2652:88245), flow label "Buy a one-off license now":

  • Alert body "Your subscription: NTB Creative" / "This asset: NTB Editorial".
  • Expanded buy accordion: Personal selected by default with description, Web & Social, Business Website & commercial, "Show more", "Add to cart".

Add to subscription (2652:92885), flow label "Add to subscription":

  • Expanded "Add NTB Editorial to your subscription":
    • Heading "Request NTB Editorial".
    • Body "Workspace admins can send a request to add NTB Editorial to your workspace. We'll include your workspace and seat count automatically. Sales will contact you as soon as possible to finalize details. No changes will be made immediatly."
    • Field "Notes for sales (optional)", textarea placeholder "Anything we should know? e.g., team, intended use, desired start date".
    • Primary "Send request", secondary "Cancel".

F. Pack and subscription - section 2022:1659

  • In pack and subscription (2739:73550): "Included in your subscription" expanded with "Download"; collapsed "Covered by your pack" / "Personal & internal use • Social and web"; collapsed "Need a different license?". Subscription takes precedence.
  • In subscription, not pack (2739:73622): same, middle accordion "Not in your pack" / "Personal & internal use • Social and web".
  • In pack, not subscription (2739:75003): "Covered by your pack" expanded with "Download using pack" and pack status; collapsed "Not included in your subscription"; collapsed "Need a different license?" with subscription copy.
  • In neither (2739:75323): alert "Not in your packs or subscription" + "View your plan" (no body line); "What can I do?"; collapsed "Buy a one-off license now (from 750 kr)", "Add NTB Editorial to your packs or subscription".

Pricing components

Purchase rail component set (inside 2144:5932, set 2508:45366)

  • Properties: On Subscription (bool), within packs (bool), Subscription details (bool), View other licenses (bool), Pack state (false / default / prev downloaded / No credits).
  • Grid columns: "No plan", "Within subscription", "Within pack", "Within subscription and pack".
  • Grid rows: "Default", "Show license details", "View other licenses", "Outside subscription".
  • Variants:
    • 2558:13431 No plan default (base price list).
    • 2516:87195 Within subscription default.
    • 2577:11796 Within subscription, license details open.
    • 2594:38961 Within subscription, view other licenses.
    • 2594:55704 Outside subscription.
    • 2591:17654 Within pack default ("Download using pack").
    • 2724:25750 Within pack, previously downloaded.
    • 2727:56678 Within pack, no credits (trigger shows placeholder "Trigger Text").
    • 2739:71749 Within subscription and pack.
    • 2739:74238 Within pack, not subscription.
    • 2739:75164 Not in packs or subscription.
  • Width 384, height 694.

RadioButton (custom), 2591:15055

  • Description: "Tweaked for base prices, packs and subscriptions."
  • Props: State (Default / Disabled), Selected, Discount, Contact sales, Descrption (sic).
  • Anatomy: bordered card, p-2.5 (10px), gap-2, rounded-lg, 16px radio dot, title left (14px medium), price right ("333333 kr").
  • Variants:
    • Default unselected: "Title" + "333333 kr".
    • Selected + description: tinted bg (bg-primary/5), darker border, description "This is a radio description." in muted text.
    • Discount: badge "20% Discount" above price (outline badge).
    • Discount selected: badge + price + description.
    • Contact sales: "Other usage options" + primary button "Contact us" (h 28, xs text).
    • Disabled (purchased): muted title, secondary badge with check icon "Included", no price.
    • Disabled + description: badge "Included", strikethrough price "333333 kr", description.
  • Grid labels: columns "Not selected license", "Discount", "Purchased"; rows "Default", "Selected", "Purchased".

Button with tooltip (2144:6692)

  • Variants Tooltip=false, Tooltip=true.
  • Small outline "Button" with icon; tooltip is dark panel with "Do's" / "Don't" lorem placeholder.
  • Not used in any screen reviewed.

Plan options (2149:8944)

  • Card titled "Plan options".
  • Rows: stack icon, "5-pack", "5% discount" / "Per download"; "10-pack", "10% discount" / "Per download".
  • Not used in any screen reviewed.

Pack status section (2709:16650, sheet 2709:16607)

  • Variants: Test=test 3 (chart + workspace + 4 badges), Test=1 (chart only), Test=Test2 (chart + "Workspace / Aschehoug" order swapped + "Badge"), Test=Few left (orange short arc), Test=none left (full grey ring, "0 left").
  • Chart copy: "8 left" / "of 10 downloads".
  • Workspace block: square logo, name "Aschehoug", caption "Workspace".
  • Badges: secondary badge with check icon.
  • Theme=Default (29:2474), 64px: NTB "M" logo mark, search input "Search", filter icon button, right avatar + round cart icon button.
  • Theme=NTB (29:2806), 120px: orange "NTB" wordmark, search, filter, cart icon, avatar. Second row: segmented toggle "Creative" / "Editorial", selects "Order by: relevance" and "Images".
  • Theme=Theme4 (2830:14824): admin nav. Logo + "Admin", menu "Dashboard", "Customers", "Sales", "Content", "System" (open), "Analytics", avatar. Breadcrumb "Front page > My albums > Moments & Memories".
  • Theme=Test checkout knapp (2397:21496): same as Default, but cart is a labelled outline button "Cart" + chevron. This is the variant used in all asset preview frames.
  • No logged-out variant exists. All variants show an avatar.

Checkout (NTB theme)

Common

  • Header (57px): NTB wordmark + "Bilder og video"; workspace switcher button with initials avatar + name + chevron. Layouts A, B, A/B add a dark-mode moon icon button.
  • Steps bar: "Back to cart" link; stepper "Cart" (done, check) - "2 Checkout" (current) - "3 Confirmation". Legal note: stepper required by Ehandelsloven §11.
  • Container max width 1200 (company/private) or 1280 (layouts).
  • Item card: 120x80 thumbnail, title, media ID in mono ("NTB-20240912-001"), license badge, Resolution, Print size, credit line, price + "incl. VAT".
  • Items in all checkout frames:
    • "Parliament building at sunset", "NTB-20240912-001", "Editorial – single use", "5472 × 3648 px", "46.4 × 30.9 cm at 300 dpi", "Credit when publishing: Photo: Kari Nordmann / NTB", "1 875 kr". Restriction: "For editorial use only. Not permitted in advertising or commercial contexts."
    • "Press conference, Prime Minister's Office", "NTB-20240830-047", "Editorial – 3 months", "4000 × 2667 px", "33.9 × 22.6 cm at 300 dpi", "Ola Berg / NTB", "1 125 kr". No restriction.
    • "Demonstration, Karl Johans gate", "NTB-20240715-312", "Editorial – single use", "3840 × 2160 px", "32.5 × 18.3 cm at 300 dpi", "Ingrid Haugen / NTB", "1 500 kr". Restriction: "The image must not be cropped in a way that removes identifying features."
    • A/B only: "Portrait: Minister of Finance", "NTB-20240905-088", "Editorial – 6 months", "2 667 × 4 000 px", "22.6 × 33.9 cm at 300 dpi", "Photo: Lars Eivind Bones / NTB", "975 kr".
  • Price format: Norwegian thousands space, "1 875 kr". Prices incl. VAT. Legal note: consumer prices must include VAT (Prisopplysningsforskriften §2).
  • Price summary: "Subtotal (3 images) 4 500 kr", "Includes VAT (25%) 900 kr", divider, "Total 4 500 kr" (large).
  • Terms: "License agreement (PDF)" (download icon), "Privacy notice" (external icon), "Questions or complaints? See how we handle complaints."
  • Checkbox (unticked by default): "I accept the license agreement and the usage restrictions listed for each image."
  • Storage line: "Your order and license agreement are saved under Account → Orders and sent to you by email. The agreement is available in English and Norwegian."
  • Status above button: "Accept the license agreement to continue."
  • Order button (disabled look until accepted): "Pay now". Legal note: must state obligation to pay (Angrerettloven §16).
  • Contact line: "Unsure about licensing? Contact us" + "salg@ntb.no · +47 000 00 000".
  • Footer: "NTB AS · Org. no. 000 000 000 MVA · Foretaksregisteret · Skippergata 22, 0152 Oslo · kundeservice@ntb.no".

3703:17371 Checkout page company

  • Workspace "Aftenposten AS" (avatar "A").
  • Title "Your order (3 images)", items left (740 wide).
  • Right sidebar (380): Billing details, Price summary, Payment method, Terms, order button.
  • Billing details: legend "Buying as", radios "Company" (selected) / "Private person".
  • Company block (muted bg): "Aftenposten AS", "Org. no. NO 000 000 000 MVA", "Akersgata 55, 0180 Oslo", link "Edit". Prefilled from workspace.
  • Payment method: radio cards with icons "Card" (selected, highlighted) and "Invoice".

3705:18544 Checkout page private person

  • Workspace "Kari's workspace" (avatar "KA").
  • "Private person" selected.
  • Form: "Full name" (placeholder "Your full name"), "Street address" ("Street address"), "Postcode" ("0000"), "City" ("City").
  • Payment: "Card" selected, "Invoice" disabled. Helper "Invoice is only available when buying as a company."
  • Extra checkbox: "I want the images delivered immediately, and I understand that I lose my 14-day right of withdrawal once downloading starts."
  • Same price summary and "Pay now".

3723:23690 Checkout layout A

  • Items left, each card has "Remove" (trash) under price.
  • Item details in 2 columns: "Resolution" / "5 472 × 3 648 px", "Print size (300 dpi)" / "46.4 × 30.9 cm".
  • Restriction shown as Alert inside card. Credit "Credit when publishing: Kari Nordmann / NTB".
  • Right column: Billing details (no "Buying as" legend), Payment method (plain radios, "Invoice" selected), Order summary card.
  • Order summary: per line title + license + price, "Includes VAT (25%) 900 kr", "Total 4 500 kr", accept checkbox, inline links "License agreement (PDF)", "Privacy notice", "How we handle complaints", status, button "Order with obligation to pay · 4 500 kr", storage line (short, no languages), contact row with mail and phone icons "+47 00 00 00 00".
  • Footer address differs: "Langkaia 1, 0150 Oslo".

3723:24554 Checkout layout B

  • Canvas 1728.
  • Left column order: Billing details, Payment method ("Card" selected), section "Your images (3)" with item cards.
  • Right column: Order summary card only (same content as A).

3729:30859 Checkout Page Layouts A/B

  • Likely the converged direction (newest node, selected in file at inspection time).
  • Left: "Review your images (4)" + "Check the licence and restrictions for each image." Flat list with dividers, no card borders.
  • Item details as definition list: "Resolution", "Print size", "Credit" ("Photo: Kari Nordmann / NTB"). Restriction alert. Button "Remove".
  • Right (384): Billing details (Company selected, Aftenposten AS block), Order summary.
  • Order summary: 4 lines, "Includes VAT (25%) 1 095 kr", "Total 5 475 kr", checkbox, stacked links, status, "Pay now · 5 475 kr", storage line, contact block stacked.
  • No Payment method card.

License and purchase scenarios implied by the designs

  1. No plan: pick one license from a priced list, see restrictions, add to cart.
  2. No plan: change selected license before adding (description expands on selected card).
  3. No plan: expand/collapse extra licenses, "Other usage options / Contact us" for custom licensing.
  4. No plan: after adding, rail shows "Added to cart" row, others still addable, "View cart".
  5. Mini cart: change license per line, remove line, total, "Checkout", "Continue shopping".
  6. Pack upsell in cart: soft card at 1-3 items, highlighted footer card when more than 3 items.
  7. Contact support dialog with media ID prefilled.
  8. Asset with or without instructions & restrictions box. Portrait asset. Long keyword lists.
  9. Pack covers asset: "Download using pack", credit counter, covered licenses, license details.
  10. Pack download in progress: spinner, then toast "Download started", counter decrements, "View order history".
  11. Pack, asset previously downloaded: "Download again (free)", no credit used.
  12. Pack empty: "Request more download credits" or "Buy a one-off license".
  13. Pack covers asset but buyer needs another license: one-off purchase of non-covered licenses.
  14. Pack does not cover asset product: "Not in your pack", buy one-off or add product to plan.
  15. Subscription covers asset: "Download", view included licenses.
  16. Subscription covers asset, need different license: request license onto subscription, or buy one-off. Covered licenses shown disabled ("Included" / "Subscribed").
  17. Subscription does not cover asset: buy one-off, or admin sends "Request NTB Editorial" to sales with notes.
  18. Pack plus subscription: all four combinations; subscription wins when both cover.
  19. Large numbers / overflow: very high credit counts, many licenses, long workspace names.
  20. Discounted license price (radio "20% Discount" badge) and pack plan discounts (5-pack 5%, 10-pack 10%). Component only.
  21. Checkout as company: prefilled org details, card or invoice.
  22. Checkout as private person: address form, card only, waive 14-day withdrawal right.
  23. Checkout terms gating: order button disabled until license agreement accepted.
  24. Checkout item removal and per-item restrictions and credit lines.
  25. Checkout dark mode toggle (icon present in layouts).

Design tokens and components used

Default theme (asset preview, from get_variable_defs 2089:11201)

  • Font: font/font-sans = Geist. Browser chrome uses Roboto.
  • base/background #ffffff, base/foreground #0a0a0a, base/muted #f5f5f5, base/muted-foreground #71717a.
  • base/border #e5e5e5, base/input #e4e4e7, base/primary-foreground #fafafa.
  • custom/bg-primary\5 dark:bg-primary\10 #1717170d (selected radio bg).
  • alpha/40 #ffffff99 (contact sales card bg).
  • Radius: rounded-md 8, rounded-lg 10, rounded-full 9999. Older border radius/md 6 also present.
  • Spacing: 0.5=2, 1=4, 1.5=6, 2=8, 2.5=10, 3=12, 4=16.
  • Text: xs 12/16, sm 14/20, base 16/24, lg 18, 2xl 24/32. Weights 400, 500.
  • Heights: h-7 28, h-8 32, h-9 36, h-10 40.
  • shadow/sm two-layer drop shadow; used on rail and rail footer.
  • max-w-3xl 768 (content), min-w-sm 384 (rail).
  • Icons: Remix Icon.

NTB theme (checkout, from get_variable_defs 3703:17371)

  • base/background #f5f1ef, base/foreground #1c1817, base/card-foreground #1c1817.
  • base/primary #320002 (Deep dark red), base/primary-foreground #ffe2da (Peach).
  • base/muted #ece4e1, base/muted-foreground #3b302b, base/border #9a918d, base/input #9a918d.
  • Brand: NTB/Primary colors/Lava-Brand #ff5120.
  • Fonts: Geist, Geist Mono (media IDs).
  • Radius: sm 2, md 4, lg 6, xl 8, full.
  • Spacing adds 6=24, 8=32. container-padding-x 24.
  • Text adds xl 20; line heights leading-4..8 (16..32). Weight semibold 600 for headings.

Layout facts

  • Purchase rail: 384 wide, sticky top, header block pt-20 px-24 pb-12 gap-28, footer block px-24 py-28 gap-12 with top border and shadow-sm.
  • Asset metadata: 12-column grid, gap-x-12 gap-y-40, width 768.
  • Radio card: p-2.5 gap-2 rounded-lg border, title/price row gap-3.
  • Checkout cards: border 1px, rounded-lg or rounded-xl, padding 24.

Figma component names used in screens

  • shadcn-mapped: Button (Default sm, outline, secondary), Badge (Outline, Secondary), Accordion / AccordionItem, Alert, Collapsible (alternative 3), Field, Input / Basic, Toggle, Toggle Group, Separator, Table / Cell, Sidebar / SidebarMenuItem, Dialog, Chart / Radial Chart, Aspect Ratio.
  • Custom: Purchase rail, RadioButton, Pack info section, Mini cart /item, Navbar, Typography/H3, Typography/H4, Typography/Body p, Media meta data section.
  • Checkout frames are code-generated layers (names like OrderItemCard, BillingDetailsWrapper, PriceSummaryCard, PaymentMethodCard, TermsCard, OrderButton, OrderZone, ItemCard), not library instances.
  • No Code Connect mappings exist for these components.

Annotations found

  • Back link: dynamic text by origin ("Back to gallery", "Back to Album", "Back to front page").
  • Checkout company frame has 13 legal annotations: stepper (Ehandelsloven §11), credit per image (Åndsverkloven §5), highlighted restrictions (Rototec ruling), org. no. + address on invoice (Bokføringsforskriften §5-1-2), prices incl. VAT (Prisopplysningsforskriften §2), PDF terms (Ehandelsloven §11), separate privacy link (Datatilsynet), complaint info (Forbrukertilsynet), unticked checkbox (standardvilkår), storage/language line (Ehandelsloven §11), "Pay now" wording (Angrerettloven §16), phone + email (Angrerettloven §8 d), seller footer (Ehandelsloven §8).

Open questions / inconsistencies

  • VAT: asset rail and mini cart say "VAT (25%) excluded". Checkout shows prices "incl. VAT". The legal note says consumer prices must include VAT. Which applies on the asset page, and does it depend on company vs private?
  • Prices: asset rail uses 750 / 1400 / 4000 kr (no thousands separator). Checkout uses 1 875 / 1 125 / 1 500 / 975 kr with space separator. Different license names too ("Personal & Internal use" vs "Editorial – single use"). Price model and number format need alignment.
  • License naming: "Social & web" vs "Web & Social" vs "Social and web" across rail, badges and accordion sublines.
  • Selected-card description in "Selecting another license" and "Licenses covered" reuses the Personal & Internal use text for other licenses (placeholder).
  • "Included" vs "Subscribed" badge for licenses already covered by subscription.
  • "Without instructions & restrictions" state frame uses the subscription rail instead of a no-plan rail without the instructions box.
  • Pack "No credits" component variant shows placeholder accordion title "Trigger Text"; screen shows "Pack empty".
  • Pack default screen shows "Covered by your pack" collapsed with "Need a different license?" expanded; component default shows covered expanded. Which is the initial state?
  • Overloaded pack chart text overflows the ring ("10000 left of 1000000 downloads").
  • Typos in copy: "immediatly", "Outisde subscription", "outide packs", prop "Descrption".
  • Jira link in section 2022:1101 is titled "945 – Wireframe showcasing subscriptions" while section is about packs.
  • Checkout payment: company frame card radios with icons; layouts A/B use plain radios; A/B final has no payment method at all. Is payment method dropped or moved?
  • Checkout button copy: "Pay now", "Order with obligation to pay · 4 500 kr", "Pay now · 5 475 kr". Invoice selection with "Pay now" is semantically odd.
  • Footer address: "Skippergata 22, 0152 Oslo" (company/private) vs "Langkaia 1, 0150 Oslo" (layouts).
  • Phone: "+47 000 00 000" vs "+47 00 00 00 00".
  • Private checkout has the withdrawal waiver checkbox; layouts A/B never show private state.
  • Mini cart says "Full view", checkout says "Back to cart": no full cart page design was in scope.
  • Navbar has no logged-out variant. No logged-out asset page or sign-in gating is designed.
  • No editorial-approval gating, quota/credit purchase flow, or confirmation (step 3) screen is designed.
  • Radio component variable fallbacks are NTB values (#320002, #ece4e1) while screens render the default theme. Confirm which theme the public asset page uses.
  • Discount badge and Plan options exist only as components; no screen shows where discounts appear.