The heart of the work
Every screen starts from one system.
The Artelier UI Kit is where my design work starts: 121 components, each showing how it looks, how it behaves and which values it uses. I wrote them in Vue for the web and in Rust for native apps, and this site is built on them too.
- 121
- components
- 12
- groups
- 5
- pigments
- TyrianPrimary
- VerdigrisSecondary
- CeladonSuccess
- OrpimentWarning
- VermilionDanger
Sorted by job
Components are grouped by what they do on the screen, not by name. You find one by what you need it for.
Values on every part
Each component lists the values it uses, in Vue and in Rust alike. Change a value once and every screen follows.
Grey, so colour means something
Everything around the content stays grey. Five colours are kept for the logo and for status.
Artelier UI Kit
121 components, in Vue and Rust.
The parts every screen of mine is built from, written twice: in Vue for the web and in Rust for native apps. When I build with a model, an MCP server hands it these parts and their rules, so it uses nothing else. They are shown with their code to show how I work; they are not a library to download.
- Surfaces3
CardFrame TabWell
- Actions6
ButtonIcon ButtonLinkMenuSegmentedTheme Toggle
- Inputs6
ChoiceDaterangeFieldNumberRangeTag
- Data display14
BadgeBarsChart ChoiceCount UpData GridDeltaDescription listGaugeHeatmapMeterProgressSparklineStatStatus
- Disclosure5
AccordionDrawerPopoverStepsTree
- Navigation3
CrumbsPagerTabs
- Feedback7
BannerEmptyLoadingModalSkeletonToast HostTooltip
- Patterns6
Dash EmptyFilter BarGantt ChartKPI RowSummary DetailTable Screen
- Elements38
Alert DialogAspect RatioAttachmentAvatarBubbleCalendarCarouselCode BlockCollapsibleComboboxContext MenuDate PickerDirectionHover CardIconInput GroupInput OTPItemKbdLabelLine ChartMarkerMenubarMessageMessage ScrollerNative SelectNav MenuQuestionnaireResizableScroll AreaSelectSeparatorSheetSpinnerToggleToggle GroupTraceTypography
- Page sections17
Contact FormContent SectionCTA BandFAQ SectionFeature GridHero SectionImage SectionLogo MarqueeMarqueePricing SectionScreen TourSite FooterSite NavStatement SectionStory SectionWork ListWork Section
- Docs5
App WindowCalloutDoc NavDoc ShellScreenshot
- Site chrome11
Blog MetaBrand MarkCommand PaletteDash ShellLocal TimeMobile NavPalette PanelProject LogoReveal HeadingTheme LabWordmark