Recreate the look and feel of Paperclip (paperclip.ing) for a new site with its own content.
Look and feel:
The design presents a high-contrast, dark-mode interface defined by a near-black background and stark white typography. Its distinctive character comes from a central visual motif of grainy, rainbow-gradient capsules arranged in a fan shape, which adds texture and vibrancy to an otherwise minimal layout. The aesthetic is clean and utilitarian, resembling a modern SaaS platform but elevated by these colourful, organic graphical elements. The mood is technical yet approachable, balancing strict grid alignment with playful, animated illustrations that mimic live software interfaces.
Layout:
The composition relies on a standard centred column structure for the hero section, transitioning into varied alignments for feature breakdowns and testimonials. Density is moderate, using generous whitespace to separate distinct content blocks, while sticky headers maintain navigation access. Sections are stacked vertically, with some elements pinned or parallaxed to create depth during scrolling.
- Page length: 11150 px at a 1440 px wide viewport
- Corner radii: 8 px, 6 px, 4 px, 5 px (plus pill shapes)
- Sticky elements: 1
- Video elements: 1
Type (sizes at a 1440 px wide viewport):
Typography pairs the geometric precision of Inter Tight for headlines with the readability of Inter for body text, creating a clean, modern hierarchy. JetBrains Mono is reserved for small labels and code-like details, reinforcing the technical nature of the product.
- Inter: weights 400, 500, 600, 450, italics (90 % of the text)
- Inter Tight: weights 600 (5 % of the text)
- JetBrains Mono: weights 400, 500 (5 % of the text)
- Display: 56 px · Inter Tight 600 · leading 1.05 · tracking -0.03 em
- Heading: 45 px · Inter Tight 600 · leading 1.05 · tracking -0.03 em
- Lead: 18 px · Inter 400 · leading 1.6 · tracking 0 em
- Lead: 17 px · Inter 400 · leading 1.7 · tracking 0 em
- Lead: 16 px · Inter 400 · leading 1.55 · tracking 0 em
- Lead: 15 px · Inter 400 · leading 1.55 · tracking 0 em
- Body: 14 px · Inter 400 · leading 1.55 · tracking 0 em
- Small: 13 px · Inter 400 · leading 1.5 · tracking 0 em
- Small: 12 px · JetBrains Mono 400 · leading 1.3 · tracking 0 em
Colour:
A deep near-black ground sets a serious tone, allowing white text to stand out with high legibility. The palette is punctuated by deep sky blue accents and vibrant, multi-coloured gradients that introduce energy without overwhelming the neutral foundation.
- Ground: #141413 (near-black)
- Ink: #ffffff at 55 % (white)
- Secondary text: #0a0a0a (near-black)
- Accent text: #1a2a40 (deep sky blue)
- Surface: #ffffff (white)
- Surface: #1f1d1a (charcoal)
- Line: #2f2c28 (charcoal)
Motion:
The page enters without a preloader; the headline and lead text fade upwards while the grainy gradient graphic descends from the top edge. These elements settle into their final positions smoothly, establishing the visual hierarchy immediately upon load. Scrolling feels native and direct, with specific sections pinning in place to allow content to reveal over them. Background elements and text exhibit subtle parallax movement, while feature cards and interface mock-ups rise and fade into view as they enter the viewport. Interactive elements respond with understated feedback; navigation links adopt a dark pill-shaped background with brighter text, and buttons shift opacity slightly. Mega-menus expand downwards to reveal nested link lists and summary cards without obscuring the main content. Navigation between pages occurs via a full reload with no intermediate animation, ensuring immediate access to new content.
- Scroll (Scroll smoothing): Native scroll · no smoothing, 1:1 with the wheel (measured from 30 fps frames, ±0.002 % fit error)
- Intro (Intro reveal): easeOutQuint · 1.11 s (measured from 30 fps frames, ±0.49 % fit error)
- Intro (Load): 900 ms (estimate)
- Scroll: Native scroll, pinned · cubic-bezier(0.2, 0.8, 0.2, 1) · 400 ms (estimate)
- Hover (Hover and cursor): 150 ms (estimate)
- Page transition (Transitions): Full page load, no transition (estimate)
- Hover and focus (CSS): 150 ms ease on color, background, border-color, opacity
- Hover and focus (CSS): 250 ms cubic-bezier(0.2, 0.8, 0.2, 1) on color, background, transform, border-color
- Keyframe animation (CSS): 900 ms cubic-bezier(0.2, 0.8, 0.2, 1)
- Keyframe animation (CSS): null ms linear
- Custom curves in the CSS: cubic-bezier(0.2, 0.8, 0.2, 1); cubic-bezier(0.22, 1, 0.36, 1); cubic-bezier(0.4, 0, 1, 0.6)
- Anchor scrolling: scroll-behavior: smooth
- Reduced motion: ships a prefers-reduced-motion stylesheet
Libraries: Next.js.
Techniques: scroll-scrubbed animation, css scroll-driven animation, sticky or pinned sections, background or inline video, clip-path reveals and wipes, blend-mode text or cursor and a prefers-reduced-motion stylesheet.
The curator's notes on this site:
- Design: near-black page, centred tight white headline ("A team of agents for every person.") under a fan of grainy rainbow-gradient capsules. Standard centred SaaS layout lifted by the one grainy gradient visual.
- Load: no preloader. The headline and lede fade up (900 ms, 220 ms delay); the grainy rainbow capsule fan (an SVG) enters from the top (1.1 s, 80 ms delay). A white announcement bar sits above the nav.
- Scroll: native; sticky header. Hero background and text run a CSS scroll-driven parallax on exit. Feature cards fade and rise on entry (0.4 s, cubic-bezier(0.2, 0.8, 0.2, 1)); org-chart nodes and swim lanes slide in (400 ms). Testimonials run two opposing marquees (58 s, 62 s).
- Hover and cursor: native cursor. Nav items take a dark pill background and brighter text (colour and background 150 ms); each opens a mega dropdown (Company: link list plus an "Our story" card). Buttons fade opacity 150 ms. No card tilt or cursor effects.
- Transitions: full page load to the changelog; no transition.
- Product-UI illustrations: the feature panels are live DOM mock-ups that animate on view: task packets travel between org-chart nodes (left/top 0.55 s ease-in), active dots pulse and status labels blink (1.5 s loops), a lamp-like light glow fades in over the Heartbeats section (1.5 s), budget bars fill. A product-tour video fades in (1.2 s).
- Mobile: single column, burger menu, same reveals and illustrations; the testimonial marquee animations are absent at 390 (probably a swipe row instead).
Constraints:
- Recreate the feel, not the site: write your own copy and use your own images, icons and logo; do not copy its code, fonts or assets.
- Where a font is not licensed for you, pick a close substitute with the same build (width, contrast, x-height) and keep the sizes, weights and tracking below.
- Animate transform and opacity (clip-path or filter only where the reference clearly does); list exact properties, never "transition: all".
- Honour prefers-reduced-motion: keep opacity and colour fades, drop movement and smooth scrolling.
- Values marked (estimate) were drafted from notes, not measured: tune them by eye against the reference.