One source of truth in plain CSS variables. Every colour, type ramp, radius, shadow and motion curve lives in :root — change a token and the whole app re-skins. Built on Next.js, packaged with Capacitor (Android · iOS) and Tauri (Windows · macOS).
Design systemread everytime
Buy and read your favourite book at the best price.
The same components that build this documentation build the storefront, the reader and the player.
160+Design tokens
24Components
2Themes
5Live accents
The rule
/* Pages never hardcode a value — they read tokens. */
.btn--primary { background: var(--accent); box-shadow: var(--shadow-accent); }
/* Flip one token → every CTA, link, focus-ring and chart updates. */
Foundations
Colour system
Warm paper and espresso surfaces, a gold brand accent, a seven-hue book-cover palette and a status set. Click any swatch to copy its token. The accent group re-maps live with the accent switcher above.
Brand accent · semantic (follows the active accent)
Themes & accents · the same markup, re-skinned by one attribute
:root · light
Salt & Honey
Warm paper or espresso — identical tokens.
$18
data-theme="dark"
Salt & Honey
Warm paper or espresso — identical tokens.
$18
Gold
Terracotta
Teal
Plum
Berry
Foundations
Typography
Geist for interface text, Fraunces for book-flavoured display and titles, Geist Mono for tokens and labels. Eleven sizes, four weights, four line-heights.
Families
Ag
ABCDEFGHIJ abcdefghij 0123456789
GeistSans · interface
Ag
ABCDEFGHIJ abcdefghij 0123456789
FrauncesSerif · display & titles
Ag
ABCDEFGHIJ abcdefghij 0123456789
Geist MonoMono · tokens & code
Type scale
DisplayRead everytime4rem
Heading 1Read everytime3rem
Heading 2Read everytime1.75rem
Heading 3Read everytime1.375rem
LeadRead everytime1.125rem
BodyRead everytime1rem
SmallRead everytime0.8125rem
LabelRead everytime0.6875rem
Weights
Aa
Regular · 400
Aa
Medium · 500
Aa
Semibold · 600
Aa
Bold · 700
Book-title specimen & body
milk & honey
by rupa kaul
A collection of poetry and prose about survival, about the experience of violence, abuse, love, loss and femininity — set in the warm, paper-soft voice the Vidyora system is tuned for.
Foundations
Spacing & radii
A single spacing scale drives every gap and pad; a radii scale drives every corner — from 6px chips to fully-pill buttons.
Spacing scale
--s-12px
--s-24px
--s-38px
--s-412px
--s-516px
--s-620px
--s-724px
--s-832px
--s-940px
--s-1048px
--s-1164px
--s-1280px
--s-1396px
Radii
--r-xs6px
--r-sm9px
--r-md13px
--r-lg18px
--r-xl24px
--r-2xl30px
--r-fullfull
Foundations
Layout & positioning
Composable layout primitives that respond to content and container width — most need no media queries at all. Each reads spacing from the --s-* scale and stacking from a shared z-index ladder, so a layout never hardcodes a gap or a magic number.
Center · optimal measure
This column is constrained to a comfortable reading measure and centred in its container — the same primitive behind every article body, dialog and empty state.
Stack · cluster
Stack — vertical rhythm
Header
Body
Footer
Cluster — wraps freely
FictionPoetryMemoirScienceHistoryRomanceEssays
Auto-grid · reflows with no breakpoints
Resize the window — columns are added or dropped automatically via minmax(min(180px, 100%), 1fr). The same primitive lays out the storefront, the cart and these book cards.
65 million copies sold
Salt & Honey
Marisol Vega
Salt & Honey4.9
$15
Now a major motion picture
The Quiet Tide
E. R. Halloway
The Quiet Tide4.7
$14
New York Times bestseller
Paper Moons
Rupa Kaul
Paper Moons4.8
$18
Editor's pick
Coffee at Dawn
Idris Bello
Coffee at Dawn4.6
$12
Award winning
Letters to the Sea
Nina Okafor
Letters to the Sea4.8
$16
Sidebar · fixed side + fluid main
Side ~240px
Main · fluid — wraps under the side when the row gets too narrow
Switcher · row flips to a column
Three panels share a row until it can’t honour the 22rem threshold, then all switch to a column at once — driven by content width, not a media query.
One
Two
Three
Cover · fill height, centred main
Top bar
Main — pinned to the vertical centre
Footer
Frame · lock media to an aspect ratio
16:9
1:1
3:4
Reel · horizontal scroll-snap
Scroll sideways → each item snaps into place. Powers every shelf and carousel.
65 million copies sold
Salt & Honey
Marisol Vega
Now a major motion picture
The Quiet Tide
E. R. Halloway
New York Times bestseller
Paper Moons
Rupa Kaul
Editor's pick
Coffee at Dawn
Idris Bello
Award winning
Letters to the Sea
Nina Okafor
#1 national bestseller
A Promised Morning
Theo Marsh
Recently added
Wildflower Theory
Janina Sol
Staff favourite
Midnight Cartography
Arman Yusuf
Layer & positioning · overlays, pins, scrim
New
Paper Moons
Rupa Kaul
.l-layer stacks every child into one cell; .fill + .scrim lay a readable gradient over media; .pin-tr / .pin-bl anchor badges and captions to a corner.
Z-index ladder · breakpoints
Token
Value
Used by
--z-raised
10
Hover-lifted cards
--z-sticky
20
Top bar
--z-dropdown
30
Tooltips · menus
--z-overlay
100
Modal scrim
--z-modal
110
Modal surface
--z-toast
200
Toasts
Breakpoint
Width
Target
--bp-sm
480px
Large phones
--bp-md
768px
Tablets
--bp-lg
1024px
Small laptops
--bp-xl
1280px
Desktops
Responsive visibility
Visible ≥ 640px Visible < 640pxResize the window to toggle — .hide-mobile / .only-mobile.
Foundations
Elevation
Soft, warm-tinted shadows (brown in light, black in dark) plus a translucent glass surface for floating bars and overlays.
Shadow scale
--shadow-smSmall
--shadow-mdMedium
--shadow-lgLarge
--shadow-xlX-Large
--shadow-accentAccent glow
blur(18px)
--glass-bgGlass
Foundations
Iconography
A consistent stroke-based set on a 24px grid. Every glyph inherits currentColor and the 1.8px stroke, so icons always match their text.
47 icons
book
bookOpen
heart
heartFill
cart
search
bell
user
star
starFill
play
pause
bookmark
menu
chevronRight
chevronLeft
arrowRight
plus
check
x
sun
moon
headphones
sparkles
grid
home
filter
share
download
copy
eye
settings
clock
flame
globe
chevronDown
chevronUp
minus
info
alertTriangle
message
skipBack
skipForward
send
paperclip
robot
pencil
Components
Buttons & controls
Five button variants across three sizes, plus badges, tags, chips, segmented controls, switches, ratings, avatars and a glass tab bar.
Button variants
Sizes, icons & states
Badges
DefaultBestsellerNewHardcoverIn stockLow stockSold out
Tags & chips
InstapoetryPoetryRomanceScience
Segmented · switch · rating
Notifications
4.8/ 708 reviews
Avatars, progress & tab bar
MVEHRKIB+9
38%
Components
Forms & inputs
Text fields with a focus ring drawn from the accent tint, leading-icon search, and a pill search for top bars.
Inputs
Validation states
Enter a valid email address
Code applied — 10% off
Checkbox, radio & switch
Sync reading progress
Components
Cards
From the storefront grid to the product page, podcast player and feature blocks — every card is the same tokens, recomposed.
Book cards · storefront grid
65 million copies sold
Salt & Honey
Marisol Vega
Salt & Honey4.9
$15
Now a major motion picture
The Quiet Tide
E. R. Halloway
The Quiet Tide4.7
$14
New York Times bestseller
Paper Moons
Rupa Kaul
Paper Moons4.8
$18
Editor's pick
Coffee at Dawn
Idris Bello
Coffee at Dawn4.6
$12
Best-seller rows
Award winning
Letters to the Sea
Nina Okafor
Letters to the SeaNina Okafor4.8
$16
#1 national bestseller
A Promised Morning
Theo Marsh
A Promised MorningTheo Marsh4.5
$19
Recently added
Wildflower Theory
Janina Sol
Wildflower TheoryJanina Sol4.7
$13
Staff favourite
Midnight Cartography
Arman Yusuf
Midnight CartographyArman Yusuf4.4
$11
Product detail
New York Times bestseller
Paper Moons
Rupa Kaul
Paper Moons
Rupa Kaul
$18
4.8/ 708 reviews
PoetryInstapoetry
‘Paper Moons’ is a collection of poetry and prose about survival and the warmth of small things… read more
Feature & author cards
Read anywhere
Sync your place across phone, tablet and desktop in real time.
Listen along
Switch to narrated audio without losing your spot.
Smart picks
Recommendations tuned to what you actually finish.
NO
Nina Okafor
Award-winning novelist · 1.2M readers
Become a great designer?
Achmad Q · Follow
30:0245:00
Card states · loading · empty · error
Your shelf is emptyBooks you save will appear here.
Couldn’t loadCheck your connection and try again.
Components
Navigation & overlays
Tabs, accordions, breadcrumbs and pagination move people through content; alerts, tooltips and a modal dialog carry transient messages. Each re-skins with the active theme and accent.
Tabs
Accordion · FAQ
Yes — tap the download icon on any book and it syncs to your device. Your place is kept across phone, tablet and desktop.
Most titles ship as audiobook, e-book and paperback. The format picker on each product page shows live pricing per format.
Read the first three chapters of any book free for seven days. Cancel anytime and your saved library stays yours.
Breadcrumb · pagination
Alerts · inline banners
New chapter available
‘Paper Moons’ just added an author’s note.
Added to your library
It’s ready to read offline now.
Only 2 left in stock
Order soon to get it delivered by Friday.
Payment failed
We couldn’t charge your card. Update your details to continue.
Tooltip · modal dialog
Components
Commerce
The storefront pieces — a promo banner, a format & price picker, quantity steppers, range sliders and an order summary — all assembled from the same tokens. The promo banner and slider fill follow the live accent.
Promo banner
Editor’s pick
Find the best book of your interest
Format & price · quantity
Choose a format
Quantity
2
Hardcover · ships in 2 days
Range sliders
Max price24$
Reading progress62%
Order summary
Order summary2 items
65 million copies sold
Salt & Honey
Marisol Vega
Salt & HoneyMarisol Vega
1
$15
Now a major motion picture
The Quiet Tide
E. R. Halloway
The Quiet TideE. R. Halloway
1
$14
Subtotal$29.00
Member discount−$4.00
Total$25.00
Concept
Chat & agents
Vidyora’s core idea: every book — or a whole genre — gets an agent trained on it. People chat with the agent, which answers only from the text and cites its sources, and can open an agent’s profile to read its description and see the exact books behind it. It’s all built from the same tokens, components and layout primitives as the rest of the system.
Agent directory
MarisolCompanion for ‘Salt & Honey’
Agent
Speaks in the warm, unhurried voice of Marisol Vega’s bestseller. Ask about the Vega family, the recipes tucked between chapters, or why the orchard matters — every answer stays inside the world of the book.
Fiction
1 book 4.9
The PoetTrained on the poetry shelf
Agent
A genre agent drawing on your whole poetry collection. Bring it a feeling and it answers with lines, themes and forms pulled across every poetry title — citing the page each one came from.
PoetryRomance
3 books 4.8
AtlasYour adventure guide
Agent
Knows every route, map and tide across the adventure novels. Plot a journey, untangle a timeline, or ask what lies past the last charted page — Atlas answers from the text alone.
AdventureEssays
2 books 4.7
MentorMemoir & biography
Agent
Distils the turning-points and quiet advice from the memoir and biography titles into a patient conversation about a life well lived — grounded in lines from the books themselves.
MemoirBiography
2 books 4.6
Agent profile · description + the books it trained on
Marisol Agent
Companion for ‘Salt & Honey’
Speaks in the warm, unhurried voice of Marisol Vega’s bestseller. Ask about the Vega family, the recipes tucked between chapters, or why the orchard matters — every answer stays inside the world of the book.
12.4k chats 4.9 Single book
Trained on 1 book
65 million copies sold
Salt & Honey
Marisol Vega
The Poet Agent
Trained on the poetry shelf
A genre agent drawing on your whole poetry collection. Bring it a feeling and it answers with lines, themes and forms pulled across every poetry title — citing the page each one came from.
8.1k chats 4.8 Genre
Trained on 3 books
New York Times bestseller
Paper Moons
Rupa Kaul
Award winning
Letters to the Sea
Nina Okafor
Recently added
Wildflower Theory
Janina Sol
Messages · citations · thinking
Hi, I’m Marisol. Ask me anything about ‘Salt & Honey’ — I answer from the text.
Why does the orchard keep coming back?
9:41
It’s the family’s memory made physical — each harvest marks a year they’d rather forget. The honey is how they keep what the orchard takes.
Salt & Honey· ch. 4Salt & Honey· p. 112
Suggested prompts · composer (try it)
Hi, I’m Marisol. Ask me anything — I answer only from the book, and I’ll cite the page.
Chat layout · profile beside the conversation
Marisol Agent
Companion for ‘Salt & Honey’
Speaks in the warm, unhurried voice of Marisol Vega’s bestseller. Ask about the Vega family, the recipes tucked between chapters, or why the orchard matters — every answer stays inside the world of the book.
12.4k chats 4.9 Single book
Trained on 1 book
65 million copies sold
Salt & Honey
Marisol Vega
Hi, I’m Marisol. Ask me anything — I answer only from the book, and I’ll cite the page.
On a phone
Marisol trained on Salt & Honey
Hi, I’m Marisol. Ask me anything about ‘Salt & Honey’.
Why does the orchard matter?
now
It’s where the family buries what they can’t say aloud — every season in the orchard mirrors a turn in the Vega story.
Salt & Honey· ch. 4
Product
Storefront & billing
The live-catalog storefront pieces: generative AgentArt portraits, mentor and book cards, the accent-gradient promo strip, the value-props row, and the billing surfaces (wallet, plans, packs). All demo data — nothing here touches the network.
Foundations of Electric CircuitsA. Volta 186 readers
Promo strip · value props
Read the full book in-app
Answers cite the exact page
30 free messages daily
Works on web, desktop & mobile
Wallet panel (mock wallet)
1,240credits banked
18 of 30 free messages left today
Scholar · monthlyrenews Jul 1, 2026
Plan & pack cards (mock)
Most lovedScholar
$3.33/mobilled yearly · $39.99
1,500 credits every month, on top of the daily free messages.
1,500 monthly credits
Every mentor, every book
Web, desktop & mobile
Booster500credits$1.99
Foundations + Components
Motion
Four durations and four easing curves power every transition. Spring for delight (button press, switch, hearts), standard for everything else. All motion respects prefers-reduced-motion.
Motion tokens
Token
Value
Curve
--dur-instant
90ms
--dur-fast
160ms
--dur-base
240ms
--dur-slow
380ms
--ease-standard
cubic-bezier(.2,0,0,1)
--ease-out
cubic-bezier(0,0,.2,1)
--ease-in
cubic-bezier(.4,0,1,1)
--ease-spring
cubic-bezier(.34,1.56,.64,1)
Live interactions
Hover lift
Press ripple
Like · spring pop
Spinner
Skeleton → loaded
1List item 1
2List item 2
3List item 3
Staggered reveal
Toast
Float
Marquee
Salt & Honey The Quiet Tide Paper Moons Coffee at Dawn Letters to the Sea A Promised Morning Wildflower Theory Midnight Cartography Salt & Honey The Quiet Tide Paper Moons Coffee at Dawn Letters to the Sea A Promised Morning Wildflower Theory Midnight Cartography
Scroll reveal (these rose in as you scrolled)
65 million copies sold
Salt & Honey
Marisol Vega
Salt & HoneyMarisol Vega4.9
$15
Now a major motion picture
The Quiet Tide
E. R. Halloway
The Quiet TideE. R. Halloway4.7
$14
New York Times bestseller
Paper Moons
Rupa Kaul
Paper MoonsRupa Kaul4.8
$18
Proof
The system, in context
No bespoke styling — these screens are assembled entirely from the tokens and components above. Switch theme or accent at the top and watch every screen re-skin at once.
Storefront · detail · player
MV
Recommended
See all
65 million copies sold
Salt & Honey
Marisol Vega
Salt & Honey4.9
$15
Now a major motion picture
The Quiet Tide
E. R. Halloway
The Quiet Tide4.7
$14
Best seller
See all
New York Times bestseller
Paper Moons
Rupa Kaul
Paper MoonsRupa Kaul4.8
$18
New York Times bestseller
Paper Moons
Rupa Kaul
Paper Moons
$18
4.8/ 708 reviews
PoetryInstapoetry
‘Paper Moons’ is a collection of poetry and prose about survival and the warmth of small things… read more
Listen everytime
Become a great designer?
Achmad Q · Follow
30:0245:00
Discover · full-screen player
MV2
New
Find your next read
Categories
Recently added
View all
Award winning
Letters to the Sea
Nina Okafor
#1 national bestseller
A Promised Morning
Theo Marsh
Recently added
Wildflower Theory
Janina Sol
Top authors
View all
MVMarisol
NONina
TMTheo
RKRupa
Now playing
Become a great designer?
Achmad Q
30:0245:00
Proof
Devices & transitions
The same tokens and components, framed for phone, tablet and desktop — then the motion that ties screens together: scroll-driven reveals, an app-loading sequence, and screen transitions. Every frame reflows on its own as you resize the page.
One layout · phone · tablet · desktop
DiscoverSee all
HealthScienceMotivation
65 million copies sold
Salt & Honey
Marisol Vega
Now a major motion picture
The Quiet Tide
E. R. Halloway
New York Times bestseller
Paper Moons
Rupa Kaul
Editor's pick
Coffee at Dawn
Idris Bello
Award winning
Letters to the Sea
Nina Okafor
#1 national bestseller
A Promised Morning
Theo Marsh
Phone · 1 column
DiscoverSee all
HealthScienceMotivation
65 million copies sold
Salt & Honey
Marisol Vega
Now a major motion picture
The Quiet Tide
E. R. Halloway
New York Times bestseller
Paper Moons
Rupa Kaul
Editor's pick
Coffee at Dawn
Idris Bello
Award winning
Letters to the Sea
Nina Okafor
#1 national bestseller
A Promised Morning
Theo Marsh
Tablet · 2–3 columns
mentora.app/discover
DiscoverSee all
HealthScienceMotivation
65 million copies sold
Salt & Honey
Marisol Vega
Now a major motion picture
The Quiet Tide
E. R. Halloway
New York Times bestseller
Paper Moons
Rupa Kaul
Editor's pick
Coffee at Dawn
Idris Bello
Award winning
Letters to the Sea
Nina Okafor
#1 national bestseller
A Promised Morning
Theo Marsh
Desktop · multi-column
Scroll-driven · parallax hero + reveal-on-scroll
Read everytime.
65 million copies sold
Salt & Honey
Marisol Vega
Salt & HoneyMarisol Vega4.9
$15
Now a major motion picture
The Quiet Tide
E. R. Halloway
The Quiet TideE. R. Halloway4.7
$14
New York Times bestseller
Paper Moons
Rupa Kaul
Paper MoonsRupa Kaul4.8
$18
Editor's pick
Coffee at Dawn
Idris Bello
Coffee at DawnIdris Bello4.6
$12
Award winning
Letters to the Sea
Nina Okafor
Letters to the SeaNina Okafor4.8
$16
#1 national bestseller
A Promised Morning
Theo Marsh
A Promised MorningTheo Marsh4.5
$19
Scroll inside the phone: a progress bar tracks position, the hero parallaxes, and each row reveals as it enters view — an IntersectionObserver scoped to the device, using the motion tokens.
App loading · splash → skeleton → loaded
Vidyora
An animated mark with an indeterminate bar, then a skeleton screen, then the loaded content rising in — the standard cold-start sequence, built entirely from tokens.
Screen transitions · slide between views
65 million copies sold
Salt & Honey
Marisol Vega
Salt & Honey
$15
4.9/ 1820 reviews
FictionBestseller
Use the arrows: each screen slides in the direction you move, driven by --dur-slow and --ease-out. The same transition works in the tablet and desktop frames.