Flourish Design System.
flour·ish/ˈflor·iSH/verb
To execute a showy or elaborate gesture, movement, or display, often to demonstrate skill, mastery, or the intricate manipulation of objects to create visual appeal or enhance the performance.
Like a well-executed magic trick, the Trickifi brand balances refreshing impressions with subliminal complexities that enable audiences to focus on its effortless presentation, not its complex inner workings.
01Flourish
Brand.
The traditional serif flair of the word mark is a nod to the golden era of magic; curly mustaches, tall top hats, long coattails, and the eloquent pizzaz of magic’s sophisticated roots.
Framing
Balance and Placement
Full word mark framing
Frame the left and bottom edges of the T, the top edge of the i’s, and the right edge of the period. Lowercase c’s define the white space padding for the outer frame.
Icon framing
Frame the top of the T in a square. Two adjacent periods define the white space padding. A circle cuts through the diagonal corners of each corner square for circle applications.
Lockups
Mark Usage
02Flourish
Color.
Primary colorways mimic classic magician stereotypes of black tuxedos, white rabbits, red roses, black and red card suits, red capes, and white gloves, but with a modern twist that injects a hint of vibrant neon, punchy tones, and eccentric personality.
- Prestodanger · #E80053
- Flamecaution · #F58700
- Flashmemo · #DBC500
- Palmsuccess · #52CC19
- Cooleraction · #0080DB
- Mysticinfo · #7E2EFF
- Whitebase · #FFFFFF
- DovebaseAccent · #F5F7FA
- Smokeneutral · #24394A
- Darksmokebase, dark · #081321
- Blackdepth · #000000
Opacity
Colors use varying opacities on an 8 point scale to create complex, dynamic UI combinations.
On dark
- White10072483216842
- Presto10072483216842
- Flame10072483216842
- Flash10072483216842
- Palm10072483216842
- Cooler10072483216842
- Mystic10072483216842
On light
- Smoke10072483216842
- Presto10072483216842
- Flame10072483216842
- Flash10072483216842
- Palm10072483216842
- Cooler10072483216842
- Mystic10072483216842
Gradients
Blend System
Presto to Cooler
Presto to Flame
Palm to Cooler
Mystic to Cooler
03Flourish
Typography.
Like magic, the word mark and the typeface used throughout Trickifi know when to play and when to take themselves seriously.
Typeface
Figtree by Erik Kennedy
“A geometric sans serif walking the line between simplicity and friendliness. Minimalist but not stiff, casual but not silly.”
- Regular400
- Medium500
- Bold700
- Extra-Bold800
Typescale
Sizes climb a 1.125 major second ratio from 14 on a phone, 16 on a tablet, and 18 on a desk.
- Display 1
Flourish.
- Display 2
Keep your secrets, secret.
- Heading 1
Watch the rabbit perform tricks on its own.
- Heading 2
Practice the pass until nobody sees it.
- Heading 3
Rehearsal notes, Tuesday
- Body
A double lift is only as clean as the get-ready before it. Take the break early, square the deck, and let the top card do the talking.
- Body 2
Added to the close-up act. Last rehearsed four days ago.
- Label
Mastered
04Flourish
Elevation.
Depth represents elements closer or further from the screen, while debossed and embossed surfaces mimic tactile punch-outs you can almost feel.
Levels
Shadow Scale
On dark
- sm0 2px 4pxButtons, tags
- md0 8px 16pxCards, menus
- lg0 16px 32pxDialogs, toasts
On light
- sm0 2px 4pxButtons, tags
- md0 8px 16pxCards, menus
- lg0 16px 32pxDialogs, toasts
Layering
Emboss and Deboss
On dark
Emboss
- neutral
- action
- success
- caution
- danger
- info
- memo
Deboss
- neutral
- action
- success
- caution
- danger
- info
- memo
On light
Emboss
- neutral
- action
- success
- caution
- danger
- info
- memo
Deboss
- neutral
- action
- success
- caution
- danger
- info
- memo
05Flourish
Voice.
Like the perfect patter, Trickifi's voice and tone reinforces the visual presentation with clear, simple copy that grabs attention and directs focus.
Rules
House Style
- 01
8th grade reading level
Plain words over complex ones.
- 02
Keep it light
Make it fun and encouraging.
- 03
Be a mentor
Guide, teach, and push.
- 04
Build trust
No hollow praise or false statements.
Tone
2x2 Tone Guide
- Loading screens
- Achievement unlocked
- Marketing
- Practice reminders
- Onboarding
- FAQ
- Password update
- Error messages
- Security
- Delete account
- Terms and privacy
06Flourish
Iconography.
Created from scratch on a 24 by 24 grid, Trickifi iconography mimics playful, rounded UI components with independently controlled primary and secondary fills.
Core
Primary Icons
Every glyph uses a 2px stroke with rounded, soft edge terminals and corners.
Mastery
Mastery Icons
Specialty icons to represent active and inactive mastery phases.
- None
- Daily
- Twice a week
- Weekly
- Twice a month
- Monthly
- Quarterly
- Infinite
Joker - AS
CardRank Icons
Representing every suit and value in a deck of cards, CardRank icons represent active XP as magicians progress.
07Flourish
Mission.
In an age of endless information and data harvesting, Trickifi exists as a safe place for magicians of all skill levels to advance their craft.
01
Lower the entry barrier
Make it easy for new magicians to perform their first trick.
02
Protect the magician’s code
Provide a safe place to store and protect secrets.
03
Keep magic accessible
Separate someone’s ability to pay from their ability to improve.
04
Balance supply and demand
Don’t just collect tricks, master them.
05
Improve magic everywhere
Help magicians learn, master, and perform stronger magic.