The system behind everything Ollily ships.
Foundations for voice, logo, colour, type, iconography, and the Flo agents — plus the systems that turn them into decks, sites, case studies, emails, and ads. Open any page to see the real thing, animated.
$0K
Avg. savings / customer
0%
Cycle-time reduction
0%
Spend under control
0x
Return on investment
Trusted by
ThoughtSpotJumioWhatfixFivetranRipplingAirmeetRapydPostmanThoughtSpotJumioWhatfixFivetranRipplingAirmeetRapydPostman
Getting started04 pages
01IntroductionWhat this system is, who it serves, and how it is organised.intro02Design workflowHow designers start from foundations and ship on-brand work.design03Developer workflowTokens, CSS variables, and how to implement the system in product.dev04Contribution & FAQsProposing changes, ownership, versioning, and common questions.govern
Systems07 pages
05DeckThe presentation system — covers, KPI slides, process, quotes.PPT06Website DLSThe product & marketing web language — tokens and components.web07One pagerThe one-page customer story layout, metrics-led.1-pager08EmailerMarketing and lifecycle email — structure and components.email09WhitepaperLong-form documents — gradient cover, editorial pages, with a live builder.A4 doc10Email signatureThe company signature block, with a live builder.mail11Social & adsSocial posts and paid ad frames across formats.promo
Foundations06 pages
12Logo usageWordmark, the Flo mark, clear space, and misuse — with downloads.brand13ColourOne maroon, one magenta, warm neutrals — roles and ratios.palette14TypographyPP Neue Montreal for display, Inter for UI — scale and rules.type15IconographyThe 1.75px stroke set — grid, sizing, and the full library.icons16Agent avatarsFlo and the agent identity system.agents17Brand assetsEvery lockup, ready to download in SVG and PNG.logos
Design tokens03 pages
How this system works
Foundations
The primitives — voice, logo, colour, type, icons, agents, assets. Change one here and it changes everywhere.
Systems
The deliverables — deck, website, one pager, emailer, signature, social. Each one is built from the foundations.
Tokens
One source of truth. Every colour, size, and radius is a named token you can copy or download.
Tools
Live playgrounds — type, icons, email signature — so you produce on-brand output without guessing.
How to use it
01Start with the foundationsRead voice and colour first — they set the tone for everything else.
02Pick the system you’re buildingJump to Deck, Emailer, Website and so on — each shows a live, animated example of the finished artifact.
03Copy the tokensGrab colours, type, and icons straight from the page, or download the full token file from Brand assets.
04Ship it on-brandUse the playgrounds to fine-tune, then hand off. Press ⌘K anytime to jump between pages.