Brand & Theme proposal v1 · 27 Aug 2026
Your Partners in Knowledge
Curriculum-true computer education, built with teachers, ready for tomorrow's classroom. This page is the proposed brand system for Educare Knowledge India — colour, type, icons, motion, components and navigation — built so you can switch directions live and sign off on one.
- 3 colour directions
- 3 type pairings
- motion.dev + Lenis
- 18 series · 128 books
02 · Positioning, pillars and the mark
Brand idea
What Educare stands for, said plainly, and how the four-tile mark carries it.
Educare Knowledge India publishes the computer-science and IT curriculum that Indian schools actually teach from — KG to Class X — and backs every book with the classroom tools a teacher needs to run the lesson: interactive modules, tests, manuals, flip books, software support and workshops.
Your Partners in Knowledge is a promise to the teacher and the principal: we do the preparation, you do the teaching.
Curriculum-true computer education, built with teachers, ready for tomorrow's classroom.
Voice
Confident, warm, plain. Sentences a Class VI student could read; claims a principal could verify. Never childish — no comic lettering, no mascots. Never corporate-cold — no stock handshakes, no "leveraging synergies". Headlines are statements, not slogans; body copy says "you" and "your school".
Audiences
- Principals and purchase decision makers — proof, pricing, ISBN, board mapping.
- Computer teachers — solutions, TRM, workshops, software help.
- Parents and students (6–16) — what the child will learn, friendly visuals.
Three pillars
-
Curriculum-true
Written to CBSE, ICSE and State syllabi and NEP 2020. Specimen copies, ISBNs and class mapping are always visible.
Proof on the site: Series grid by class range and platform · specimen requests · board badges
-
Future-ready
AI, coding, cyber safety and office tools taught at the right age; Tech Updates keep content current.
Proof on the site: Artificial Intelligence, Cyber Hub, Tech 360 · News stream
-
Teacher-first
ITM, ACT, TRM, workshops and software support exist so a computer teacher is never alone.
Proof on the site: Eight solutions · workshop calendar · careers for authors
Logo lockups
The mark is kept and redrawn as clean vectors on a 512 grid: a pointy-top hexagon, four tiles with a 20-unit gutter and true 16-unit corner arcs. Tile colours are CSS variables with hex fallbacks, so the same file is correct as an image and re-tintable when inlined.
- Horizontal — header, footer, documents (default)
- Stacked — social avatars, cover pages
- Mark only — favicon, app icon, ≤ 40 px
- Mono — print, embossing, on photography
- On dark — tiles stay coloured, letters go inverse
Clear space
X = the gutter × 4 = 80/512 of the mark height (about 16 %) on every side. Nothing enters X except the tagline in the stacked lockup.
Minimum size
Mark 24 px (favicons use the mark only); horizontal lockup 120 px wide; print mark ≥ 8 mm. Below these sizes the glyphs stop reading.
24 px
40 px
120 px wide
favicon.svgMisuse
Never recolour tiles outside the theme variables, rotate, stretch, add effects, swap the tile order, set the wordmark in another typeface, or put the ® inside the lockup.
-
Do not rotate
-
Do not stretch
-
No drop shadows
-
Do not recolour tiles
-
Not on a tile hue at full strength
-
No outlines or bevels
03 · Three directions, one token set
Colour system
Switch a direction and the whole page recolours — every value comes from the same semantic tokens, so nothing needs renaming when you choose.
Live palette
Hex values are read from the compiled stylesheet for the active direction.
primary
--color-primary
primary-deep
--color-primary-deep
primary-soft
--color-primary-soft
secondary
--color-secondary
secondary-soft
--color-secondary-soft
accent
--color-accent
accent-soft
--color-accent-soft
success
--color-success
success-soft
--color-success-soft
warning
--color-warning
warning-soft
--color-warning-soft
danger
--color-danger
danger-soft
--color-danger-soft
info
--color-info
info-soft
--color-info-soft
Surfaces, ink and lines
surface
--color-surface
surface-2
--color-surface-2
surface-inverse
--color-surface-inverse
ink
--color-ink
ink-muted
--color-ink-muted
ink-inverse
--color-ink-inverse
line
--color-line
line-strong
--color-line-strong
Fixed scales (identical in every direction)
For illustration, data-viz and anything that must not follow the switcher.
50
--color-ink-50
100
--color-ink-100
200
--color-ink-200
300
--color-ink-300
400
--color-ink-400
500
--color-ink-500
600
--color-ink-600
700
--color-ink-700
800
--color-ink-800
900
--color-ink-900
950
--color-ink-950
50
--color-brand-50
100
--color-brand-100
200
--color-brand-200
300
--color-brand-300
400
--color-brand-400
500
--color-brand-500
600
--color-brand-600
700
--color-brand-700
800
--color-brand-800
900
--color-brand-900
950
--color-brand-950
green
--color-logo-green
red
--color-logo-red
orange
--color-logo-orange
cyan
--color-logo-cyan
teal
--color-logo-teal
Usage ratio
- 60 % surface + surface-2
- 30 % ink + primary teal
- 10 % the four tile hues in small, equal doses — badge dots, icon tiles, numerals, the hero mesh. Never two tile hues on one component.
- 60 % white + navy-tinted surface-2
- 30 % navy ink + deep cyan
- 10 % orange, reserved for the one primary CTA per viewport. Large navy bands are expected.
- 60 % warm off-white + surface-2
- 30 % teal + warm ink
- 10 % coral and lime as highlights. Lime is never a text colour and never a button fill on its own.
Gradient recipes
- --gradient-brand hero text, progress, marquee edge
- --gradient-cta CTA band, dark cards
- --gradient-hero mesh behind the hero
- --gradient-image photo overlay for text
Compare the three directions
primary
primary-deep
secondary
accent
ink
surface
surface-2
surface-inverse
primary
primary-deep
secondary
accent
ink
surface
surface-2
surface-inverse
primary
primary-deep
secondary
accent
ink
surface
surface-2
surface-inverse
WCAG contrast (computed live)
Computing…
| Sample | Foreground | Background | Ratio | Min | Result | Use |
|---|---|---|---|---|---|---|
ink |
surface |
— | 4.5:1 | — | body text | |
ink |
surface-2 |
— | 4.5:1 | — | body text on alt band / card | |
ink-muted |
surface |
— | 4.5:1 | — | secondary text | |
ink-muted |
surface-2 |
— | 4.5:1 | — | secondary text on alt band | |
ink-inverse |
surface-inverse |
— | 4.5:1 | — | text on dark band / footer | |
primary-fg |
primary |
— | 4.5:1 | — | primary button label | |
secondary-fg |
secondary |
— | 4.5:1 | — | secondary button label | |
accent-fg |
accent |
— | 4.5:1 | — | CTA / accent button label | |
primary-deep |
surface |
— | 4.5:1 | — | text link | |
primary-deep |
surface-2 |
— | 4.5:1 | — | text link on alt band | |
primary-deep |
primary-soft |
— | 4.5:1 | — | soft primary badge | |
ink |
secondary-soft |
— | 4.5:1 | — | soft secondary badge | |
ink |
accent-soft |
— | 4.5:1 | — | soft accent badge | |
success |
surface |
— | 4.5:1 | — | success text | |
warning |
surface |
— | 4.5:1 | — | warning text | |
danger |
surface |
— | 4.5:1 | — | error text / form validation | |
info |
surface |
— | 4.5:1 | — | info text | |
success |
success-soft |
— | 4.5:1 | — | success badge | |
warning |
warning-soft |
— | 4.5:1 | — | warning badge | |
danger |
danger-soft |
— | 4.5:1 | — | danger badge | |
info |
info-soft |
— | 4.5:1 | — | info badge | |
primary |
surface |
— | 3:1 | — | focus ring / primary border / large text | |
primary |
surface-2 |
— | 3:1 | — | focus ring on alt band | |
line-strong |
surface |
— | 3:1 | — | input border (non-text UI) | |
accent |
surface-inverse |
— | 3:1 | — | accent on dark band (large text / icon) | |
secondary |
surface-inverse |
— | 3:1 | — | secondary on dark band (large text / icon) |
Not allowed in any direction: white on secondary or accent, and primary / secondary / accent as small text on a surface in B and C — use primary-deep or ink.
Mini mock
NEP 2020
Tech Trek · Classes 1–8
Windows 11 · Office 2021
Eight books, one teacher's manual per class, ITM and ACT included. From ₹295.
Class 3
CBSE
In stock
04 · Three pairings and one scale
Typography
A display face for headings, a body face for everything else. The pairing is one attribute on the page; the scale never changes.
-
Aa
Your Partners in Knowledge
Computer books for classes I–X, graded to NCERT guidelines and aligned with CBSE, ICSE and state boards. ₹295 · ISBN 978-81-983279-7-0
Sora 600/700 · Inter 400/500/600
-
Aa
Your Partners in Knowledge
Computer books for classes I–X, graded to NCERT guidelines and aligned with CBSE, ICSE and state boards. ₹295 · ISBN 978-81-983279-7-0
Plus Jakarta Sans 600/700 · Source Sans 3 400/500/600
-
Aa
Your Partners in Knowledge
Computer books for classes I–X, graded to NCERT guidelines and aligned with CBSE, ICSE and state boards. ₹295 · ISBN 978-81-983279-7-0
Manrope 600/700 · Inter 400/500/600
-
Aa
Your Partners in Knowledge
Computer books for classes I–X, graded to NCERT guidelines and aligned with CBSE, ICSE and state boards. ₹295 · ISBN 978-81-983279-7-0
Poppins 600/700 · Poppins 400/500/600
Type scale
Ten sizes from a 16 px root; Tailwind's 7xl–9xl are removed. Line-height and letter-spacing ride along with each size.
text-xs
12 px · lh 1.35 · ls —
badges, legal, table meta
Computer books for classes I–X, graded to NCERT guidelines.
text-sm
14 px · lh 1.45 · ls —
captions, form help, breadcrumbs
Computer books for classes I–X, graded to NCERT guidelines.
text-base
16 px · lh 1.6 · ls —
body
Computer books for classes I–X, graded to NCERT guidelines.
text-lg
18 px · lh 1.6 · ls —
lead paragraph, card body
Computer books for classes I–X, graded to NCERT guidelines.
text-xl
20 px · lh 1.5 · ls —
card titles, H4
Everything around the book
text-2xl
24 px · lh 1.35 · ls −0.01em
H3
Everything around the book
text-3xl
30 px · lh 1.25 · ls −0.015em
H2 mobile, H1 at 375
Curriculum-true, future-ready
text-4xl
36 px · lh 1.15 · ls −0.02em
H2 desktop, H1 tablet
Curriculum-true, future-ready
text-5xl
48 px · lh 1.1 · ls −0.025em
H1 desktop
Curriculum-true, future-ready
text-6xl
60 px · lh 1.05 · ls −0.03em
display / hero only
Curriculum-true, future-ready
Heading rhythm
Eyebrow · text-sm caps
H1 · the series promise
H2 · section title
H3 · block title
H4 · card title
Body · 16 px, measure capped at 65 characters so a paragraph never runs wider than a comfortable line.
Tabular figures
ISBN, price and class tables use tabular-nums in the body face; never the display face. Prices are ₹ followed by the figure without a space.
| Class | ISBN-13 | ISBN-10 | Price |
|---|---|---|---|
| 1 | 978-81-983279-7-0 | 81-983279-7-5 | ₹295 |
| 2 | 978-81-983279-6-3 | 81-983279-6-7 | ₹385 |
| 3 | 978-81-983279-3-2 | 81-983279-3-2 | ₹485 |
| 4 | 978-81-983279-1-8 | 81-983279-1-6 | ₹515 |
Devanagari fallback
--font-body lists Noto Sans Devanagari after the Latin face and it is loaded only on pages that carry Hindi (lang="hi"). Hindi headings use the body face at semibold — the display faces have no Devanagari.
आपके ज्ञान के साथी
कक्षा 1 से 10 तक की कंप्यूटर पुस्तकें, CBSE और ICSE पाठ्यक्रम के अनुसार।
05 · Static, animated and custom
Iconography
Three layers that share one grammar — 24 px grid, 1.75 stroke, round caps, currentColor — so a Lucide icon, an animated icon and a brand icon can sit in the same row.
Lucide — the static library
Tree-shaken from lucide 1.34; 24 icons relevant to Educare, all at stroke 1.75.
- book
- book-open-text
- graduation-cap
- laptop
- cpu
- brain
- brain-circuit
- school
- shield-check
- sparkles
- monitor-play
- clipboard-check
- layers
- wrench
- link
- calendar-days
- newspaper
- briefcase
- mail
- phone
- map-pin
- users
- lightbulb
- globe
Animated — Lordicon
Free "wired outline" icons, self-hosted as Lottie JSON (no CDN) and loaded only when this section scrolls into view. Colours follow the active direction; hover or scroll to play.
- Book
- Laptop · ITM
- School
- Teachers (stand-in)
- Support
- Careers
- News
- Contact
- Workshops
- Online Links
- TRM
- Sent · check
Animated icons by Lordicon.com (free tier, attribution). Graduation, brain and shield are not available as free outline icons — see the house style.
Animated — house style (Lucide + motion.dev)
The default animated style for the whole site: any static icon, animated with the same spring presets as the rest of the page.
- graduation-cap · cap tips on hover
- brain-circuit · synapses pulse
- shield-check · tick draws on scroll
- sparkles · twinkles
Quadrant set — stagger reveal
- mortarboard
- bulb
- globe-laptops
- open-book
Custom brand set
The four logo quadrants redrawn as consistent 24 px line icons, plus eight solution glyphs. Inline SVG, coloured by currentColor; the quadrant colours are applied by the consumer.
- mortarboard
- bulb
- globe-laptops
- open-book
- specimen
- teacher-manual
- flip-book
- workshop
- software-support
- online-links
- tests
- news
06 · Explains hierarchy, never decorates
Motion language
Things enter from where they belong, one spring family per component class, only transform and opacity animate — and every effect has a reduced-motion form.
Reduced motion
Your operating system currently reports: no preference.
| Token | Value | Use |
|---|---|---|
--duration-fast | 150 ms | hover / press feedback, colour, tooltip |
--duration-base | 300 ms | reveals, accordion, tabs, mega-menu open |
--duration-slow | 600 ms | section stagger reveal, counters, parallax settle |
--duration-hero | 900 ms | logo build on the hero, page transition |
--ease-out-soft | cubic-bezier(0.22, 1, 0.36, 1) | default for entrances |
--ease-in-out-soft | cubic-bezier(0.65, 0, 0.35, 1) | moves between two on-screen positions |
--ease-emphasized | cubic-bezier(0.2, 0, 0, 1) | large panels (drawer, mega menu) |
--ease-spring | cubic-bezier(0.34, 1.56, 0.64, 1) | CSS-only bounce for chips and toggles |
--motion-distance | 24 px | translate distance for reveals |
--motion-stagger | 80 ms | stagger step for lists and the logo tiles |
| Preset | stiffness / damping / mass | visualDuration / bounce | Use |
|---|---|---|---|
gentle | 120 / 20 / 1 | 0.6 s / 0.15 | hero logo tiles, page transition |
standard | 260 / 26 / 1 | 0.4 s / 0.2 | cards, mega-menu panel, drawer |
snappy | 420 / 32 / 0.9 | 0.25 s / 0.1 | press feedback, toggles, chips |
bouncy | 380 / 14 / 0.8 | 0.5 s / 0.45 | kid-facing reveals — direction A only, never on forms |
magnetic | 300 / 22 / 0.6 | 0.3 s / 0.3 | button / logo magnetic pull |
Demos
Stagger reveal on scroll
- book
- laptop
- school
- users
- sparkles
- shield-check
inView + stagger(--motion-stagger), y from --motion-distance.
Scroll-linked progress
0%
of this section scrolled. The bar at the very top of the page tracks the whole document with scroll(animate(…)).
Magnetic spring hover + press
hover() follows the pointer at 30 % with the magnetic spring; press() scales to 0.95 with snappy.
Counters
- Series
- 0
- Books
- 0
- Classes
- 0
- Solutions
- 0
600 ms, ease-out-soft, tabular figures; reduced motion renders the final value.
Marquee of covers
CSS animation, 40 s per loop; pauses on hover, focus and with the button. Reduced motion: static, horizontally scrollable.
Parallax card
Layers move at different speeds as you scroll
scroll(animate(layer, { y }), { target }); off under reduced motion.
Page-transition sketch
Home · hero
series
series
series
CTA band
Series · Tech Trek
cover
class · ISBN · price table
Request a specimen
A curtain in --gradient-cta wipes up with ease-emphasized, content swaps, the curtain releases and the new blocks stagger in. Reduced motion: instant swap.
07 · The kit the website is built from
Components
Every component uses the semantic tokens only, so it is already correct in all three directions. Interactive pieces are keyboard operable.
Buttons
Forms
Badges
- Class 1
- Class 2
- Class 3
- Class 4
- Class 5
- Class 6
- Class 7
- Class 8
- Class 9
- Class 10
- NEP 2020
- CBSE
- ICSE
- State boards
- Code 417
- Sent
- Pending
- Closed
- Notice
Chips (filters)
Chips are links or GET buttons first, enhanced in place; the active chip carries aria-pressed="true".
Tabs
Eight books for Classes 1–8 on Windows 11 and Office 2021, with a Teacher's Resource Manual for each class.
ISBN-13 and price per class in a tabular-figure table — see the ISBN table below.
ITM, ACT, TRM, Flip Books, Software Support and Online Links are included with the series.
Roving tabindex; ← → Home End move between tabs.
Accordion
Yes. Every series is graded to the latest NCERT guidelines and aligned with CBSE, ICSE and state boards; the Class 9–10 titles follow CBSE skill subject codes 402, 417 and 165.
Yes — a Teacher's Resource Manual per class, ITM modules, ACT tests, flip books and installation support for every software the books use.
Use Request a specimen, pick the series and classes, and our team ships copies to the school.
Tooltip
The 13-digit code printed above the barcode; use it when ordering.
Toast
Bottom-right role="status" region, auto-dismiss after 5 s, dismiss button ≥ 44 px.
Pagination
Breadcrumb
Cards
TRM
Teacher's Resource Manuals
Lesson plans, answer keys and worksheets for every chapter.
Solution card
Tech Updates
AI series updated for the 2026–27 session
New chapters on generative tools and cyber safety, mapped to CBSE Code 417.
"Our computer teachers finally have a book and a manual that agree with each other. Specimen copies arrived in four days."
Principal · a CBSE school in Haryana (placeholder — real testimonials to come from the client)
Artificial Intelligence series card
CBSE Code 417 · Classes 1–10 · 10 books · ₹260–765
Pricing / ISBN table
| Class | Title | ISBN-13 | ISBN-10 | Price | Actions |
|---|---|---|---|---|---|
| 1 | Learning Artificial Intelligence (Part 1) | 978-81-977773-9-4 | 81-977773-9-X | ₹260 | Details |
| 2 | Learning Artificial Intelligence (Part 2) | 978-81-977773-1-8 | 81-977773-1-4 | ₹290 | Details |
| 3 | Learning Artificial Intelligence (Part 3) | 978-81-977773-3-2 | 81-977773-3-0 | ₹340 | Details |
| 4 | Learning Artificial Intelligence (Part 4) | 978-81-977773-6-3 | 81-977773-6-5 | ₹360 | Details |
| 5 | Learning Artificial Intelligence (Part 5) | 978-81-977773-8-7 | 81-977773-8-1 | ₹390 | Details |
| 6 | Learning Artificial Intelligence (Part 6) | 978-81-977773-7-0 | 81-977773-7-3 | ₹430 | Details |
| 7 | Learning Artificial Intelligence (Part 7) | 978-81-977773-0-1 | 81-977773-0-6 | ₹440 | Details |
| 8 | Learning Artificial Intelligence (Part 8) | 978-81-977773-5-6 | 81-977773-5-7 | ₹490 | Details |
| 9 | Learning Artificial Intelligence (Part 9) | 978-81-977773-4-9 | 81-977773-4-9 | ₹725 | Details |
| 10 | Learning Artificial Intelligence (Part 10) | 978-81-977773-2-5 | 81-977773-2-2 | ₹765 | Details |
Stat tiles
- Years in computer education
- 0
- Book series
- 0
- Titles in print
- 0
- States served
- 0
CTA band
See the books before you decide.
Specimen copies of any series, shipped to your school.
The footer component is the footer of this page.
09 · All 18 series · 128 covers
Book showcase
Every cover from the catalogue, first as a two-row marquee and then as a grid you can filter by class range and platform. Hover a cover for series, classes and price range.
Cover marquee
Row one drifts left (lowest class of each series); row two drifts right (highest class).
Find the right series
18 series shown
No series match those filters
Try another platform, or clear the filters to see all 18 series.
10 · Real classrooms, one treatment
Imagery direction
Free photographs of Indian classrooms, students with laptops, teachers, coding and books. Pick a treatment — the whole set follows the active colour direction.
Text over image sits in the bottom 40 % in ink-inverse over --gradient-image.
Treatment rules
- Crop to 16:9 (hero, cards) or 4:5 (portrait cards); radius 24 px (
--radius-xl). - Duotone or gradient overlay uses the active direction's primary → accent; text over an image is always
ink-inverseover--gradient-imageand stays within the bottom 40 %. - Every image carries
width,height,altandloading="lazy"(the hero image is eager withfetchpriority="high"). - Only free-licence sources (Pexels, Unsplash); no Unsplash+ or sponsored results. Each asset is listed in
docs/brand/IMAGE-CREDITS.md. - Subjects: Indian classrooms, students with laptops and tablets, teachers at the board, coding and robotics, real textbooks. No stock handshakes, no cartoon mascots.
Where each photo goes
classroom-indian-students.jpgHero · Aboutstudents-laptop-group.jpgBooks · Homeclassroom-children-listening.jpgSolutions · ITMkids-interactive-board.jpgITM · Flip Booksteacher-classroom.jpgTRM · Workshopsteacher-whiteboard.jpgWorkshopskid-coding-desktop.jpgCoding · Classes 6–10child-tablet-coding.jpgKG · Classes 1–2kids-robotics.jpgAI · Tech Updateschildren-reading-classroom.jpgTextbooks · Specimenlibrary-students-india.jpgAbout · Careerstextbooks-stack.jpgBooks · Specimen CTA
11 · Sitemap, menu IA and the home page
Website concept
The public site is a marketing and catalogue site with exactly two forms. Everything a principal needs is within three clicks of Home.
Sitemap
- Home
/- Books
/books— 18 series, filtersclasses/platform, searchq- Series
/books/{series}- Book
/books/{series}/class-{n}
- Book
- Series
- Solutions
/solutions- ITM — Interactive Teaching Modules
/solutions/itm - ACT — Active Classroom Tests
/solutions/act - TRM — Teacher's Resource Manuals
/solutions/trm - Flip Books
/solutions/flip-books - Software Support
/solutions/software-support - Online Links
/solutions/online-links - Workshops
/solutions/workshops - Tech Updates
/solutions/tech-updates
- ITM — Interactive Teaching Modules
- About
/about— #story #pillars #leadership #authors #reach - Careers
/careers- Job opening
/careers/{slug} - Write for Educare
/careers/authors
- Job opening
- News
/news— ?category=company | events | tech-updates- Article
/news/{slug}
- Article
- Contact
/contact— ?topic= preselects the topic - Request a specimen
/specimen-request— ?series= preselects a series - Legal
/privacy-policy·/terms - Utility: sitemap.xml · robots.txt · error pages · /brand (noindex) · /admin
- Books
Mega-menu IA
Books · full-width panel, 5 columns
- Classes 1–8 · Windows 10 & 11 — Tech Trek, Explore It, Tech Essentials, IT Secret, Cyber World, IT Path, Tech Inside, Innotech Plus, Concept It
- Classes 1–8 · Windows 7 & open source — Cyber Hub, iTech, Tech 360, Tech Knowledge, Cyber Space
- Classes 9–10 · CBSE skill subjects — Artificial Intelligence, Information Technology, Information Technology, Computer Applications
- Rail — search, All 18 series, Classes 1–8, Classes 9–10, Get a specimen copy
Solutions · centred panel, 2 × 4 + rail
ITM · ACT · TRM · Flip Books · Software Support · Online Links · Workshops · Tech Updates — rail: Talk to our team, All solutions.
Careers · compact panel
Job openings · How to apply · Write for Educare — CTA: View openings.
Plain links
About · News · Contact · header CTA "Request a specimen".
Page templates
-
Home
/ -
Series listing
/books -
Series
/books/{series} -
Book
/books/{series}/{book} -
Solutions
/solutions -
Solution
/solutions/{slug} -
About
/about -
Careers
/careers -
Job opening
/careers/{slug} -
Authors
/careers/authors -
News
/news -
News article
/news/{slug} -
Contact
/contact -
Specimen request
/specimen-request -
Legal
/privacy-policy · /terms -
Error
404 · 419 · 429 · 500
Home page wireframe
Twelve bands in decision-maker order: the principal's job (find a series, request a specimen) is done in the first two screens; trust builds after.
375 px
logo[>] [=]
hero.eyebrow · H1 · sub[ Request a specimen ]cov · cov · cov
finder · chips · select
series
series
series
series
marquee ← →
pillars × 3
solution
solution
steps 1 → 2 → 3
stat
stat
testimonial [<] o o o [>]
news × 3
cta · specimen + contact
footer accordions
1280 px
logo · Books ▾ · Solutions ▾ · About · Careers ▾ · News · Contact[ Request a specimen ]
hero.eyebrow · H1 · subhead · CTAs · trust badgesfive floating covers
finder.heading · chips · platform select · clear
series
series
series
series
series
series
marquee row a ← · row b → · pause
pillar
pillar
pillar
solution
solution
solution
solution
solution
solution
solution
solution
steps (1) ——→ (2) ——→ (3) · [ Request a specimen ]
stat
stat
stat
stat
testimonials [<] card · card · card [>]
news
news
news
cta.heading · [ primary ] · secondary
footer: Books | Solutions | Company | Legal | contact
- 1 header
- 2 hero
- 3 finder
- 4 marquee
- 5 pillars
- 6 solutions
- 7 steps
- 8 stats
- 9 testimonials
- 10 news
- 11 cta
- 12 footer
12 · Tick, then copy
Decision panel
Five decisions. Each toggle updates the page instantly and is remembered in this browser; when you are happy, copy the summary and send it back to us.
Your choices
- Palette
- A — Prism
- Type
- 1 — Sora + Inter
- Motion
- Standard
- Icons
- Line icons
- Imagery
- Duotone (primary → accent)
Show the JSON summary
{ "palette": "A — Prism", "fontPairing": "1 — Sora + Inter", "motionIntensity": "Standard", "iconStyle": "Line icons", "imageryTreatment": "Duotone (primary → accent)" }
Attributes the site will carry on <html>: data-theme, data-font, data-motion, data-icons, data-imagery. Nothing is renamed after you decide — the tokens stay, only the values change.