CareKit creative property

Design Guide

Imported from the CareKit design export and rebuilt with native Angular Material components, theme tokens, and responsive SCSS.

App logoView componentsImported design
Color SystemCareKit palette mapped into Material 3

#BFCFBF to #6FAFB0 ยท primary gradient

#6FAFB0Primary
#3E7C7CPrimary Dark
#DFF3F0Secondary
#FFFFFFBackground
#F5F7F6Surface
TypographyPoppins for brand, Inter for interface text
Aa
Poppins / InterClean. Friendly. Modern.
H1Heading 132px / Bold
H2Heading 224px / SemiBold
H3Heading 318px / Medium
Body 1Body Large16px / Regular
Body 2Body Regular14px / Regular
CaptionCaption12px / Regular
Material ComponentsNative Angular Material controls styled by the CareKit theme
+Card Title

This card pattern is used for helpful summaries, actions, and care context.

Learn more
SuccessYour appointment has been scheduled successfully.
AccountHealth InfoPreferencesReview
Material MappingHow the design guide is implemented in Angular
MatToolbar for top navigation and product chrome
MatCard for content groups, previews, metrics, and design panels
MatButton variants for primary, secondary, and tertiary actions
MatFormField with outline inputs for data entry
MatChipSet for tags, statuses, and compact metadata
MatProgressBar for care plan and workflow progress
Theme ModesLight is default; dark is available through the app shell

Imported source

Design Export Frames

Logo Usage
Logo Usage design frame
Color System
Color System design frame
UI Components
UI Components design frame
Typography
Typography design frame