![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g d="M 13.73 12.115 C 13.506 12.538 13.114 12.867 12.554 13.104 C 12.007 13.34 11.409 13.459 10.762 13.459 C 10.115 13.459 9.524 13.347 8.989 13.123 C 8.454 12.899 8.068 12.575 7.832 12.152 C 5.965 8.705 4.229 5.32 2.624 1.997 C 2.437 1.599 2.344 1.294 2.344 1.083 C 2.344 0.411 2.649 0.075 3.258 0.075 L 8.653 0.037 C 9.114 0.037 9.462 0.118 9.698 0.28 C 9.947 0.442 10.165 0.765 10.352 1.251 L 12.162 5.88 C 12.237 6.079 12.374 6.179 12.573 6.179 C 12.772 6.179 12.921 6.079 13.021 5.88 L 15.466 0.579 C 15.628 0.243 15.802 0.056 15.989 0.019 C 16.064 0.006 16.194 0 16.381 0 L 18.528 0.037 C 18.764 0.037 18.932 0.149 19.032 0.373 C 19.069 0.46 19.088 0.566 19.088 0.691 C 19.088 0.815 18.945 1.157 18.658 1.717 C 18.385 2.277 17.657 3.833 16.474 6.384 C 15.305 8.935 14.39 10.845 13.73 12.115 Z M 3.33 9.078 C 3.589 8.934 3.977 8.893 4.493 8.954 L 5.034 9.016 C 5.658 10.212 6.298 11.416 6.954 12.628 L 6.957 12.634 L 6.96 12.639 C 7.326 13.294 7.905 13.752 8.604 14.045 C 9.275 14.326 9.999 14.458 10.763 14.458 C 11.535 14.458 12.269 14.317 12.952 14.022 L 12.952 14.021 C 13.662 13.72 14.258 13.256 14.615 12.582 L 14.619 12.575 C 14.967 11.905 15.383 11.062 15.867 10.05 L 16.675 10.116 C 17.342 10.281 17.706 10.662 18.01 11.045 C 18.28 11.441 18.388 11.941 18.335 12.547 C 18.289 13.142 18.114 13.725 17.811 14.297 C 17.509 14.869 17.134 15.339 16.686 15.708 C 16.237 16.076 15.771 16.266 15.286 16.277 C 11.367 16.317 5.229 16.269 1.542 16.136 C 1.102 16.114 0.789 16.054 0.602 15.956 C 0.008 15.641 -0.146 15.215 0.139 14.676 L 2.627 9.889 C 2.842 9.482 3.076 9.212 3.33 9.078 Z" fill="transparent" height="16.29067823623097px" id="cAY_I5ldT" transform="translate(0.5 1.834)" width="19.0877px"><path d="M 11.387 12.115 C 11.163 12.538 10.771 12.867 10.211 13.104 C 9.663 13.34 9.066 13.459 8.419 13.459 C 7.772 13.459 7.18 13.347 6.645 13.123 C 6.11 12.899 5.724 12.575 5.488 12.152 C 3.621 8.705 1.885 5.32 0.28 1.997 C 0.093 1.599 0 1.294 0 1.083 C 0 0.411 0.305 0.075 0.915 0.075 L 6.309 0.037 C 6.77 0.037 7.118 0.118 7.355 0.28 C 7.604 0.442 7.821 0.765 8.008 1.251 L 9.819 5.88 C 9.893 6.079 10.03 6.179 10.229 6.179 C 10.428 6.179 10.578 6.079 10.677 5.88 L 13.123 0.579 C 13.284 0.243 13.459 0.056 13.645 0.019 C 13.72 0.006 13.851 0 14.037 0 L 16.184 0.037 C 16.42 0.037 16.588 0.149 16.688 0.373 C 16.725 0.46 16.744 0.566 16.744 0.691 C 16.744 0.815 16.601 1.157 16.315 1.717 C 16.041 2.277 15.313 3.833 14.131 6.384 C 12.961 8.935 12.046 10.845 11.387 12.115 Z" fill="rgb(0, 0, 0)" height="13.4587px" id="FL_ZbtWXJ" transform="translate(2.344 0)" width="16.74395px"/><path d="M 3.33 0.152 C 3.589 0.007 3.977 -0.034 4.493 0.028 L 5.034 0.089 C 5.658 1.286 6.298 2.49 6.954 3.701 L 6.957 3.707 L 6.96 3.713 C 7.326 4.367 7.905 4.825 8.604 5.118 C 9.275 5.399 9.999 5.531 10.763 5.531 C 11.535 5.531 12.269 5.39 12.952 5.095 L 12.952 5.095 C 13.662 4.793 14.258 4.329 14.615 3.655 L 14.619 3.649 C 14.967 2.978 15.383 2.135 15.867 1.123 L 16.675 1.19 C 17.342 1.354 17.706 1.735 18.01 2.118 C 18.28 2.514 18.388 3.015 18.335 3.62 C 18.289 4.215 18.114 4.798 17.811 5.37 C 17.509 5.942 17.134 6.413 16.686 6.781 C 16.237 7.15 15.771 7.339 15.286 7.351 C 11.367 7.39 5.229 7.343 1.542 7.209 C 1.102 7.188 0.789 7.128 0.602 7.029 C 0.008 6.715 -0.146 6.288 0.139 5.749 L 2.627 0.962 C 2.842 0.555 3.076 0.285 3.33 0.152 Z" fill="rgb(0, 0, 0)" height="7.36396143172658px" id="D40kHLO7D" transform="translate(0 8.927)" width="18.348237373622723px"/></g></svg>)
Petcare UI kit
Paws & Claws is a mobile pet-care companion that helps owners manage pet health, appointments, grooming, and daily routines in one place. Designed for ease of use with clean UI, reminders, and quick access to essential information.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><path d="M 25 50 C 11.193 50 0 38.807 0 25 L 0 25 C 0 11.193 11.193 0 25 0 L 25 0 C 38.807 0 50 11.193 50 25 L 50 25 C 50 38.807 38.807 50 25 50 Z" fill="rgb(241, 241, 241)" height="50px" id="pWuofbWrg" width="50px"/><g d="M 0 28 L 0 0 L 19 0 L 19 28 Z M 9.5 14.001 C 9.5 11.423 11.626 9.334 14.249 9.334 C 16.872 9.334 18.998 11.423 18.998 14.001 C 18.998 16.578 16.872 18.667 14.249 18.667 C 11.626 18.667 9.5 16.578 9.5 14.001 Z M 0 23.333 C 0 20.755 2.126 18.666 4.749 18.666 L 9.498 18.666 L 9.498 23.333 C 9.498 25.91 7.372 27.999 4.749 27.999 C 2.126 27.999 0 25.91 0 23.333 Z M 9.5 0 L 9.5 9.333 L 14.249 9.333 C 16.872 9.333 18.998 7.244 18.998 4.667 C 18.998 2.089 16.872 0 14.249 0 Z M 0.004 4.667 C 0.004 7.244 2.13 9.333 4.753 9.333 L 9.502 9.333 L 9.502 0 L 4.753 0 C 2.13 0 0.004 2.089 0.004 4.667 Z M 0 14.001 C 0 16.578 2.126 18.667 4.749 18.667 L 9.498 18.667 L 9.498 9.334 L 4.749 9.334 C 2.126 9.334 0 11.423 0 14.001 Z" fill="transparent" height="28px" id="cPW3eR5iN" transform="translate(15 11)" width="19px"><path d="M 0 28 L 0 0 L 19 0 L 19 28 Z" fill="transparent" height="28px" id="ZnIt0iNV_" width="19px"/><path d="M 0 4.667 C 0 2.089 2.126 0 4.749 0 C 7.372 0 9.498 2.089 9.498 4.667 C 9.498 7.244 7.372 9.333 4.749 9.333 C 2.126 9.333 0 7.244 0 4.667 Z" fill="rgb(26, 188, 254)" height="9.333300000000001px" id="mlpvpFuxO" transform="translate(9.5 9.334)" width="9.4981px"/><path d="M 0 4.667 C 0 2.089 2.126 0 4.749 0 L 9.498 0 L 9.498 4.667 C 9.498 7.244 7.372 9.333 4.749 9.333 C 2.126 9.333 0 7.244 0 4.667 Z" fill="rgb(10, 207, 131)" height="9.333299999999998px" id="HRNAUgiOE" transform="translate(0 18.666)" width="9.4981px"/><path d="M 0 0 L 0 9.333 L 4.749 9.333 C 7.372 9.333 9.498 7.244 9.498 4.667 C 9.498 2.089 7.372 0 4.749 0 Z" fill="rgb(255, 114, 98)" height="9.333300000000001px" id="doPNYICQm" transform="translate(9.5 0)" width="9.4981px"/><path d="M 0 4.667 C 0 7.244 2.126 9.333 4.749 9.333 L 9.498 9.333 L 9.498 0 L 4.749 0 C 2.126 0 0 2.089 0 4.667 Z" fill="rgb(242, 78, 30)" height="9.333300000000001px" id="eFSDT3TRJ" transform="translate(0.004 0)" width="9.498099999999999px"/><path d="M 0 4.667 C 0 7.244 2.126 9.333 4.749 9.333 L 9.498 9.333 L 9.498 0 L 4.749 0 C 2.126 0 0 2.089 0 4.667 Z" fill="rgb(162, 89, 255)" height="9.333300000000001px" id="F9HYNcIqc" transform="translate(0 9.334)" width="9.4981px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><path d="M 25 50 C 11.193 50 0 38.807 0 25 L 0 25 C 0 11.193 11.193 0 25 0 L 25 0 C 38.807 0 50 11.193 50 25 L 50 25 C 50 38.807 38.807 50 25 50 Z" fill="rgb(51, 0, 0)" height="50px" id="v325mfh1X" width="50px"/><path d="M 11.396 15.125 L 5.041 15.125 L 3.743 19.141 C 3.709 19.295 3.572 19.398 3.418 19.381 L 0.207 19.381 C 0.019 19.381 -0.033 19.278 0.019 19.073 L 5.52 3.23 C 5.571 3.059 5.622 2.871 5.69 2.666 C 5.759 2.307 5.793 1.931 5.793 1.555 C 5.776 1.47 5.844 1.384 5.93 1.367 L 10.354 1.367 C 10.491 1.367 10.559 1.419 10.576 1.504 L 16.812 19.107 C 16.863 19.295 16.812 19.381 16.641 19.381 L 13.07 19.381 C 12.951 19.398 12.831 19.312 12.797 19.193 Z M 6.032 11.656 L 10.371 11.656 C 10.269 11.297 10.132 10.87 9.978 10.425 C 9.825 9.964 9.671 9.468 9.517 8.955 C 9.346 8.426 9.192 7.913 9.022 7.383 C 8.851 6.853 8.697 6.358 8.56 5.862 C 8.424 5.383 8.304 4.939 8.185 4.529 L 8.15 4.529 C 7.997 5.264 7.809 5.999 7.57 6.734 C 7.313 7.554 7.057 8.408 6.784 9.263 C 6.545 10.135 6.288 10.938 6.032 11.656 Z M 20.536 4.29 C 19.972 4.307 19.425 4.085 19.015 3.692 C 18.622 3.264 18.417 2.7 18.435 2.119 C 18.417 1.538 18.64 0.991 19.05 0.598 C 19.46 0.205 20.006 0 20.57 0 C 21.236 0 21.749 0.205 22.125 0.598 C 22.5 1.008 22.705 1.555 22.688 2.119 C 22.705 2.7 22.5 3.264 22.09 3.692 C 21.697 4.102 21.117 4.324 20.536 4.29 Z M 18.622 19.124 L 18.622 5.965 C 18.622 5.794 18.691 5.725 18.845 5.725 L 22.227 5.725 C 22.381 5.725 22.449 5.811 22.449 5.965 L 22.449 19.124 C 22.449 19.312 22.381 19.398 22.227 19.398 L 18.879 19.398 C 18.708 19.398 18.622 19.295 18.622 19.124 Z" fill="rgb(255, 154, 0)" height="19.397699835205078px" id="FIXxDANLk" transform="translate(12.473 13.875)" width="22.689316604719263px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><path d="M 25 50 C 11.193 50 0 38.807 0 25 L 0 25 C 0 11.193 11.193 0 25 0 L 25 0 C 38.807 0 50 11.193 50 25 L 50 25 C 50 38.807 38.807 50 25 50 Z" fill="rgb(0, 30, 54)" height="50px" id="NzxgwfJoH" width="50px"/><path d="M 0 17.877 L 0 0.291 C 0 0.171 0.051 0.103 0.171 0.103 C 0.461 0.103 0.735 0.103 1.128 0.085 C 1.537 0.068 1.965 0.068 2.426 0.051 C 2.887 0.034 3.383 0.034 3.912 0.017 C 4.442 0 4.954 0 5.467 0 C 6.868 0 8.029 0.171 8.986 0.53 C 9.84 0.82 10.626 1.299 11.275 1.931 C 11.822 2.478 12.249 3.145 12.522 3.88 C 12.778 4.597 12.915 5.332 12.915 6.101 C 12.915 7.571 12.573 8.785 11.89 9.742 C 11.207 10.699 10.25 11.416 9.139 11.827 C 7.978 12.254 6.697 12.408 5.296 12.408 C 4.886 12.408 4.612 12.408 4.442 12.391 C 4.271 12.374 4.032 12.374 3.707 12.374 L 3.707 17.86 C 3.724 17.979 3.639 18.082 3.519 18.099 L 0.205 18.099 C 0.068 18.099 0 18.031 0 17.877 Z M 3.724 3.401 L 3.724 9.144 C 3.963 9.161 4.185 9.178 4.39 9.178 L 5.296 9.178 C 5.962 9.178 6.628 9.075 7.26 8.87 C 7.807 8.716 8.285 8.392 8.661 7.964 C 9.02 7.537 9.191 6.956 9.191 6.204 C 9.208 5.674 9.071 5.144 8.798 4.683 C 8.508 4.239 8.098 3.897 7.602 3.709 C 6.97 3.452 6.287 3.35 5.586 3.367 C 5.142 3.367 4.749 3.367 4.425 3.384 C 4.083 3.367 3.844 3.384 3.724 3.401 Z M 23.575 8.101 C 23.062 7.828 22.516 7.64 21.935 7.52 C 21.303 7.383 20.671 7.298 20.022 7.298 C 19.68 7.281 19.321 7.332 18.997 7.417 C 18.774 7.469 18.587 7.588 18.467 7.759 C 18.382 7.896 18.33 8.067 18.33 8.221 C 18.33 8.374 18.399 8.528 18.501 8.665 C 18.655 8.853 18.86 9.007 19.082 9.126 C 19.475 9.331 19.885 9.519 20.295 9.69 C 21.217 9.998 22.106 10.425 22.926 10.938 C 23.489 11.297 23.951 11.775 24.275 12.357 C 24.549 12.903 24.685 13.502 24.668 14.117 C 24.685 14.92 24.446 15.723 24.002 16.39 C 23.524 17.073 22.857 17.603 22.089 17.911 C 21.252 18.27 20.227 18.458 18.997 18.458 C 18.211 18.458 17.442 18.389 16.673 18.236 C 16.075 18.133 15.477 17.945 14.931 17.689 C 14.811 17.62 14.726 17.501 14.743 17.364 L 14.743 14.39 C 14.743 14.339 14.76 14.271 14.811 14.236 C 14.862 14.202 14.914 14.219 14.965 14.254 C 15.631 14.647 16.332 14.92 17.083 15.091 C 17.732 15.262 18.416 15.347 19.099 15.347 C 19.748 15.347 20.209 15.262 20.517 15.108 C 20.79 14.988 20.978 14.698 20.978 14.39 C 20.978 14.151 20.842 13.929 20.568 13.707 C 20.295 13.484 19.731 13.228 18.894 12.903 C 18.023 12.596 17.22 12.186 16.468 11.673 C 15.939 11.297 15.494 10.801 15.17 10.22 C 14.897 9.673 14.76 9.075 14.777 8.477 C 14.777 7.742 14.982 7.041 15.358 6.409 C 15.785 5.725 16.417 5.179 17.152 4.837 C 17.954 4.427 18.962 4.239 20.175 4.239 C 20.876 4.239 21.593 4.29 22.294 4.392 C 22.806 4.461 23.302 4.597 23.763 4.785 C 23.831 4.803 23.899 4.871 23.934 4.939 C 23.951 5.008 23.968 5.076 23.968 5.144 L 23.968 7.93 C 23.968 7.998 23.934 8.067 23.882 8.101 C 23.729 8.135 23.643 8.135 23.575 8.101 Z" fill="rgb(49, 168, 255)" height="18.457800118255616px" id="dtDIZ_FXV" transform="translate(13.227 15.174)" width="24.66972871436651px"/></svg>)
50+ Screens
Auto layout
Design system
Light & Dark mode
Included in the UI kit
Included in the UI kit
Included in the UI kit
Pixel perfect
Every component is crafted with precise alignment and consistent spacing for a flawless visual experience.
Organized layers
All layers are neatly structured and labeled for easy navigation and faster editing.
Component based
Built with reusable components to ensure consistency and speed throughout the design system.
Free google font
The UI kit uses the free and widely supported Poppins font for clean and modern typography.
Global style guide
Includes a complete global style guide with colors, typography, spacing, and UI principles.
Easy customizable
Designed for quick customization, making it simple to adapt the UI kit to any brand or project.
Global Style Guide
Global Style Guide
Global Style Guide
A unified system that defines consistent colors, typography, spacing, and components across the entire UI for seamless, scalable design.
Typography
Using Poppins as the primary typeface for a clean, modern, and highly readable visual style.
Colors
A vibrant combination of F06449 (Coral Red) and F4D35E (Warm Yellow) to create an energetic, friendly, and visually striking design theme.
Primary
Primary
#F06449
#F06449
RGB: 240,100,73
RGB: 240,100,73
Secondary
Secondary
#F4D35E
#F4D35E
RGB: 244,211,94
RGB: 244,211,94
White
White
#FFFFFF
#FFFFFF
RGB: 255,255,255
RGB: 255,255,255
Black
Black
#150502
#150502
RGB: 21,5,2
RGB: 21,5,2
Warning Colors
Primary
#F06449
RGB: 240,100,73
Red
Red
#E95455
#E95455
RGB: 233,84,85
RGB: 233,84,85
Yellow
Yellow
#FFBD00
#FFBD00
RGB: 255,189,0
RGB: 255,189,0
Green
Green
#6EEB83
#6EEB83
RGB: 110,235,131
RGB: 110,235,131
Hyperlink
Primary
#F06449
RGB: 240,100,73
Primary
#F06449
RGB: 240,100,73
Primary
#F06449
RGB: 240,100,73
Blue
Blue
#1778F2
#1778F2
RGB: 23,120,242
RGB: 23,120,242
Customized components
Customized components
Customized components
Hand-crafted UI components tailored for the Paws & Claws pet care experience, ensuring
consistency, clarity, and reusability across all screens.
Hand-crafted UI components tailored for the Paws & Claws pet care experience, ensuring consistency, clarity, and reusability across all screens.
UI screens
All screens from the Paws & Claws pet care app presented in a unified UI kit. Includes core flows, visual styles, reusable components, and consistent interactions designed for a seamless pet-care experience.
Light mode
Dark mode
Sorry !
My portfolio supports a limited screen sizes. Please use a laptop/desktop for good experience.
Next project
Trillex is a modern crypto wallet app that lets users manage multiple cryptocurrencies, track real-time prices, and perform instant transactions. Designed with a clean interface focused on safety, clarity, and smooth user experience.
View project
© All rights reserved to vijaykumar.