Blubs Creative
Design system
Everything the Blubs website is built from. The colours, type and components on this sheet are the real styles, so changing one here changes it on every page.
Build with it
Type /design-system in Framer’s Agent panel, followed by what you want, to build a new page in the Blubs style.
Colour styles
Colour
Six brand colours. Blubs Blue, Green and Pink for fills and highlights, Grey, White and Light Grey for type, pages and cards. Change one in the Assets panel and every page follows.
Brand
#4B73F9
Blubs Blue
Buttons, bands, links and highlights.
Brand
#D0FF35
Blubs Green
Accents, project tags and headings on dark cards.
Brand
#FFB6F7
Blubs Pink
Section tags, the Say hello button and playful highlights.
Neutral
#1F231A
Blubs Grey
Headings, body copy and dark cards.
Neutral
#F5F8F6
Blubs White
Page background and type on blue or grey.
Neutral
#E8E8E8
Blubs Light Grey
Cards, panels and quiet labels on dark.
Text styles
Type
Two families: Bricolage Grotesque for headlines and reading, IBM Plex Mono for labels. Sizes read desktop / tablet / phone and step down by themselves.
Headlines
Bricolage Grotesque ExtraBold
Reading
Bricolage Grotesque Medium
Labels and small print
IBM Plex Mono Medium
H1
Bricolage Grotesque ExtraBold, 96 / 72 / 52 px, line height 0.92.
Come say hello!
H2
Bricolage Grotesque ExtraBold, 68 / 54 / 40 px, line height 0.96.
Two founders, zero middlemen.
H2 - Small
Bricolage Grotesque Bold, 38 / 32 / 26 px, line height 1. Headings inside articles.
What does the data say?
H3
Bricolage Grotesque Bold, 38 / 32 / 26 px, line height 1, capitalised.
Storyboard first, render later.
H3 - Small
Bricolage Grotesque Bold, 22 / 20 / 20 px, line height 1. Card and row titles.
Interdesk Aura
Heading 4
Bricolage Grotesque SemiBold, 18 px on every screen, line height 1.4. Desktop nav cells.
Blog
Paragraph Large
Bricolage Grotesque Medium, 20 / 19 / 18 px, line height 1.15. Intros and answers.
Tell us what you want to make happen, and we’ll reply within 24 hours.
Paragraph Medium
Bricolage Grotesque Regular, 16 px, line height 1.2. Section intros and body copy.
You’ll talk to the people directly responsible for producing your video.
Paragraph Small
Bricolage Grotesque Medium, 14 px, line height 1.35. Notes, captions and card text.
We reply within 24 hours, every day.
Label
IBM Plex Mono Medium, 13 px, uppercase, 2% tracking. Tags, meta and small print.
3D product commercial
Link styles
Links
Four link styles. Nav Link for menus, Editorial Link inside paragraphs, Inverse and Footer Link for type on blue and grey. Hover a sample to see it change.
Nav Link
Blubs Grey. Hover and the current page get a 1 px underline, 4 px below. Phone menu and footer.
Editorial Link
Always underlined at 1 px. The line drops from 3 px to 5 px below on hover.
Inverse Link
White on blue or grey. Hover adds a wavy Blubs Blue underline, 4 px thick.
Footer Link
White. Hover adds a 2 px Blubs Blue underline, 5 px below.
Navigation cells and menu links
The nav bar and phone menu are one Navigation component. These are its link states; edit them there and every page follows.
Desktop link
Live Nav Link instances; hover one to see its hover state. Heading 4 with the Teletype override: Bricolage Grotesque, 18 px. A cell has a 1 px Blubs Grey rule on its left and fills on hover. Say hello is Blubs Pink.
Layout
Spacing
Built desktop first; tablet and phone only override what changes. Sections run edge to edge with side margins and no max width.
Desktop
1200 px wide, 48 px side margins
Tablet
810 px wide, 48 px side margins
Phone
390 px wide, 20 px side margins
Spacing scale
Gaps and padding come from this scale: small steps inside cards, large ones between sections.
8
16
24
32
40
48
56
72
96
120
160
120 to 160 px above and below on desktop, 96 to 120 px on tablet, 72 to 88 px on phone.
48 px on desktop and tablet, 20 px on phone. No max width on any section.
Square for cards, panels, photos and buttons. Round only for tags and the blueberries.
1 px rules in Blubs Grey between rows, around nav cells and above every section heading.
Used sparingly: the photo cards in the Say hello ring cast a soft shadow.
Opening and closing use a slow-in, slow-out tween (0.76, 0, 0.24, 1). Page changes wipe in with a rise.
Components
Components
Button
Primary on light backgrounds, Light on dark cards, Green for highlights. Label, link and New Tab are variables.
Primary, Light, Green
Tag
Pill label above section titles, on rule cards and team cards.
Dark, Light, Green
The house rules
Clients’ words
Badge
The New flag beside fresh project titles.
Default
New
Footer Link
Footer link whose underline draws in on hover. Arrow and New Tab are switches.
Default, hover
Nav Link
One cell of the desktop navigation. Label and link are variables; the cell fills on hover.
Default, Call To Action, each with hover
Send Button
The contact form’s send button. Pending, Success, Error and Incomplete switch by themselves.
Default, Pending, Success, Error, Incomplete
Ring Card
Photo card in the footer’s Say hello ring. Image and link are variables.
Default
Social Icon
Square icon link. Pick any Phosphor icon, set the link and a label for screen readers.
Default, hover
Pull Quote
A quote card for articles. Add it inside the text of a CMS item.
Default
Service Card
A service on Home. Six sub-service rows show only when filled in; the phone versions put the photo on top.
Ember, Bone, Charcoal, plus a phone version of each
FAQ Item
A question that opens to its answer. Tap the question to switch.
Closed, Open
How much does a project cost?
Every project gets one fixed price after our first chat, so there are no surprise invoices.
How much does a project cost?
Every project gets one fixed price after our first chat, so there are no surprise invoices.
Letter Card
Testimonial card with a photo, company and quote.
Card, hover
Team Card
Team member card with role, bio and social links.
Default, Phone
Story Chapter
A chapter of the About story. Show Photo turns the image on; the Year feeds the odometer.
Chapter
Brand Row
Client row with a blue band that follows the pointer in and out.
Default, Phone
Article Row
Blog list row with thumbnail, category and excerpt.
Default, Compact
Project Nav Card
The previous and next project at the end of each project page. On the page, Image, Title, Tagline and Link are bound to the neighbouring project, and a card hides when there is no neighbour.
Previous, Next, hover
Process Step
One step of the Process accordion. Its Tap event opens it and closes the others.
Open, Closed, Phone Open, Phone Closed
Price Card
A rate card with the price, up to eight features, each shown only when filled in; Badge and Small Print hide when empty.
Paper, Blue
Code
Motion and code
22 code files, each set up in the right panel with plain names, so none need editing. Components draw things; overrides add motion to a normal layer.
Brand pieces
Logo
Blubs logo mark and stacked wordmark. Words and colours are settings.
Stamp Paper
Paper texture with perforated edges and grain. Not used on the current pages.
Postmark
Round postmark with waves. Not used on the current pages.
Airmail Edge
Striped border. Not used on the current pages.
Scroll and motion
Stretch Type
Headline letters stretch toward the cursor, squash on click and wave when idle.
Teletype
Override that types each heading in as it scrolls into view.
Scroll Photo
Override that zooms a photo out and drifts it as the page scrolls.
Reveal Image
Photo revealed through blinds, iris or wipe masks as it scrolls in.
Envelope Flap
Flap that opens on scroll. Not used on the current pages.
Story Year
Year odometer that follows the chapter you are reading.
Curved Slider
Cards on an arc with drag, arrows and autoplay.
Hover Band
Colour band that enters and leaves from the side the pointer moves.
Morph Cursor
Cursor that turns into the brand card while you hover a row.
Interactive
Showreel
Play button that opens the full-screen Blubs reel. Add a video file or link.
Selfie Stamp
Opens the camera, counts down and turns the photo into a card to save. Not used on the current pages.
Say Hello
Greeting that rolls through languages and copies your email on click.
Sticker Bomb
Click anywhere to stick a fact about Blubs. Links underneath still work.
Studio Clock
Singapore time with an in-the-studio status, open 10:00 to 21:00.
Cal Booking
The Blubs Cal.com calendar embedded inline.
Preloader
Loading screen with a live counter.
Newspaper Fold
Pinned page-fold reveal. Hidden by default.
Catch the Blueberries
Arcade game: catch blueberries in a basket and dodge the mouldy ones, with sound effects and a best score.
Site-wide
Page transition
New pages wipe in with a rise while the old one drops back. Set on Home’s desktop breakpoint for every page.