Recreate the look and feel of Fox+Creator (foxcreator.com) for a new site with its own content.
Look and feel:
The mood is utilitarian yet playful, anchored by a macOS-style dock of rounded app icons at the bottom of the viewport. This interface mimics an operating system, creating a distinctive feel where navigation feels like selecting applications rather than browsing a traditional website. The layout relies on negative space to emphasise the central message, while subsequent sections transition into dense, dark-mode portfolios filled with vibrant UI mockups.
Layout:
The composition features a centred, full-screen hero section with a fixed horizontal row of rounded tiles aligned to the bottom edge. As the user moves down the page, the layout shifts to alternating blocks of dark surfaces containing dense grids of images and text, often using split-screen alignments or floating cards.
- Page length: 50210 px at a 1440 px wide viewport
- Corner radii: 13 px, 10 px, 24 px, 2 px, 12 px (plus pill shapes)
Type (sizes at a 1440 px wide viewport):
The typography relies exclusively on bold and extrabold weights of a sans-serif grotesk font family. Display text is set with tight tracking to create a solid, graphic block, while body copy maintains a heavy weight for strong readability against dark backgrounds.
- bold: weights 400 (90 % of the text)
- extrabold: weights 400 (10 % of the text)
- Display: 175 px · extrabold 400 · leading 0.89 · tracking 0 em
- Heading: 150 px · extrabold 400 · leading 0.91 · tracking 0 em
- Heading: 100 px · bold 400 · leading 1 · tracking 0 em
- Heading: 64 px · bold 400 · leading 1.06 · tracking 0 em
- Heading: 50 px · bold 400 · leading 1.12 · tracking 0 em
- Heading: 40 px · bold 400 · leading 1.13 · tracking 0 em
- Lead: 32 px · bold 400 · leading 1.19 · tracking 0 em
- Body: 24 px · bold 400 · leading 1.33 · tracking 0 em
- Small: 20 px · extrabold 400 · leading 1.35 · tracking 0 em
Colour:
The palette begins with a strict monochrome scheme of white surfaces and near-black ink to establish clarity. This transitions into deep charcoal and black backgrounds for content sections, allowing the multi-coloured project screenshots and sky blue accent text to stand out vividly.
- Ground: #595959 (grey)
- Ink: #ffffff at 55 % (white)
- Accent text: #5a94c4 (sky blue)
- Secondary text: #000000 at 60 % (near-black)
- Surface: #ffffff (white)
- Surface: #111111 (near-black)
- Surface: #191919 (charcoal)
- Surface: #06143d (deep blue)
- Surface: #000000 (near-black)
Motion:
The page enters with a rapid fade-in sequence where the central headline and bottom icon row emerge from transparency. The elements settle quickly into their final positions without complex movement, establishing the static frame immediately. Scrolling feels direct and native, lacking artificial smoothing or inertia. As the user scrolls, the initial white hero view disappears completely, replaced by long vertical sequences of dark-themed case studies and image galleries that flow continuously. Interactive elements, particularly the bottom dock icons and navigation links, respond with subtle scaling or opacity shifts. The cursor interaction is minimal, focusing on immediate feedback rather than elaborate magnetic effects or trailing animations. State changes and menu interactions utilise quick ease-in-out transitions, ensuring that hover effects and focus states appear snappy and responsive without lingering delays.
- Scroll (Scroll smoothing): Native scroll · no smoothing, 1:1 with the wheel (measured from 30 fps frames, exact fit)
- Intro (Intro reveal): ease-out · 300 ms (measured from 30 fps frames, ±0.74 % fit error)
- Hover and focus (CSS): 200 ms ease-in-out on all
- Hover and focus (CSS): 300 ms ease-out on all
- Transition (CSS): 300 ms ease-in-out on all
- Transition (CSS): 450 ms ease-in-out on all
- Keyframe animation (CSS): 1100 ms ease-in-out, looping
Techniques: frosted glass (backdrop-filter).
The curator's notes on this site:
- Design: pure white page with huge, tightly kerned black grotesk ("Ace Design. Brings Growth.") centred in the viewport, and a macOS-dock-style row of rounded app-icon tiles at the bottom that link to the work. Many autoplay videos, no WebGL.
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.