The grain symbol
The four-blade mark redrawn as thousands of tiny dots, dense where the colour is bright and loose at the edges. It shimmers gently and turns slowly as you scroll.
- Client
- Rixes Studio (ourselves)
- Sector
- Digital studio
- Services
- Brand identity, UI/UX Design, Web Development, Motion & 3D, SEO
- Built with
- HTML, CSS, JavaScript, GSAP, PHP, Google Apps Script
- Status
- Live
- Year
- 2026
Rixes Studio
design, build and grow.
[THE BRIEF]
Every studio tells clients what good looks like. So the first job was our own: build a brand and a website that show the standard we sell, and that a small senior team can keep growing without a heavy platform.
[THE STORY]
A small team, one standard.
Rixes Studio is a boutique digital studio in India. It builds websites, apps, WordPress sites, social media, ads, motion graphics, 3D renders and Three.js experiences, all under one roof.
The studio has no office. It works online, so there is no reception desk and no layers between you and the people doing the work. You brief us on WhatsApp or a call, the designers and developers read it, and the same people build it.
That shaped the brand. With no building to put on the website, the work and the way it feels had to carry everything: confident, warm, a little bold, and honest about what we do.
The symbol
[THE MARK]
Four curved blades around an open centre.
01 · Four bladesFour crafts that turn together: design, build, motion and growth.
02 · Always turningBlades arranged to rotate. Work that keeps moving, not a logo that sits still.
03 · The open centreSpace left on purpose, where the client's idea goes.
04 · Dark to coralFrom the dark of an unclear brief to the light of a finished launch.
How we read the mark. The symbol sits between the two words of the name and works alone as the favicon, the loader and the big shape in the hero.
On the website the symbol is drawn two ways. In the logo it is solid, so it stays crisp at small sizes. In the hero it becomes fine grain: thousands of coral dots that are dense where the colour is bright and scatter at the edges, so the mark feels made, not pasted in.
Colour
[THEME]
Coral on warm black, on cream. Three colours do almost all the work.
Warm black#0F0506 · --ink
The night the work comes out of. Text, dark panels, the footer. Close to black but warmer, so it never feels cold.
Coral#FE5E37 · --acc
The energy. Taken from the logo and used for actions, highlights and the symbol. An accent, never a body colour.
Cream#F5F0E9 · --page
The page. A soft warm white that gives the dark and the coral room to breathe.
Peach#FFD9C9 · --peach
A soft highlight for panels and the odd card, so a screen is not only black, white and orange.
Coral ink#C23A16 · --acc-ink
A deeper coral for small text on light backgrounds. Plain coral on cream is only 2.7 to 1 contrast; this is 4.7 to 1.
Burnt#B93A1A · --acc-mid
The shadow side of the gradients, where coral fades down into the dark.
Cream and white about 60%Warm black 25%Coral 15%
Hero ember
Dark panel
Card ember
Contrast, measured: warm black on cream 17.7 to 1, cream on warm black 17.7 to 1, coral on warm black 6.6 to 1, warm black on coral 6.6 to 1. White on coral is only 3.1 to 1, so buttons use dark text on coral, never white.
Type
[TYPE]
One geometric sans, one italic serif, one mono.
Outfit · 400 to 600
Headings and bodyWe design, build and grow
Headings and bodyWe design, build and grow
Instrument Serif · italic
The one accent wordbrands that stand out.
The one accent wordbrands that stand out.
JetBrains Mono
Labels, tags, numbers[Services — 02] · /one senior team · x:0412 y:0233
Labels, tags, numbers[Services — 02] · /one senior team · x:0412 y:0233
Outfit matches the rounded geometry of the logo's wordmark. The serif adds the human voice: it appears once per heading, always in coral. The mono gives the studio a quiet technical edge.
Design elements
[ELEMENTS]
The pieces that make the site feel like the studio.
Ember gradients
Black into coral, never a flat fill. The hero, the dark panels and the call-to-action all share one warm glow that moves with the pointer.
Floating pill nav
A rounded bar that slides away when you scroll down and returns when you scroll up, so it never gets in the way.
Serif accent word
One italic serif word per heading, always in coral. It is the voice of the brand: human next to the geometric sans.
Scroll-driven text
Words that fill in as you read, sharpen out of a blur, scramble on hover and rotate in the hero. Each effect has one job and stops when you ask the browser for less motion.
The halftone scan
The symbol rebuilt from dots with scanner-style boxes and labels around it, a nod to how a brief gets studied before it is designed.
Inspiration slider
Projects in a drag-and-snap slider with parallax inside each card, so a visitor can browse work the way they flick through a phone.
Toolbox ticker
The tools we use as an edge-faded strip of tiles, with a lit tile travelling along it.
Chat helper
A small floating assistant with fixed answers to common questions. When it does not know, it takes the visitor's details as a lead.
[HOW IT WAS BUILT]
No framework, no database, no build step. Plain code that loads fast, a small pipeline that never loses an enquiry, and a design system that keeps every new page on brand.
HTMLCSSJavaScriptGSAP + ScrollTriggerLenisCanvasMatter.jsPHPGoogle Apps ScriptGoogle SheetsGA4Apache (Hostinger)GitHub
[FROM BRIEF TO LAUNCH]
- Step 1Brand first
The logo, the four-blade symbol and the coral and warm-black palette came before any layout. Everything on the site is derived from those three things.
- Step 2Design system
Tokens for colour, type, spacing and radius, then components: buttons, cards, chips, sliders, forms. One page,
design.html, documents all of it so any new page stays consistent. - Step 3Plain code, no framework
Static HTML, CSS and JavaScript with no build step, so pages load fast on Indian 4G and anyone can edit them. GSAP and ScrollTrigger run the animation, Lenis the smooth scroll, and canvas draws the grain, halftone and particle effects.
- Step 4A real lead pipeline
The contact form posts to a small PHP file on the host, which hands each enquiry to a Google Apps Script. That adds a row to a Google Sheet, emails the studio, and sends the visitor a branded thank-you. If Google is unreachable, the host emails it instead and keeps a private backup.
- Step 5Measure and be found
Google Analytics 4 with a consent notice and lead events, a sitemap, structured data for services, FAQs and articles, a share image for every page, and a detail page for each of the 13 services.
- Step 6Launch and keep it simple
The code lives in a private GitHub repository connected to the hosting, so a push updates the live site. The whole site is about 1.5 MB, with no database to maintain.
Who builds it
[THE TEAM]
Four crafts, one small team. The people you brief are the people who do the work.
Designers
Brand identity, UI/UX in Figma, logos, social creatives and packaging, designed to match.
Developers
Websites, apps, WordPress and software, built by hand and tested on real phones.
3D artists
Blender renders, packshots and animation, plus Three.js scenes that run in the browser.
Content writers
Clear page copy, case studies, captions and posts, written in plain language.
[ABOUT RIXES STUDIO]
Experienced designers, developers, 3D artists and content writers.
We are experienced designers, developers, 3D artists and content writers who build websites, apps, WordPress sites, social media, ads, motion graphics, 3D renders and Three.js work for startups, established businesses and agencies that need a white-label partner. 100+ websites and counting.
Small on purpose: you talk to the people who build it, scope and price are agreed in writing first, and we show progress every week.
- Based in
- India, working online
- Office
- None, by design
- Services
- 13 under one roof
- Working hours
- Mon to Sat, 10:00 to 19:00 IST
- +91 98218 48908
- hello.rixesstudio@gmail.com
Let's talk
Have a project like this?
Tell us about your project and we will tell you how we would approach it.
