Robin Fish
Founder, Acrylic Studio
London, UK
"They moved fast without ever cutting corners — the kind of partner you keep on speed dial."
European Creative Agency
Design System.
Single source of truth for the tokens, components, and patterns used across the React app at src/ — built around Inter / Inter Display, an ink-on-paper palette and a single orange accent.
Colours
Tokens live in src/index.css under @theme. Tailwind names map 1:1 to CSS variables (e.g. bg-ink, text-accent).
Brand
Ink
#0a0a0a
--color-ink
Paper (page bg)
#f4f1ec
--color-paper
Cream
#ece7df
--color-cream
Accent (orange)
#ff5b1f
--color-accent
Pink
#ffb8c2
--color-pink
Soft
#f7e9ea
--color-soft
Testimonial backgrounds
Hard-coded into src/components/Testimonials.tsx. Each rotating slide carries one of these warm pastel surfaces.
Testimonial — Pink
#ffd6d9
testimonials[0].bg
Testimonial — Honey
#f4e6c1
testimonials[1].bg
Testimonial — Sage
#d6e8d8
testimonials[2].bg
Text alpha tints (on paper)
Body / secondary text is expressed as text-ink/n rather than discrete grey tokens.
ink
#0a0a0a
text-ink
ink/70 body
10/70%
text-ink/70
ink/60 eyebrow
10/60%
text-ink/60
ink/40 mark, n°
10/40%
text-ink/40
Typography
Families: Inter (body) and Inter Display (large headlines, marquee, stats). Body has OpenType features cv02 cv03 cv04 cv11 ss01; .font-display adds letter-spacing: -0.02em with ss01 cv11. Italics are real italics — used as the emphasised half of two-word headlines (e.g. "We Strive to Innovate").
build the next.
Every Type of Creative Work
Landing Page
Robin Fish
FAQ question — How long does a typical project take?
Body — Solid Strategy aligned with business needs and robust data analysis. We pair design craft with measurable outcomes to build brands that compound.
Small body — used for service descriptions, supporting copy and quote text.
Eyebrow — featured work
landing-page
Spacing
Tailwind spacing scale. Section padding pattern: py-14 sm:py-24 (56 / 96px). Container: mx-auto max-w-[1200px] px-6.
4px · p-1
8px · p-2 · standard inline gap
12px · p-3 · input vertical padding
16px · p-4 · input horizontal padding
24px · p-6 · card padding, container px
32px · p-8 · large card / form padding
48px · gap-12 · grid gap
56px · py-14 · section padding (mobile)
96px · sm:py-24 · section padding (desktop)
Radii & Shadows
Border radius
6px · mock browser URL bar
10px · cookie buttons
12px · form input
15px · cookie banner
16px · testimonial avatar tile
20px · mock browser shell
24px · stat / quote card (rounded-3xl)
28px · project, process, testimonial, form (signature)
9999 · nav header, buttons, toggle, FAB
Shadows / rings
ring-1 black/5 · card edge
soft float · quote card
pill nav · top header float
dark drop · cookie banner
FAB · language switch
Eyebrow Label
Every section is introduced by a 12px uppercase eyebrow prefixed with a 6px orange dot. Tightly tracked at 0.2em, faded to ink/60 on light and paper/60 on dark.
About dallatorre.dev
Let's collaborate
Buttons & CTAs
All primary CTAs use the rounded-full pill shape, 12/20px padding, 14px medium label. Hover swaps the background from ink → accent and lifts the button by 2px.
Dark pill — primary CTA
bg-ink text-white rounded-full px-5 py-3 hover:bg-accent
Light pill — on dark surfaces (footer)
Accent pill — high-emphasis
Submit (form footer)
Whilst sending: disabled:opacity-60 cursor-not-allowed
Pill Nav Header
Floating pill at the top of every page — translucent white with backdrop blur, ringed 1px black/5, soft drop-shadow. Mounted as absolute md:fixed with a slide-down + fade entry. Source: src/components/Nav.tsx.
@dallatorredev
Audience Toggle
Customer / Freelancer mode switch baked into the header. Active state is a black ink pill with white label; Framer Motion layoutId animates the pill between the two slots.
Form Inputs
Paper-tinted fill (bg-paper/60), 12px radius, ring-1 black/6 default, 2-ring accent on focus, rose-400 on error. Labels above each control are 12px uppercase at 0.18em tracking. Source: src/components/Blog.tsx.
Please tell us your name.
Accordion Chip (+ / −)
36px orange circle with a centred + / − glyph. Used as the trailing affordance on both the Services and FAQ accordion rows.
+
−
size-9 · bg-accent text-white
Icons & Glyphs
The app leans on text glyphs for affordances (↗ ↘ + − ▸ ★) rather than an icon library — keeps the visual language consistently typographic. SVGs that do appear are inline, single-colour and follow currentColor.
↗
Up-right arrow (CTA)
↘
Down-right (table delta)
+
Plus (accordion)
−
Minus (accordion open)
▸
Bullet (service list)
★
Star (reviews)
?
Footer accent punctuation
Search (inline svg)
Language Switch (FAB)
Fixed bottom-left, 44px black circle showing the active language (EN / PT). Clicking toggles to the next language and persists via i18next. Hover swaps to accent + 2px lift; label crossfades. Source: src/components/LangSwitch.tsx.
size-11 · bg-ink text-paper rounded-full
Stat Card
Cream-tinted card holding a single counted-up metric. Numbers use Inter Display at 56px with the unit appended (+, %). Source: src/components/Strive.tsx with <Counter />.
80+
Web Freelancers Worldwide
98%
Client Satisfaction
184+
Projects Delivered
13+
Countries
Quote / Portrait Card
Compact white card pairing a stacked avatar row with a short founder testimonial. Lives next to the Strive headline.
"Working with dallatorre.dev transformed our launch, strategy, identity and site in one cohesive sprint."
Project Card
Full-bleed photo banner with a coloured multiply tint, gradient shade and bottom-anchored title / tagline / tag row. Cards animate on scroll — they tilt forwards from rotateX 72°, settle flat in the viewport, and tilt away on exit. 28px radius. Source: src/components/Projects.tsx.
Process Step Card
Numbered step in the "How We Build" timeline. Inactive cards are white with an orange numeral; the card under the scrubber turns full-orange (white text, white numeral). 28px radius. Source: src/components/Process.tsx.
1
Discovery
A kickoff call to map intent, audience, KPIs and risks before any pixel is pushed.
2
Strategy
Research, positioning and an opinionated brief that the entire team can sign off on.
3
Design
UI exploration in Figma — typography first, then layout, then motion.
Testimonial Card
Auto-rotating testimonial slide. 28px radius, 28px padding, three rotating warm backgrounds (pink / honey / sage). 96px rounded portrait + display-typeface quote + pagination dots. Source: src/components/Testimonials.tsx.
Pink (slide 1)
Honey (slide 2)
George El Nachar
Head of Product
Beirut, LB
"A studio with the range we used to need four agencies for."
Sage (slide 3)
Val Koval
CMO
Lisbon, PT
"Strategy, design and engineering bundled in one tight sprint."
Mock Browser
Three-up capability showcase. Each tile is a stylised browser chrome (traffic lights, monospaced URL, reload glyph) wrapped around a flat wireframe sketch — one per service: landing, corporate, web app. 20px outer radius. Source: src/components/MockBrowser.tsx.
landing-page
Landing wireframe
corporate-website
Corporate site wireframe
web-app
Dashboard wireframe
Hero Headline
Massive 2-line Inter Display headline that staggers in word-by-word with a blur-up motion. Italics emphasise the second line, finished with an orange full stop. Backdrop dallatorre.dev wordmark sits behind at 4% opacity. Source: src/components/Hero.tsx.
The European Creative Agency
We build thenext.
Reviews Badge
5-avatar stack + 5 amber stars + bolded score + count, anchored top-right of the hero. Avatars are 36px, ringed in paper to read against the page background.
Services Accordion
Numbered (01 / 02 / 03) services list with display-typeface titles. Hovering a row tints the title to accent; opening swaps the chip from + to − and reveals a 2-column body (description + tagged sub-skills). Source: src/components/Services.tsx.
-
High-converting single-page experiences engineered to turn visitors into customers.
- UX Research
- UI Design
- Copywriting
- Conversion
FAQ Accordion
Same chip + divider pattern as Services, with a heavier question label (18px / weight 500) instead of the display heading. Source: src/components/FAQ.tsx.
-
Between 3 and 8 weeks depending on scope. Landing pages compress into a single sprint; corporate sites and web apps run on a 6–8 week cadence.
Contact Form (28px card)
Lead-capture form on the home page. 28px white card with a 6-field grid, status footer (idle / sending / success / error) and a dark pill submit on the right. Includes a hidden honeypot website input. Source: src/components/Blog.tsx.
Mobile 3D Coverflow
Below the hero on small screens, the three mock browsers stack into a 3D coverflow — centre card at scale 1, side cards at 0.6 / 0.65 opacity, transitioning every 3.5s. Driven by framer-motion with a wrap-around z-shuffle to avoid clipping. Source: src/components/Hero.tsx.
Landing
Corporate
Web App
Cookie Banner
Bottom-centred floating card, 15px radius, ink background, paper text. Two actions — ghost (white) for Decline and accent (orange) for Accept. Choice persists to localStorage under dt-dev-cookie-consent. Source: src/components/CookieBanner.tsx.
Wordmark Marquee
Giant looping dallatorre.dev wordmark in Inter Display anchored to the bottom of the footer. Track scrolls at 28s linear, half the content duplicated to keep the loop seamless. Source: src/components/Footer.tsx.