AI Matrx Logo

Design System

Pebblecraft Studio · Design systems · Portland, OR

Yara Delacroix maintains the tokens and components that every Pebblecraft app uses.

Any businessContentBoards4 tables · 6 views · 1 form · 1 agent
Use this template

By type

Tokens
Colour5
color-brand-500CoreBoth
color-brand-700CoreBoth
color-surfaceSemanticWeb
color-actionSemanticMobile
color-dangerSemanticMobile
Type2
font-bodyCoreWeb
font-heading-largeSemanticBoth
Spacing3
space-2CoreMobile
space-4SemanticWeb
space-gutterComponentMobile
Radius1
radius-cardComponentBoth
Shadow1
shadow-raisedComponentWeb

Tables

Tokens

12 sample rows · 7 columns

The named values that every component is built from.

TokenLayerPlatformTypeValueAlias ofStatus
color-brand-500CoreBothColour#3B6FD4—Stable
color-brand-700CoreBothColour#274C9A—Draft
color-surfaceSemanticWebColour#FFFFFF—Stable
color-actionSemanticMobileColourBrand 500color-brand-500Stable
font-bodyCoreWebTypeInter, 16px / 24px—Stable
font-heading-largeSemanticBothTypeInter, 28px / 34px, 600—Stable
space-2CoreMobileSpacing8px—Stable
space-4SemanticWebSpacing16px—Stable
radius-cardComponentBothRadius10px—Draft
shadow-raisedComponentWebShadow0 2px 8px rgba(20,30,60,0.12)—Draft
color-dangerSemanticMobileColour#C8402F—Stable
space-gutterComponentMobileSpacingSpace 4space-4Deprecated

Components

8 sample rows · 9 columns

Each component, its status, owner, links and the tokens it uses.

ComponentCategoryStatusOwnerDesign linkCode linkTokens
ButtonActionsStableBenedikt Sorensenhttps://design.pebblecraft-demo.net/buttonhttps://code.pebblecraft-demo.net/buttoncolor-brand-500, color-action, radius-card
Text fieldFormsStableLola Fasholahttps://design.pebblecraft-demo.net/text-fieldhttps://code.pebblecraft-demo.net/text-fieldcolor-surface, font-body, space-2
Select menuFormsBetaLola Fasholahttps://design.pebblecraft-demo.net/select-menuhttps://code.pebblecraft-demo.net/select-menucolor-surface, space-4, radius-card
CardLayoutStableBenedikt Sorensenhttps://design.pebblecraft-demo.net/cardhttps://code.pebblecraft-demo.net/cardcolor-surface, radius-card, shadow-raised
Modal dialogOverlaysBetaQuinn Aberdeenhttps://design.pebblecraft-demo.net/modal-dialoghttps://code.pebblecraft-demo.net/modal-dialogcolor-surface, shadow-raised, space-4
Toast noticeFeedbackDraftYara Delacroixhttps://design.pebblecraft-demo.net/toast-noticehttps://code.pebblecraft-demo.net/toast-noticecolor-danger, shadow-raised
Data tableDataStableBenedikt Sorensenhttps://design.pebblecraft-demo.net/data-tablehttps://code.pebblecraft-demo.net/data-tablefont-body, space-2, color-surface
TooltipOverlaysDeprecatedQuinn Aberdeenhttps://design.pebblecraft-demo.net/tooltiphttps://code.pebblecraft-demo.net/tooltipfont-body

Guidelines

5 sample rows · 3 columns

Usage rules attached to the components they apply to.

GuidelineAreaRelated components
Use one primary button per viewActionsButton
Label every field and never rely on placeholdersFormsText field, Select menu
Error messages say what to do nextFormsText field
Dialogs trap focus and return it on closeAccessibilityModal dialog
Keep tables to seven columns before offering a column pickerDataData table

Related templates