Button
Six variants (primary, secondary, accent, neutral, ghost, outline), three sizes, default and pill shapes.
Tokens
--primary--secondary--accent--radius-md--radius-full--font-primaryVariants
Sizes
Shape
State
A four-bucket palette layered over a semantic system, built for an education portal.
Demme Learning
A four-bucket palette layered over a semantic system, built for an education portal.
The design system Workhorse delivered to Demme Learning between November 2023 and August 2024. A complete brand foundation, four-persona research base, and the dashboard pattern for the Digital Toolbox product. The live build paused before launch. The system itself is the deliverable.
Color
Named brand buckets layered over a semantic system. Product UI leans on the semantic layer. Marketing leans on the buckets directly.
Typography
The type families this brand uses, the scale it ships with, and the weights it relies on.
Spacing
The brand's spacing scale and container widths. Mono-keyed for scan, not for memorization.
Radius
Corner-radius tokens. Small UI sharp. Large surfaces soft. Pills and avatars full.
Motion
Durations and easings. Conservative product-UI motion. Quick hovers, gentle transitions, no theatrics.
Component library
A token-driven component set. Every component reads from the brand scope above. Swap the brand and the same components reskin without code changes.
Six variants (primary, secondary, accent, neutral, ghost, outline), three sizes, default and pill shapes.
--primary--secondary--accent--radius-md--radius-full--font-primaryText input, textarea, and label. Standard size scale with hover and focus states tied to the primary token.
--primary--base-300--background--foreground--radius-mdDefault, soft, and outlined surfaces. Composable header, body, and footer regions.
--background--base-100--base-200--base-300--radius-lgStatus indicators and chips. Pulls from brand and status tokens for semantic meaning.
--primary--accent--success--warning--danger--radius-fullImage or initials, four sizes, optional brand tone for placeholder fills.
--primary--secondary--accent--neutral--radius-fullUnderline and pill variants. Active tab uses the primary token; inactive tabs sit at 60 percent foreground.
--primary--foreground--base-100--base-300Composed patterns
Pattern assemblies that show how the components combine into surfaces. Built from the same tokens as the Foundations and Components above. The mobile top bar was the longest-running visual conversation in the engagement — six iterations to land the working frame.
The bar is constant across all six. The iterations are nav STATES — resting, open, and four section-expanded views. State 3 (Subjects) is the working frame: extending Math-U-See trust into the rest of the publishing portfolio.
Demmo wordmarkDemme markSearchLogin pillQuick pillsNav rowsToolbox cardThe white rounded shelf carrying the Demmo wordmark, Subjects / Community / Support dropdowns, the outlined Shop pill, and the dark Digital Toolbox pill. Open · Subjects expands to a four-product tab strip with Math-U-See raised as the active tab.
Demmo wordmarkDemme markNav linksShop pillToolbox pillProduct crestsRole-aware switcher backing the four account types. Avatar tone tracks the lens the user is looking through. SSO and non-SSO supported on the same surface.
AvatarListPillBrand tonesThe Digital Toolbox shell. Side rail with role-aware nav, top bar with breadcrumb + search + account switcher, and a primary content frame. The Lesson 5 screen sits inside this exact chrome.
WordmarkNav railBreadcrumbSearchAccount switcherThe dark close to every page. Family of Products row, Customer Service pills (Email / Call / Chat), location + hours, four-column site nav, and the warm-toned Engage / Educate / Empower sign-up panel.
Product crestsPill buttonsNav columnsBree Serif headlineSign-up panelReal screens
Composed pages built from the foundations, components, and patterns above. Live, not stills. Two of the screens that mattered most in the engagement: the megasite home and the Lesson 5 dashboard.
The marketing surface. White hero card overlaid on a forest scene, four-product shelf, the dark Digital Toolbox band, and the Engage / Educate / Empower close.
Our award-winning, comprehensive learning tools support educators, parents, and students in schools and homeschools.
Free access to the first three lessons of each level of the Math-U-See Curriculum, virtual manipulatives, and more!
Instant access to lessons, digital manipulatives, instructional videos, and more.
Children thrive when learning alongside engaged parents, teachers, and family members — whether leading or supporting their education. Together, we foster lifelong learners.
Innovative learning solutions for homeschoolers, parents, and small groups since 1990.
Learn About UsThe centerpiece. A LearnDash-shaped lesson surface — Bree Serif headline, the manipulative workspace that walks 43 minus 27 across orange ten-bars and green unit blocks, the orange-bordered Instructor Help card with its peach Lesson Solutions subcard, the Objectives / Why two-up, the problem set with status, the Warm Up + See It Solved band, the Beta progress strip, and the Instructor Note.