One kit for the dashboard, the editor and the AI tools: the same panels, inputs, menus and spacing everywhere.
Each panel builds itself the way it was designed: an outline with its size, then the surface, then its rows, then one small interaction.
- Add panelElementsSectionsSearch for element
Structure
ColumnsBest for responsive layoutsHorizontal stackArrange items in a rowVertical stackArrange items in a columnBasic
ButtonSend people to your offerLink textA link inside your textTypography
HeadingTitles for main sectionsParagraphBlocks of rich text - Text styling
Text styling
AaRobotoAaMedium16pxMore typography settings
- Context menuCopy⌘ CPaste⌘ VDuplicate⌘ DSelect parent⌘ ↑
Open image in new tabAdd class
Delete⌫ - Spacing
Layout
Margin 0020100Padding 20202020 - Align items
Align items
OrientationDistributeCenterAlignGap20px - AI actionsWhat do you want to generate?Rewrite textMake it shorterMake it longerFix spelling and grammar
- Element properties
Div properties
Classes
Section 1 Hero Add class…Element ID
#ll-section1Custom attributes
aria-label="pricing" - Colour picker
Colour picker
#257CFF100%
LanderLab design system
- For
- LanderLab
- Year
- 2025
- Uses
- FigmaDesign systemComponents