# Imprint — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://imprint.co/
Captured: 2026-10-13
CSS measured: 2026-10-13T02:03:52.089Z at 1440×1000 — https://imprint.co/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

The website employs a refined, minimal corporate aesthetic characterized by ample whitespace, a light gray canvas, and stark black typography. Large, confident sans-serif headings dominate the layout, establishing a strong typographic hierarchy. Visual interest is introduced through high-quality photography in carousels and soft 3D renders that act as product metaphors. A distinctive floating pill-shaped navigation bar anchors the user experience. Sections are clearly delineated by generous spacing and structural elements like large stat blocks and feature pairings.

## Classification

- Industry: finance
- Site type: Blog, Store
- Business model: Shopping, Software
- Styles: minimal, typographic, corporate, photographic, soft-3d
- Platform: Framer
- Technology: Not identified

## Typography

- Display: UniversalSans-500 Regular — weight 504; size 125px; line-height normal; tracking -2px; Regular (95% role confidence, computed values)
- Heading: UniversalSans-500 Regular — weight 400; size 76px; line-height 76px; tracking -3px; Regular (95% role confidence, computed values)
- Body: UniversalSans-500 Regular — weight 400; size 18px; line-height 21.6px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #EFEFEF: color-1: computed rgb(239, 239, 239); AI role: #EFEFEF provides the main background color for the page. (95% role confidence, computed values)
- Text — text #000000: color-2: computed rgb(0, 0, 0); AI role: Solid black (#000000) used for primary headings and body copy. (95% role confidence, computed values)
- Surface — surface #FFFFFF: color-4: computed rgb(255, 255, 255); AI role: White (#FFFFFF) is used for cards, the navigation pill, and stat block backgrounds. (90% role confidence, computed values)
- Muted Text — muted text #887C71: color-5: computed rgb(136, 124, 113); AI role: #887C71 used for secondary labels and overlines like 'SHELL'. (80% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "UniversalSans-500 Regular",
    "fontStack": "\"UniversalSans-500 Regular\", \"UniversalSans-500 Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "58px",
    "lineHeight": "63.8px",
    "letterSpacing": "-3px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h2",
        "text": "An impactful partner to iconic brands",
        "top": 1783,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Imprint Core means complete control",
        "top": 2983,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Built for impact, every step of the way.",
        "top": 3583,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "UniversalSans-500 Regular",
    "fontStack": "\"UniversalSans-500 Regular\", \"UniversalSans-500 Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "76px",
    "lineHeight": "76px",
    "letterSpacing": "-3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Bespoke credit cards, deposit accounts, and installment loans.",
        "top": 1200,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "UniversalSans-500 Regular",
    "fontStack": "\"UniversalSans-500 Regular\", \"UniversalSans-500 Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "38.4px",
    "letterSpacing": "-1.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Perfectly configured co-branded financial products.",
        "top": 357,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "UniversalSans-500 Regular",
    "fontStack": "\"UniversalSans-500 Regular\", \"UniversalSans-500 Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 34,
    "contexts": [
      {
        "tag": "p",
        "text": "Products",
        "top": 278,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Technology",
        "top": 278,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Partners",
        "top": 278,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "UniversalSans-500 Regular",
    "fontStack": "\"UniversalSans-500 Regular\", sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "21.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 18,
    "contexts": [
      {
        "tag": "p",
        "text": "Meet the powerful, purpose-built co-branded products that seamlessly adapt to your brand.",
        "top": 496,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "SHELL Redefining the Shell card for everyday relevance",
        "top": 2544,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "SHELL",
        "top": 2588,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "UniversalSans-500 Regular",
    "fontStack": "\"UniversalSans-500 Regular\", \"UniversalSans-500 Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "Predict",
        "top": 3773,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Predict",
        "top": 3787,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Insights",
        "top": 3773,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "UniversalSans-500 Regular",
    "fontStack": "\"UniversalSans-500 Regular\", sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Learn more",
        "top": 1565,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Learn more",
        "top": 2532,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Learn more",
        "top": 2532,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "UniversalSans-500 Regular",
    "fontStack": "\"UniversalSans-500 Regular\", \"UniversalSans-500 Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "125px",
    "lineHeight": "112.5px",
    "letterSpacing": "-7.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "24/ 7",
        "top": 4879,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "UniversalSans-500 Regular",
    "fontStack": "\"UniversalSans-500 Regular\", \"UniversalSans-500 Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "38.4px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Our co-branded financial products attract more users, drive increased spend and engagement, and help",
        "top": 1400,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "UniversalSans-500 Regular",
    "fontStack": "\"UniversalSans-500 Regular\", \"UniversalSans-500 Regular Placeholder\", sans-serif",
    "weight": "504",
    "size": "125px",
    "lineHeight": "normal",
    "letterSpacing": "-2px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "10",
        "top": 4562,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "s",
        "top": 4562,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "99.9",
        "top": 4562,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#EFEFEF",
    "alpha": 1,
    "cssValue": "rgb(239, 239, 239)",
    "count": 3,
    "contexts": [
      {
        "tag": "body",
        "text": "html body { background: var(--token-f24fbd61-519a-465a-b915-6988c528f8e8, rgb(239, 239, 239)); }Prod",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "ProductsTechnologyPartnersAboutPerfectly configured co-branded financial products.Meet the powerful,",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1000,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 81,
    "contexts": [
      {
        "tag": "p",
        "text": "Products",
        "top": 278,
        "property": "text"
      },
      {
        "tag": "h3",
        "text": "Perfectly configured co-branded financial products.",
        "top": 357,
        "property": "text"
      },
      {
        "tag": "h1",
        "text": "Bespoke credit cards, deposit accounts, and installment loans.",
        "top": 1200,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 0.6,
    "cssValue": "rgba(255, 255, 255, 0.6)",
    "count": 2,
    "contexts": [
      {
        "tag": "nav",
        "text": "ProductsTechnologyPartnersAboutPerfectly configured co-branded financial products.Meet the powerful,",
        "top": 188,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "CompanyHomeProductsTechnologyPartnersAboutNews & PressCareersLinkedInBlogResourcesStatusSupportLearn",
        "top": 5781,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 10,
    "contexts": [
      {
        "tag": "a",
        "text": "Products",
        "top": 266,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "RewardsRewards",
        "top": 3761,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#887C71",
    "alpha": 1,
    "cssValue": "rgb(136, 124, 113)",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "SHELL",
        "top": 2588,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Company",
        "top": 5805,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#000000",
    "alpha": 0.4,
    "cssValue": "rgba(0, 0, 0, 0.4)",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 2301,
        "property": "control-background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical spacing, creating distinct sections separated by large areas of empty canvas.
- Corner style: Consistent use of rounded corners across UI elements, from subtle curves on images to fully rounded pills.
- Radius: Medium radiuses (approx 16-24px) on large cards and images; full capsule radius on navigation and tabs.
- Borders: Mostly borderless. Surfaces are defined by contrast against the canvas or soft shadows. Thin solid lines separate items in the stat block.
- Buttons: Pill-shaped with solid backgrounds (like the nav items) or simple text links.
- Content width: Content is constrained to a central column, leaving significant margins on desktop viewports.
- Density: Low density; highly breathable layout prioritizing focus on single elements or short bursts of text at a time.
- Evidence: Visual inspection of the layout reveals wide margins around the text, rounded corners on the partner carousel images, and the stark contrast of white surface cards against the light gray body background.

## Sections

Gallery section count: 7. Each entry corresponds to one gallery capture.

1. **Hero — Configured Financial Products Hero** (Home)
   AI suggestion (96% confidence): Complete opening hero with brand navigation, clear value proposition, supporting copy, sign-in action, and a distinctive full-width financial-product visual.
   Capture: 1440×960px; page bounds 0–960px of 6552px; source section ID: `d3b33166-b305-48c7-9f9d-5a3c6a71395e`; image: https://media.designdetails.io/library/54089e53630f67709186f9717202ddeb099700adceb4c7fd48087089c6ff8d39/d3b33166-b305-48c7-9f9d-5a3c6a71395e.webp
   SECTION.md v3.2: `d3b33166-b305-48c7-9f9d-5a3c6a71395e` (deterministic evidence; editorial review pending)
2. **Gallery — Iconic Brand Partner Showcase** (Home)
   AI suggestion (93% confidence): Self-contained partner showcase with its own heading, large carousel-style Rakuten campaign image, navigation controls, caption, and learn-more link.
   Capture: 1440×1080px; page bounds 1710–2790px of 6552px; source section ID: `2035afd5-26f3-453d-9c7d-e95f8705b47b`; image: https://media.designdetails.io/library/69b8202031980f3ca4001c975412a3979d54f9e40620ed96fc0bf557525b6b24/2035afd5-26f3-453d-9c7d-e95f8705b47b.webp
   SECTION.md v3.2: `2035afd5-26f3-453d-9c7d-e95f8705b47b` (deterministic evidence; editorial review pending)
3. **Gallery — Iconic Brand Partnership Showcase** (Home)
   AI suggestion (95% confidence): Self-contained branded case-study carousel with section heading, prominent Shell campaign image, navigation arrows, caption, and learn-more link.
   Capture: 1440×1020px; page bounds 1749–2769px of 6552px; source section ID: `24b9820a-4b9c-43f3-a213-3c79a0f98079`; image: https://media.designdetails.io/library/9c5a7e41fe67a940fdec893f12d44681f44ea035d267b25ab52dfd37e8ca271f/24b9820a-4b9c-43f3-a213-3c79a0f98079.webp
   SECTION.md v3.2: `24b9820a-4b9c-43f3-a213-3c79a0f98079` (deterministic evidence; editorial review pending)
4. **Features — Built for impact product capabilities** (Home)
   AI suggestion (94% confidence): Complete split-layout capability showcase with a strong headline, category tabs, supporting copy, and a framed mobile-product visual.
   Capture: 1440×714px; page bounds 3521–4235px of 6552px; source section ID: `ffd814e3-3d77-449d-8d02-daecfbceb0d6`; image: https://media.designdetails.io/library/60e4712337313dc063c2193649e7815f7c4fc9accc8ab2cdfc17436e577d0a50/ffd814e3-3d77-449d-8d02-daecfbceb0d6.webp
   SECTION.md v3.2: `ffd814e3-3d77-449d-8d02-daecfbceb0d6` (deterministic evidence; editorial review pending)
5. **Stats — Our track record** (Home)
   AI suggestion (98% confidence): Self-contained performance metrics section with a clear heading and a complete five-card statistics grid.
   Capture: 1440×912px; page bounds 4238–5150px of 6552px; source section ID: `0f7ce97b-535c-424f-8b48-dba4515c489e`; image: https://media.designdetails.io/library/644ed64929fcf770e4eeb72acad960f00ccbdcc1ee39c42af7750c2463f58a7f/0f7ce97b-535c-424f-8b48-dba4515c489e.webp
   SECTION.md v3.2: `0f7ce97b-535c-424f-8b48-dba4515c489e` (deterministic evidence; editorial review pending)
6. **Footer — Multi-column legal footer** (Home)
   AI suggestion (98% confidence): Complete page-ending footer with company and resource link groups, extensive legal disclosures, copyright, and a branded mark in a self-contained translucent panel.
   Capture: 1440×751px; page bounds 5781–6532px of 6552px; source section ID: `34025d30-6482-4762-b8da-d56616a66419`; image: https://media.designdetails.io/library/3520337482c6a3be120cd935d233fd15ade0702e7b9bfdd2324daeae1bb50088/34025d30-6482-4762-b8da-d56616a66419.webp
   SECTION.md v3.2: `34025d30-6482-4762-b8da-d56616a66419` (deterministic evidence; editorial review pending)
7. **Footer — Link Directory and Legal Footer** (Home)
   AI suggestion (98% confidence): Complete, substantial page footer with grouped company/resource links, detailed legal disclosures, brand mark, and copyright, all contained in a distinctive rounded panel.
   Capture: 1440×752px; page bounds 5781–6533px of 6552px; source section ID: `8372f3e2-e8b2-485b-8539-c4badf0877a5`; image: https://media.designdetails.io/library/5c1954df9d6200b39981d37584be794a4eeda2846a4d72271a03b4b8fa0505ae/8372f3e2-e8b2-485b-8539-c4badf0877a5.webp
   SECTION.md v3.2: `8372f3e2-e8b2-485b-8539-c4badf0877a5` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/7f480e75f3c3b8d2c5cdbb7dfc44cf2d3809fdd912fd9253ca6c0f04d5bf1181/desktop_full-6d7f9fb8-2026-10-13T02-03-52-102Z.webp
- Mobile screenshot: https://media.designdetails.io/library/4112d68db22e4f576c216c26534dbd5ca4dec8e828c5db177b2562863beadb23/mobile_full-6d7f9fb8-2026-10-13T02-04-31-439Z.webp
- Open Graph image: https://media.designdetails.io/library/a309dda501d688e645aa0fca3a3988d050fba50b60fec1db51475db4d9fd76d3/og_image-6d7f9fb8-2026-10-13T02-04-05-106Z.webp
- Full-page video: https://media.designdetails.io/library/510e65603075eaced62e1d9741f280f09c16ae0a37089908354ea514f818e34f/motion-1791857882025.mp4
- Video poster: https://media.designdetails.io/library/9f7628b043c68e742f69d182dd23b10e25395698495f7064056adb3317373455/motion-poster-1791857882025.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero
- Carousel
- Stat Block
- Tabs
- Footer
- Floating Central Navigation

## Quality rubric

Overall: 45.4/100 (Serviceable)
Evidence coverage: 100%
Judge tier: Serviceable
Verdict: A clean, professionally executed corporate fintech site built almost entirely from current SaaS marketing conventions — soft 3D hero object, floating pill nav, logo carousel, oversized stat callouts, uniform scroll-fade reveals — competently assembled but not elevated by any idea distinctive enough to be hard to substitute, and undercut by an observable nav/content overlap issue during scroll.

- Typography (15%): 56 — A single display font (UniversalSans) is deployed at a wide range of sizes (14px nav to 125px stat numerals) with tight negative tracking, giving the page a confident, legible hierarchy. But the system relies almost entirely on scale jumps rather than weight, style, or pairing variation — every role from body copy to massive stat numerals uses the same regular-weight face, which flattens nuance and reads as a template default rather than a considered typographic voice.
- Color (10%): 48 — The palette is safely minimal — near-monochrome black-on-light-gray (#EFEFEF canvas, #000 text, #FFF cards) with one muted accent (#887C71) for overlines. Color interest is outsourced almost entirely to photography and the gradient-lit 3D renders rather than the UI system itself, which is a common and low-risk choice but doesn't demonstrate a deliberate color strategy beyond restraint.
- Layout (20%): 50 — Sections follow a clear, breathable template — hero, carousel, feature pairs, tabbed feature showcase, stat grid, footer — with consistent margins and card treatment. However, the floating pill navigation is not well-integrated with scroll content: multiple captured frames show the nav overlapping and obscuring headline text ('...te control' legible behind the nav pill) and stat numerals colliding with each other (99.9% overlapping other digits mid-transition), indicating the fixed-position nav and reveal timing were not fully reconciled against content flow.
- Motion (20%): 42 — Motion consists of a now-conventional scroll-triggered fade-and-slide-up pattern applied uniformly to text blocks, images, and the carousel, reversing on scroll-up. This is competently implemented as a sequence but is one of the most common scroll-reveal idioms in current SaaS/fintech sites and is not layered with secondary motion ideas (no staggering variation, no distinct transition per content type) beyond the overlap glitches noted in Layout.
- Originality (25%): 34 — The ingredients here — abstract soft-3D hero object, a floating pill-shaped nav, large stat-callout cards, a logo carousel, scroll-fade reveals — are all now widely recurring patterns across fintech and B2B SaaS marketing sites. Nothing observed constitutes a hard-to-substitute idea; the floating nav is the most distinctive single element but is itself an increasingly common trope, and it is undermined by the overlap issues noted above rather than elevated into something load-bearing to the experience.
- Content (10%): 53 — Copy and visuals are reasonably paired — partner carousel ties brand names to specific outcome statements ('Powering a more rewarding way to shop with Rakuten'), tabs (Predict/Insights/Marketing/Rewards) are matched to a phone mockup showing relevant in-app UI, and stat cards carry footnoted qualifiers. The mix of lifestyle photography, abstract 3D product metaphors, and literal phone-screen UI mockups spans three different visual registers that aren't fully reconciled into one coherent visual world.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [ ] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A floating glass card with a rounded navigation pill sits over an abstract render of stacked cards in orange, green and red, hinting at product variety before any text loads. Large black headlines on white, short paragraphs and recurring brand logos (Shell, airlines) down the page build trust, while a stats grid of big numbers gives quick proof of scale.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.