Leap Design Kit
This kit turns the 2026 brand strategy into the building blocks for the Leap website: logo, colour, type, shapes, speech bubbles, components and motion. The three mock-up directions we build next will all use it, so it shows the system, not one homepage.
Our proposed idea: every page reads like a message being drafted and refined in conversation.
What we'd like you to validate: the idea above, the text colours we added for readability, the free font stand-ins, the derived logo versions, how much movement we use, and the illustration style. The four brand colours, the logo and the gradient come straight from your guide.
Your ten reference websites, with your notes and what we'd borrow from each, are in the reference gallery, along with five sites we added.
Less noise. More intention.
listen first
Logo
One supplied logo, and the variants we derived from it so it works on dark grounds, in one colour and at small sizes. Nothing derived goes live until Alexa approves it.
Clear space and minimum size
Dashed line = clear space. x is the height of the e in the wordmark.
Our suggestion
Clear space: keep a margin equal to the height of the "e" (the x-height) free on all four sides. No text, edges or other shapes inside it.
Minimum size: 96px wide for the full logo on screen, 24px wide for the bubble alone, 16px for the favicon.
Neither rule is in the brand guide. We suggest them so the mock-ups behave consistently.
Three things we won't do
Our suggestion Not in the brand guide.
Colour
Four brand colours carry Leap's voice. Ink carries everything else, so colour always means something. Brand colours are never text on a light ground, but ink text on any of them is fine.
Working colours
- Ink · #333333The logo wordmark colour. All text and line work.
- Surface · #FFFDFCThe warm off-white ground. Sampled from the guide's pages.
- Cream · #FEF7E9Cards and soft bands. Sampled from the guide.
- Ink surface · #2E2C33Dark panels. The only ground for gradient lettering.
- Muted ink · #5F5B66Secondary text and captions.
- Deep lilac · #6A3FB0Links and focus ring. Derived from lilac, to confirm.
- Bubble grey · #EFEBE8Visitor bubbles and typing indicators.
- Error · #B42318Form errors only.
- Success · #1F7A4DConfirmations only.
The gradient
Brand gradient from the four palette colours: #FBD783, #FDAC90, #F47FAC, #BE95E6.
The logo's own gradient stops (from the supplied logo file, palette.json):
- 0 · #FADF7F
- .08 · #FAD980
- .18 · #FBC985
- .29 · #FCAE8D
- .42 · #FD8998
- .48 · #FF749F
- .56 · #F379AA
- .69 · #D487CA
- .87 · #A19EFE
- .88 · #A19FFF
The logo gradient differs slightly from the palette (bluer lilac end). Which should lead?
Contrast
The ratios below are why brand colours are never text on the off-white, and why ink text passes on every one of them. AA needs 4.5 for body text.
| Sample | Foreground | Background | Ratio | Result |
|---|---|---|---|---|
| Text on light grounds | ||||
| Ink #333333 | Surface #FFFDFC | 12.46 | Pass | |
| Ink #333333 | Cream #FEF7E9 | 11.85 | Pass | |
| Muted ink #5F5B66 | Surface #FFFDFC | 6.52 | Pass | |
| Deep lilac #6A3FB0 | Surface #FFFDFC | 7.02 | Pass | |
| Deep lilac #6A3FB0 | Cream #FEF7E9 | 6.67 | Pass | |
| Ink text on the brand colours (highlights, bubbles, buttons) | ||||
| Ink #333333 | Yellow #FBD783 | 9.11 | Pass | |
| Ink #333333 | Peach #FDAC90 | 6.91 | Pass | |
| Ink #333333 | Pink #F47FAC | 5.10 | Pass | |
| Ink #333333 | Lilac #BE95E6 | 5.19 | Pass | |
| Brand colours as text on the off-white (never used) | ||||
| Yellow #FBD783 | Surface #FFFDFC | 1.37 | Fail | |
| Peach #FDAC90 | Surface #FFFDFC | 1.80 | Fail | |
| Pink #F47FAC | Surface #FFFDFC | 2.44 | Fail | |
| Lilac #BE95E6 | Surface #FFFDFC | 2.40 | Fail | |
| On the ink ground (gradient lettering allowed from h2 size up) | ||||
| On-ink #FFFDFC | Ink surface #2E2C33 | 13.59 | Pass | |
| Yellow #FBD783 | Ink #333333 | 9.11 | Pass | |
| Pink #F47FAC | Ink #333333 | 5.10 | Pass | |
| Lilac #BE95E6 | Ink #333333 | 5.19 | Pass | |
Typography
Two families: a soft, round sans for everything, and a ballpoint hand for short notes. Both are free stand-ins until we know whether Leap holds the licences for the brand fonts.
Figtree Stand-in for TT Fors
Regular 400Medium 500Bold 700Extra bold 800Italic 400
- Licence
- SIL Open Font Licence 1.1
- Source
- Google Fonts, latin subset
- Used for
- Display, headings, body, UI
Nothing You Could Do Stand-in for Biro Script Plus
no packages, a conversation first
- Licence
- SIL Open Font Licence 1.1
- Source
- Google Fonts, latin subset
- Used for
- Short handwritten notes only, never essential information
Swap to the originals (TT Fors and Biro Script Plus) if Leap licenses them for the web. Only the two font tokens change. This kit loads the stand-ins from Google Fonts because it is a single file; the production build will self-host the files in assets/fonts/.
The scale, live
Less noise.
Communication that feels like your brand.
Think first. Then create.
From first chat to finished work
Strategy, creativity and execution, in one place. We help you work out how to communicate, then help you do it.
We're a boutique digital communications studio based in Mauritius. We look after social media, digital strategy, content and brand communication for brands that care how they come across.
Choose one, or "Not sure yet".
it doesn't stop at the plan
Real copy in the type
Home hero, option A
Communication that feels like your brand.
We help brands communicate with more intention.
Services line
Strategy, creativity and execution, in one place.
Services can stand alone or work together. We'll shape the mix around what you need.
services
Gradient lettering
Gradient lettering is allowed only on the ink ground, at h2 size and up (as in guide p.16). On light grounds the gradient sits under ink text as a highlight or underline, or forms a large decorative word marked aria-hidden. Never as readable text.
Shapes and squiggles
Free-flowing, thick, round-ended squiggles that can overlap type. One per section at most, and never in front of text on phones.
From supplied decor · rights unknown · placeholder
squiggle-01 · fill and stroke
squiggle-02 · fill and stroke
squiggle-03 · fill and stroke
squiggle-04 · fill and stroke
squiggle-05 · fill and stroke
squiggle-07 · fill and stroke
squiggle-08 · fill and stroke
squiggle-09 · fill and stroke
All eight were recoloured to the palette hexes. The guide's own squiggle examples on p.12 use colours that are not the four on p.11. Rights to the supplied files are unknown, so every one of them is a placeholder.
A squiggle that draws itself
Stroke-dashoffset, about 1.2 seconds, once when it enters.
A squiggle behind a headline
As on guide p.12: the squiggle sits behind the type, so the ink text stays readable on the lilac.
From supplied decor · placeholder
Less noise.
More intention.
Two squiggles of our own
Each is a single stroke path on the palette. They are the replacement route if the rights to the supplied decor don't clear.
Gradient blobs
Soft gradients are Leap's atmosphere. They are built in CSS from the palette (radial gradients plus blur), so they stay light and on colour.
Supplied blob files are 3–12 MB rasters in off-palette colours; rebuilt in CSS.
Gradient chip
An icon inside a soft gradient glow, for service cards and small highlights.
Gradient footer horizon
A band that rises into the footer once per site, carrying the closing line of the page.
Strategy with purpose.
Speech-bubble system
Bubbles appear only where a real exchange happens: a visitor's thought, Leap's reply, a message being typed. Never as wallpaper.
Visitor, grey
I don't have time to manage my own social media accounts.Leap, gradient
We can take it off your plate, from strategy to posting.Typing indicator
The ring from the logo, as a container
Let's start a conversation.
A gentle float
Think first. Then create.translateY ±6px, 8s ease-in-out. Paused when off-screen and under reduced motion.
Sound familiar?
The visitor's thoughts arrive in grey, Leap's answers in gradient. They appear one by one as you scroll to them. Thought 1 is a the example thought from the guide (p.22); 2 to 4 are our drafts for Alexa to confirm.
An interactive bubble
A gradient dot that grows into a bubble on hover, keyboard focus or tap (450ms, cubic-bezier(.55,0,.1,1)).
Annotation set
The editing marks that show words being chosen: select, circle, underline, and a note in the margin. At most one per section.
Selection box
Lilac handles, as on guide p.21. 300ms.
Say less, with more intention.
Hand-drawn circle
Draws once around one word.
Say less, with more intention.
Squiggle underline
Draws under a word, about 900ms.
Say less, with more intention.
Margin note with a drawn arrow
Handwritten, short, never the only place a fact appears.
no packages, a conversation first
Icons and illustrations
The guide's illustrations look like stock library art and their licence is unknown, so we propose a small set of our own, drawn from Leap's own vocabulary: drafting, notes, conversation, strategy. A confident ink line, flat palette fills, no faces.
Guide p.19: eight illustrations in blue and yellow, outside the palette. They look like stock library art; licence unknown. Not reproduced until the licence is confirmed.
A message being drafted
A margin note pointing at a word
A conversation: visitor and Leap
A strategy board
Ink line #333333, 2.5px, round caps and joins. Fills from the palette. No faces, no people.
Service icons
Six line icons on a 24px grid with a 2px ink stroke, each in a gradient chip. FK original · proposal
- Social Media Management
- Digital Strategy
- Creative & Content Direction
- Brand Communication Support
- Consulting & Audits
- Campaign & Launch Support
Components
Live, with the real draft copy. Where a component has states (hover, focus, error, success), they are shown.
Header and navigation
The logo, three links, and the gradient "Free consultation" pill that stays in the bar. Hover draws the underline; the current page keeps a short static squiggle.
At phone width
Closed: logo, a Menu button and a compact consultation pill. Try it: the sheet opens in 350ms.
Open: links stacked, a Close button. Focus is trapped while open; Escape closes.
Buttons and links
Try the real ones, then read the state table. Primary is a gradient pill with ink text. Secondary is an ink outline. Links are deep lilac with a gradient underline on hover.
The last button shows its loading state for a moment when pressed.
| Component | Default | Hover | Focus | Active | Disabled | Loading |
|---|---|---|---|---|---|---|
| Primary | ||||||
| Secondary | Not used | |||||
| Text link | Not used | Not used |
Service card
Cream, a gradient icon chip, a title, one line and "More about this". The whole card is one link through its title; on hover it lifts 2px and the chip glows. Three of the six are shown.
-
Social Media Management
A consistent, purposeful presence, managed for you.
More about this -
Digital Strategy
Clarity and direction for how your brand communicates online.
More about this -
Consulting & Audits
A fresh look at what's working, what's missing and what's next.
More about this
Approach step card and strategy board
Five steps on a soft board. Hover, focus or tap a step: it gets the selection box and the others dim to 60%. Under 900px it is a plain vertical list.
it doesn't stop at the plan
Conversation starter
The first thing a visitor can do on the home page: a speech-bubble input with a send button. Send stays dim until something is typed.
Enquiry form
Let's start a conversation.
Tell us a little about your brand and what you need. There's no commitment: it's a free first chat to see how we can help.
What happens next
Mock-up: nothing is sent. This form isn't connected yet.
404 bubble
Hmm, this page seems to have wandered off.
It may have moved, or it never existed. Let's get you back on track.
Let's start a conversation.
Tell us a little about your brand and what you're working on. Alexa will get back to you personally to arrange a chat.
Motion library
Gently expressive, never in the way. The verbs are type, select, circle, underline and reply. CSS and SVG first; a little vanilla JavaScript for typing and scroll-in; no animation library.
| Tier | Effect | Reference | Timing and rule |
|---|---|---|---|
| Core: the signature, used across the site | |||
| Core | Soft gradient blob | katana, onliftoff | CSS radial gradients and blur. 18–24s drift. Paused off-screen, static under reduced motion. Never WebGL. |
| Core | Squiggle or underline that draws once | lxlcreative | stroke-dashoffset, 900ms–1.5s, one-shot on entry, not scroll-scrubbed. One per page. |
| Core | Speech bubbles for real exchanges, with a gentle float | agencefoudre | translateY ±6px, 8s ease-in-out. Static under reduced motion. |
| Core | Handwritten margin note with a drawn arrow | more-nutrition | Static ink by default. |
| Core | Top-bar "Free consultation" pill | waxyweb | A layout rule, not motion. |
| Accent: at most one per section | |||
| Accent | Selection box over a word | Guide p.21 | 300ms. |
| Accent | Bubbles appearing on scroll | Guide p.21 | Pop 400ms, 80ms stagger, 4 at most. |
| Accent | Gradient icon chips | onliftoff | Static glow. |
| Accent | Hand-drawn circle | Guide p.21 | Draws once. |
| Accent | Interactive bubble | cocotastudio | 450ms, cubic-bezier(.55,0,.1,1). Hover, keyboard focus and tap. |
| Accent | Ink "boil" on handwritten notes | more-nutrition | steps(7), 0.8s, 1px. Removed under reduced motion. |
| Rare: at most once on the whole site | |||
| Rare | Typing and replacing line (hero secondary line only, never the h1) | alignui | 80ms per character typing, 60ms deleting, 2.1s hold, 0.8s caret blink. Stops after two cycles. |
| Rare | Giant word with small floating objects | getfrenly | At small scale. |
| Rare | A line that draws itself into the speech bubble, then the logo | No reference | New design work. |
| Rare | Interactive strategy board | Approach page | As shown in Components. |
| Rare | "Since 2021" stamp | waxyweb style | Stroke SVG. The year needs confirming. |
| Rare | Gradient horizon on the footer band | onliftoff | Once, global. |
| Never | |||
| Never | Scroll hijacking or smooth-scroll libraries, preloaders, parallax on text, WebGL, sprite characters, autoplaying sound, cursor followers | Study notes | More than two always-on loops visible at once. |
The typing line, live
We help brands communicate with more intention.
The alternatives
- communicate with more intention. (the settled sentence)
- find the right direction.
- shape the message.
- show up more consistently.
- turn strategy into content.
The full sentence is on screen first. Only the last phrase is replaced, so the sentence is never empty. It runs two cycles, settles on the original, then stops. Screen readers get the full sentence; the animated span is hidden from them.
The rules
- At most two always-on loops visible at once. The blob drift and the bubble float pause when they leave the screen.
- Nothing delays reading or the primary action. Every sentence is visible in the first frame.
- Every animation has a reduced-motion end state: type shows the full sentence, underlines are drawn, bubbles are visible, blobs are still. Use the "Reduce motion" switch at the top to see it.
- Narrative animations run once per visit. Interface motion stays between 140ms and 350ms.
Voice
Conversational, clear and warm, with a quiet confidence. From the guide, p.24.
We are
- Conversational. Natural and easy to understand.
- Clear. Simple language over unnecessary jargon.
- Warm. Friendly without trying too hard.
- Confident. We know our craft without needing to prove it constantly.
- Thoughtful. There should be intention behind what we say.
We avoid
- Marketing buzzwords and corporate jargon.
- Overly sales-driven language.
- Exaggerated claims and big promises.
- Trendy language that doesn't feel natural.
Say this, not this
Say thisA fresh look at what's working, what's missing and what's next.
Not thisCutting-edge, best-in-class audits that unlock your potential.
Say thisNot everything needs to become content.
Not thisPost every day or get left behind.
Say thisTell us a little about your brand and what you're working on.
Not thisUnlock your brand's full potential with our end-to-end solutions.
Strategy with purpose.
Questions for Alexa
Ten things we need you to decide before the mock-ups. Short answers are fine. The copy questions are in the separate copy draft page, and listed again below.
- The idea. Does "a message being drafted and refined in conversation" feel like Leap? It shapes the bubbles, the editing marks and the motion throughout.
- Logo variants. Do you approve the colour-on-dark, mono dark, mono white, bubble-only, bubble mono and favicon versions? The favicon ring is thickened so it holds at small sizes.
- Logo gradient or palette. The logo's own gradient has a bluer lilac end than the palette. Which should lead on the website?
- Squiggle colours. The squiggles on guide p.12 use colours outside the four on p.11. Should we keep squiggles to the four palette colours?
- Decor rights. Who made the squiggle and blob files? If they came from a Canva library, we can't reuse them. Can you send the native files, or shall we use our own?
- Deep-lilac link colour. We darkened lilac to #6A3FB0 so links and focus rings are readable. Is that acceptable?
- "Since 2021". Is the year right, and should the stamp appear on the site?
- Floating bubble reference. On agencefoudre.com, did you mean the floating emoji bubbles in the hero or the fixed chat or WhatsApp button? We assumed the hero bubbles. Would you like a WhatsApp button too?
- Font licences. Does Leap hold web licences for TT Fors and Biro Script Plus? If not, we use Figtree and Nothing You Could Do, both free under the Open Font Licence.
- Illustrations. The guide's p.19 illustrations look like stock library art. Are you happy for us to draw our own set in the palette instead?
Copy questions
The copy questions are in the separate copy draft page. They are repeated here so you can answer everything in one place. The two that overlap with the list above (the year and the floating bubbles) appear only once.
- Hero: which direction feels most like Leap? A (promise), B (belief) or C (tagline)?
- Button wording: "Book a free consultation" (as on your reference site) or "Start a conversation"? The first promises a set meeting; the second is softer.
- Free chat: is the first chat free and without commitment? Call, video, or coffee in person too?
- Response time: what can we promise after an enquiry (e.g. "within two working days")?
- Your story: 60 to 100 words in your own words for About, plus a portrait photo.
- Faith: how visible should the faith message and the verse be? We suggest About only, as a quiet note.
- Services: please check each "What it can include" list. They are our drafts, not from the guide.
- Sound familiar? section: do the three drafted visitor thoughts match what clients actually tell you? Any to add?
- Work: is there work we can show (with clients' permission)? A Work section appears only when there is.
- Contact details: email, phone or WhatsApp (if public), area, social links.
- Reach: do you want to say anything about clients outside Mauritius?
- Privacy text: who can provide it (or should we suggest an adviser)?
- Internal pages: guide pp.27 to 29 (landscape, guardrails, vision) read as internal. We only used p.27's four differences, rewritten for visitors. Is that OK?
For the studio: issue references
- OPEN-2: rights to the decor files and the p.19 illustrations (questions 4 and 9).
- OPEN-3: approval of the derived logo variants (question 1).
- OPEN-4: squiggle colours and the deep-lilac link colour (questions 3 and 5).
- OPEN-6: "Since 2021" (question 6).
- OPEN-15: floating bubble reference (question 7).
- OPEN-16: logo gradient or palette (question 2).
- OPEN-17: blob files rebuilt in CSS (question 4).