Swarm Design System Documentation

Colors

Click a color swatch to copy the css variable.

alert--smallalertannounce--smallannouncearchive--smallarchivearrow-left--smallarrow-leftarrow-right--smallarrow-rightaudio--smallaudiobadge--smallbadgeblock--smallblockbolt--smallboltcalendar--smallcalendar-check--smallcalendar-checkcalendar-cross--smallcalendar-crosscalendar-plus--smallcalendar-pluscalendarcamera--smallcameracheck--smallcheck-circle--smallcheck-circlecheckchevron-down--smallchevron-downchevron-left--smallchevron-leftchevron-right--smallchevron-rightchevron-up--smallchevron-upclock--smallclock-arrow--smallclock-arrowclockcog--smallcogconversation--smallconversationcopy--smallcopycreditcard--smallcreditcardcross--smallcross-circle--smallcross-circlecross-circled--smallcross-circledcrossdownload--smalldownloaddrinks--smalldrinksedit--smalleditexport--smallexportexternal-facebookexternal-facebookboxedexternal-flickrexternal-gmailexternal-instagramexternal-linkedinexternal-mediumexternal-messenger-outlined--smallexternal-messenger-outlinedexternal-outlookexternal-tumblrexternal-twitter-outlined--smallexternal-twitter-outlinedexternal-twitterexternal-yahooexternal-youtubefilter--smallfilterfolder--smallfolderglobe--smallglobegrid--smallgridgroups--smallgroupsheart--smallheart-outline--smallheart-outlinehearthide--smallhidehome--smallhomeinfo--smallinfoinvite--smallinvite-filled--smallinvite-filledinvitelaunch-new-window--smalllaunch-new-windowlink--smalllinklist--smalllistlocation-pin--smalllocation-pin-filled--smalllocation-pin-filledlocation-pin-slashed--smalllocation-pin-slashedlocation-pinlocation-services--smalllocation-serviceslock--smalllockmail--smallmailmeetup-m--smallmeetup-mmessages--smallmessagesmicrophone--smallmicrophoneminus--smallminusnotifications--smallnotifications-badged--smallnotifications-badgednotifications-mute--smallnotifications-mutenotificationsoverflow--smalloverflow-vertical--smalloverflow-verticaloverflowphoto-album--smallphoto-album-add--smallphoto-album-addphoto-albumplay--smallplayplus--smallplus-circle--smallplus-circleplusprofile--smallprofileprofiles--smallprofilesprojector--smallprojectorpulse--smallpulserefresh--smallrefreshreply--smallreplysearch--smallsearchsend--smallsendsent-messages--smallsent-messagesshow--smallshowsort-direction--smallsort-directionstar--smallstar-rounded--smallstar-roundedstartextblock--smalltextblockticket--smalltickettrash--smalltrashtune--smalltunetv--smalltvupdates--smallupdateswifi--smallwifi