White canvas
#ffffffSpace to focusTHE KESAR DESIGN LIBRARY
Considered parts.
One clear language.
Production components, useful states and familiar patterns. The same purple system, from the first field to the final detail.
01 / THE FOUNDATION
Clarity, with
a little character.
White space for focus. Purple for action. Deep ink for a comfortable read.
Purple
#6d3ed4Primary actionsDark purple
#2b1748Selected & emphasisLilac
#eee7f8Quiet surfacesMuted plum
#655775Supporting contextDeep ink
#241633Headings & bodyDM SANS / DISPLAY
Room for
a new thought.
BODY & INTERFACEA little context makes
A little context makes
all the difference.
A thoughtful system gives the important things a clear voice. The details stay useful, readable and close at hand.
AaRegular / 400AaMedium / 500AaSemibold / 600
02 / ACTIONS & FEEDBACK
Every action.
A thoughtful response.
Compact, rounded actions with clear priorities. Soft transitions and predictable feedback.
A clear next move.
One primary action, with quieter alternatives.
Focus, hover, pressed and disabled states share the same visual rules.
Space for the details.
A focused dialog or a useful side conversation.
Keyboard focus stays inside. Escape closes and restores focus.
03 / FORMS, WITH CONTEXT
A useful conversation.
One field at a time.
Clear labels, comfortable inputs and feedback where you need it. Try the complete local example.
04 / EVERY STATE, CONSIDERED
A complete experience.
Even between the moments.
Ready, loading, empty and error states belong to the same system.
READY FOR THE NEXT STEPYour next idea
Your next idea
has a place to begin.
A clear brief. Its supporting context. A useful next move.
Morning, unhurried.Creative direction · Prepared exampleReady
A SKELETON PREVIEWA little room
A little room
for what comes next.
Stable space for the next piece of work. This is an illustrative loading state; no request is in progress.
A FRESH WORKSPACEStart with
Start with
a little curiosity.
No starting points here yet. Give the first idea a few words.
Try a starting pointAN EXAMPLE INTERRUPTIONA small pause.
A small pause.
A clear way forward.
This illustrative draft could not be loaded. Your words have not been changed. Try again to return to the ready example.
05 / THE WORK, IN VIEW
Less searching.
More useful context.
Search, filter and sort the illustrative activity. The detail stays readable on every screen.
Workspace activity
Prepared examples| Morning, unhurried. | Create | Mina | Ready | 2026-10-31 |
| A home for the next idea | Build | Ari | In review | 2026-10-30 |
| Make space to begin | Research | Jules | Draft | 2026-10-29 |
| A quieter launch | Create | Ari | Draft | 2026-10-28 |
| A shared library | Build | Mina | Ready | 2026-10-27 |
| The first useful question | Research | Jules | In review | 2026-10-26 |
A little room for something new.
No example activity matches. Clear the filters to begin again.
6 illustrative starting points
06 / TWO CONSIDERED MOODS
One workspace.
Two thoughtful surfaces.
The brief, its supporting context and its review change together. Explore light and dark product components.
A slower kind
of beginning.
A thoughtful coffee launch for people who value a little space before the day begins.
- Audience
- Curious people. Unhurried mornings.
- Voice
- Warm, direct and quietly optimistic.
- First next step
- A landing-page opening, ready for review.
Keep the thinking
within reach.
Separate what belongs in the brief from what still needs a little exploration.
Launch briefAudience, purpose and the first useful outcome
Creative referenceCloud white. Slow mornings. A thoughtful voice.
Open questionWhich opening makes the next action clearest?
A direction,
ready for another mind.
Ask one useful question before carrying the draft forward.
THE REVIEW QUESTION
Does the opening feel calm, while making the next action clear?
Ready for a thoughtful review.
Local product example. No shared account or connected service.
THE DETAILS, MADE CLEAR
A little clarity
before you begin.
Good questions deserve useful answers.
Still curious? Let’s talkWhat is Kesar?
Kesar is a customizable website template for a fictional GenAI platform. Its product interfaces are local, curated demonstrations, designed to help you tell your own product story.
Can I try the playground?
Yes. Choose Create, Research or Build, add a brief or context note, and explore a prepared example. You can save its text. Nothing is sent to an AI service.
Does the template connect to AI models?
No model, account, booking, payment or external tool is connected. Add and verify your own backend before promising live generation or integrations.
What can I customize?
Kesar includes native Framer pages with editable source sections. Change copy, links, images, colors and font family through section controls. Reorder sections in the native Stack; structural changes inside a section use the supplied React/CSS source.
Does the animation work on mobile?
The layouts and interactions adapt to smaller screens. The sticky desktop story becomes a compact, directly selectable preview. OS reduced motion and the pause control disable decorative travel.
Are the plans and customer stories real?
No. Product prices, team names, stories and interfaces are illustrative. Replace them with approved facts, your own pricing and verified product capabilities before launch.