Roadmap

The target is documentation complete enough to generate any new surface without inventing a rule. This page lists every section the system does not yet have, and where each one lands when it ships.

The brand and writing gaps come from a cross-check against Duolingo's public brand guidelines (design.duolingo.com); the product gaps come from an audit of what generating new UI requires. A gap is closed by writing the section, not by linking out.

Brand and identity

Section	Lands in	Must define
Avatars	Character / Lio	The mark cropped for social profile frames. In a square frame (with or without rounded corners) the face fills to the left and right edges; as the frame approaches a circle, space opens between the face and the edge on both sides. Ships as downloadable square and circle assets.
Wordmark	New page under Identity	A logotype for Folio with its own clear space, minimum size, positioning, and misuse rules. The name is currently set as plain header text with no rules.
Lockups	Wordmark page	Landscape and portrait combinations of the mark and the wordmark, each with its own clear space and minimum size.
Substitute fonts	Identity / Typography	The fallback faces for decks, documents, and partner contexts where Fraunces and Geist are unavailable.
Tints	Identity / Color	Whether the four colors may be tinted, and the sanctioned steps if so. The system currently answers only for full-strength values.
Photography	New page under Identity	Rules for real photographs: subjects, treatment, and where photography may appear. The system currently bans stock photography and stops there.
Sub-brands	New page under Identity	How future products and a paid tier are named and locked up, defined before the first one exists.
Scene composition	Product / Illustration	Rules for multi-object scenes: object spacing, how color is assigned across a scene, and the ceiling on color count per composition.
On backgrounds	Character / Lio	Which backgrounds the mark and the cast may sit on in marketing, as an approved list of pairings.
Sticker pack	Resources / Assets	A downloadable Lio emoji and sticker set for chat tools, rendered from live geometry like every other asset.

Writing

Section	Lands in	Must define
Lio's voice	Writing / Voice	How Lio speaks when the product speaks as him: person, vocabulary, and the moments he stays silent. The brand voice exists; the character's does not.
Sample messaging	Writing / Voice	Approved boilerplate: the one-line description, the elevator paragraph, and key messages per audience.
Tone by reader state	Writing / Voice	How tone shifts with the reader's situation: receiving critical feedback, hitting an error, celebrating progress. The three registers cover the surface, not the reader.
Glossary	Writing / Style	Canonical definitions of product terms. The vocabulary table covers word preference; nothing defines what each feature is officially called.
Mechanics depth	Writing / Style	Emoji usage, per-mark punctuation rules, and formats for money, time, percentages, and URLs.
Typesetting the name	Writing / Style	How Folio is written in running text: capitalization, typeface, and the contexts where the wordmark replaces the word.

Product foundations

Section	Lands in	Must define
Spacing scale	Product / Tokens	Named spacing steps and the rule for choosing between them. Color roles now carry values; spacing does not.
Breakpoints	Product / Layout	The breakpoint set and what changes at each one: navigation, columns, and type scale.
Grid	Product / Layout	Column behavior inside the container: how many columns exist and when they collapse.
Iconography	New page under Product	One icon set on one grid: sizes, stroke weight, and the rules for pairing icons with text.
Elevation ladder	Product / Surfaces	A single z-order for the floating bar, overlays, toasts, and tours.
Motion tokens	Product / UI motion	Named durations and easings. The choreography is documented; the values live only in code.
Interactive states	Product / Primitives	The full state matrix per control: hover, active, focus, disabled, busy.
Accessibility	New page under Product	Keyboard order, focus trapping in overlays, minimum hit areas, and the contrast floor, stated once for every component instead of per page.
Localization	Product / Layout	Text expansion allowances and the RTL stance.

Components and patterns

Section	Lands in	Must define
Overlays	Product / Primitives	Dialog, Popover, Tooltip, and Menu, sharing one dismissal model and one motion.
Select	Product / Primitives	Single-select dropdown and combobox.
Tabs	Product / Primitives	In-page section switching, distinct from navigation.
Switch	Product / Primitives	On/off toggle, with the rule for choosing it over Checkbox.
Table	Product / Primitives	Data table: header treatment, row states, sorting, and overflow behavior.
Skeleton	Product / Primitives	Loading placeholder, with the rule for choosing it over Spinner.
Pagination	Product / Primitives	Paging through long lists, and when infinite scroll is used instead.
User avatar	Product / Primitives	The user's image with an initials fallback. Distinct from the Lio avatar crops.
Empty states	Product / Patterns	What a screen shows before it has data: the illustration slot, the copy pattern, and the primary action.
Forms	Product / Patterns	Validation timing, error placement, required versus optional marking, and submit-button states.
Destructive actions	Product / Patterns	What requires confirmation, and the wording of the confirmation.
Error pages	Product / Patterns	404, 500, and offline, composed from the illustration system and the tone rules.
Search	Product / Patterns	The input, the results list, and the no-results state.
Data visualization	New page under Product	Axis, label, and legend rules. The categorical chart slots now live in Product / Tokens; the rest of the chart anatomy does not.