Start · Creator Design System

All pages

Every page in the Creator Design System, in one list.

Every page in the system — 141 of them, in the order the sidebar uses. This page is generated from the same navigation tree, so it can never fall out of date. Handy for scanning what exists, and for handing someone a single link.

Components explorer Introduction Landing page

Start 6

IntroductionintroductionWhy this systemwhyPrinciplesprinciplesUsage — CSS · SCSS · TailwindusageComponents explorercomponentsAll pagesall

Getting started 2

InstallationinstallSetup & themingsetup

Foundation 8

Logof-logoColorf-colorTypographyf-typeSpacing & radiusf-spaceElevationf-elevationPatternsf-patternBreakpointsbreakpointsAccessibilityf-a11y

Elements 8

RebootrebootType rolestypographyText elementstext-elementsImages & figuresimagesTablestablesQuotesquotesCode & syntaxcodeLong-form contentcontent

Icons 2

Guidelinesf-iconsIcon seticon-set

Shape & Cutout 2

Shapesf-shapeCutoutscutouts

Grid & Layout 6

ContainerscontainersGridgridColumns & gutterscolumnsCompositionf-layoutZ-indexz-indexPatternslayout-patterns

Forms 8

OverviewformsForm controlform-controlSelectselectChecks & radioschecks-radiosRangerangeInput groupinput-groupFloating labelsfloating-labelsLayoutform-layout

Components 28

Sections 5

Page headerpage-headerHeroheroStatsstatsCTActaFooterfooter

Collections 16

The contractcollectionsSectionscol-sectionsTimelinetimelineDefaultcol-defaultTraveltravel/indexTravel · itinerarytravel/itineraryBlogblog/indexCoursecourse/indexCourse · curriculumcourse/curriculumProjectsprojects/indexProjects · build logprojects/build-logWebserieswebseries/indexPromptsprompts/indexSnippetssnippets/indexProductsproducts/indexDocs templatedocs/index

Pages 9

Pagespages/indexHomepagepages/homeAboutpages/aboutContactpages/contactArchivepages/archiveNowpages/nowRésuméresume/indexTerms & privacypages/legalWelcome, subscriberpages/welcome

Animation & Motion 7

Motion basicsm-basicsText effectsm-text-effectsAnnotationsm-annotationsMicro-interactionsm-microSection presetsm-presetsLogo stingm-stingsPage transitionspage-transitions

Broadcast · YouTube 13

Thumbnailsyt-thumbsThumb layoutsyt-layoutsCategoriesyt-categoriesSeries artyt-seriesLive scenesyt-livescenesScreensyt-screensScenesyt-scenesLiveyt-liveEnd screensyt-endSubscribeyt-subsEngagementyt-engageBrandingyt-brandBackdropsyt-backdrops

Postsig-postsCarouselig-carouselStoriesig-storyGridig-gridFollowig-followShareig-share

Helpers & Utilities 15

Backgroundu-backgroundBordersu-bordersColorsu-colorsDisplayu-displayFlexu-flexFloatu-floatInteractionsu-interactionsOverflowu-overflowPositionu-positionShadowsu-shadowsSizingu-sizingSpacingu-spacingTextu-textVertical alignu-valignVisibilityu-visibility

Shortcut	Where
`Landing`	`index.html` — the marketing page
`Docs home`	`introduction.html`
`Search`	press `/` on any page
`Preview ⇄ Code`	the toggle on every demo prints its own markup
`Source`	`/src` · icons in `/icons` · bundles in `/dist`