INDEPENDENT PRODUCT DESIGN \u00b7 2026<\/p>\n[\/vc_column_text][vc_column_text]\n
Designing an accessible workspace for creating, testing and managing design systems. A connected workspace for creating, testing and managing accessible design systems \u2014 from initial visual direction to developer-ready handoff.<\/p>\n[\/vc_column_text][nectar_btn size=”large” button_style=”regular” button_color_2=”Extra-Color-2″ solid_text_color_override=”#0a0a0a” icon_family=”none” text=”View Live Product” margin_right=”10″ margin_bottom=”50″ url=”https:\/\/rulebook.chanchalpt.com\/”][nectar_btn size=”large” button_style=”see-through-3″ color_override=”#ffffff” hover_color_override=”#ffffff” hover_text_color_override=”#ffffff” icon_family=”none” el_class=”See-through-button-lightBG” text=”Explore the Case Study”][divider line_type=”Full Width Line” line_thickness=”1″ divider_color=”default”][vc_row_inner equal_height=”yes” content_placement=”middle” column_margin=”none” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” top_padding=”2%” constrain_group_1=”yes” bottom_padding=”2%” translate_y=”25%” text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all” el_id=”projectInfo”][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”center” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/4″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”advanced” border_right_desktop=”1″ column_border_color=”#09152b” column_border_style=”solid” column_padding_type=”default” gradient_type=”default”][vc_column_text]\n
ROLE<\/strong><\/p>\n Product Design, UX\/UI, Front-End<\/p>\n[\/vc_column_text][\/vc_column_inner][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”center” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/4″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”advanced” border_left_desktop=”1″ border_right_desktop=”1″ column_border_color=”#09152b” column_border_style=”solid” column_padding_type=”default” gradient_type=”default”][vc_column_text]\n PLATFORM<\/strong><\/p>\n Responsive Web App<\/p>\n[\/vc_column_text][\/vc_column_inner][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”center” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/4″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”advanced” border_left_desktop=”1″ border_right_desktop=”1″ column_border_color=”#09152b” column_border_style=”solid” column_padding_type=”default” gradient_type=”default”][vc_column_text]\n YEAR<\/strong><\/p>\n 2026<\/p>\n[\/vc_column_text][\/vc_column_inner][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”center” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/4″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”advanced” border_left_desktop=”1″ column_border_color=”#09152b” column_border_style=”solid” column_padding_type=”default” gradient_type=”default”][vc_column_text]\n TECH<\/strong><\/p>\n React, TypeScript, CSS, Node.js<\/p>\n[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row type=”full_width_content” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” bg_color=”#f4f5f8″ scene_position=”center” top_padding=”5%” bottom_padding=”0%” text_color=”dark” text_align=”center” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none” gradient_type=”default” shape_type=””][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][image_with_animation image_url=”405″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” border_radius=”none” box_shadow=”none” image_loading=”default” max_width=”100%” max_width_mobile=”default”][\/vc_column][\/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” bg_color=”#dfe7f7″ scene_position=”center” top_padding=”8%” bottom_padding=”0%” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none” gradient_type=”default” shape_type=””][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text]\n 01 \u2014 THE CHALLENGE<\/p>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1787519270453{padding-right: 20% !important;}”]\n Building a website design system often involves moving between separate tools for colour, typography, accessibility, documentation and developer handoff. Each tool may solve one part of the process, but the decisions still need to work together as one system.<\/p>\n The challenge becomes even greater for people with limited design-system experience. They may understand how they want a product to feel without knowing which decisions to make first, whether those choices are accessible, or how to turn them into reusable design rules.<\/p>\n[\/vc_column_text][divider line_type=”Full Width Line” line_thickness=”1″ divider_color=”default”][\/vc_column][\/vc_row][vc_row type=”full_width_content” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” bg_color=”#dfe7f7″ scene_position=”center” top_padding=”0%” bottom_padding=”4%” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none” gradient_type=”default” shape_type=””][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” centered_text=”true” desktop_text_alignment=”center” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid” column_padding_type=”default” gradient_type=”default”][image_with_animation image_url=”470″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” border_radius=”none” box_shadow=”none” image_loading=”default” max_width=”100%” max_width_mobile=”default”][\/vc_column][\/vc_row][vc_row type=”full_width_content” full_screen_row_position=”middle” column_margin=”default” equal_height=”yes” content_placement=”middle” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” bg_color=”#f4f5f8″ scene_position=”center” top_padding=”8%” bottom_padding=”8%” left_padding_desktop=”5%” constrain_group_2=”yes” right_padding_desktop=”5%” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” class=”designPrinciplesSection” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none” shape_type=”” gradient_type=”default”][vc_column column_padding=”padding-2-percent” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”right” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/3″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text]\n 02 \u2014 DESIGN PRINCIPLES<\/p>\n[\/vc_column_text][vc_column_text]\n Before designing individual screens, I defined a small set of principles to guide how Rulebook should behave as the product grew.<\/p>\n[\/vc_column_text][\/vc_column][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”2\/3″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_row_inner equal_height=”yes” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all” css=”.vc_custom_1787531233153{margin-bottom: 2% !important;}”][vc_column_inner column_padding=”padding-1-percent” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/2″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][fancy_box box_style=”color_box_hover” icon_family=”none” color=”accent-color” color_custom=”#182033″ color_box_hover_overlay_opacity=”default” box_alignment=”left” border_radius=”default” image_loading=”default” min_height=”200″]\n Give users a clear place to start without requiring deep design-system knowledge.[\/fancy_box][\/vc_column_inner][vc_column_inner column_padding=”padding-1-percent” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/2″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][fancy_box box_style=”color_box_hover” icon_family=”none” color=”accent-color” color_custom=”#182033″ color_box_hover_overlay_opacity=”default” box_alignment=”left” border_radius=”default” image_loading=”default” min_height=”200″]\n Colour, typography, accessibility, previews and rules should work as parts of one system rather than separate tools.[\/fancy_box][\/vc_column_inner][\/vc_row_inner][vc_row_inner equal_height=”yes” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all”][vc_column_inner column_padding=”padding-1-percent” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/2″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][fancy_box box_style=”color_box_hover” icon_family=”none” color=”accent-color” color_custom=”#182033″ color_box_hover_overlay_opacity=”default” box_alignment=”left” border_radius=”default” image_loading=”default” min_height=”200″]\n Contrast, focus and accessible relationships should influence decisions while users are designing, not only at the end.[\/fancy_box][\/vc_column_inner][vc_column_inner column_padding=”padding-1-percent” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/2″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][fancy_box box_style=”color_box_hover” icon_family=”none” color=”accent-color” color_custom=”#182033″ color_box_hover_overlay_opacity=”default” box_alignment=”left” border_radius=”default” image_loading=”default” min_height=”200″]\n Design decisions should become reusable documentation, tokens and implementation-ready outputs.[\/fancy_box][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row type=”full_width_content” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” bg_color=”#dfe7f7″ scene_position=”center” top_padding=”8%” constrain_group_1=”yes” bottom_padding=”8%” left_padding_desktop=”5%” constrain_group_2=”yes” right_padding_desktop=”5%” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none” gradient_type=”default” shape_type=””][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”2\/3″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text]\n 03 \u2014 INFORMATION ARCHITECTURE<\/p>\n[\/vc_column_text][vc_column_text]\n As Rulebook grew, the challenge was no longer simply designing individual features. The larger UX problem was deciding how those features should relate to one another.<\/p>\n I structured the product around the progression of creating a design system rather than around a collection of separate generators.<\/p>\n[\/vc_column_text][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” top_padding=”15%” text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” top_position_desktop=”50″ overflow=”visible” pointer_events=”all”][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text]\n This flow became the backbone of Rulebook. Users can move from exploration toward increasingly concrete design decisions without needing to understand every part of the application before they begin.<\/p>\n[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][\/vc_column][vc_column left_padding_desktop=”20%” constrain_group_101=”yes” right_padding_desktop=”20%” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/3″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid” column_padding_type=”advanced” gradient_type=”default”][nectar_icon_list animate=”true” color=”default” direction=”vertical” icon_size=”small” icon_style=”border”][nectar_icon_list_item icon_type=”numerical” text_full_html=”simple” title=”List Item” id=”1787860289416-7″ header=”START” text=”Create Project 04 \u2014 GUIDED CREATION<\/p>\n[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_column_text]\n A flexible design-system editor is useful once users know what they want, but an empty workspace can make it unclear which decisions should come first.<\/p>\n I introduced a guided setup that breaks the initial process into smaller choices, helping users establish a direction before entering the full workspace.<\/p>\n[\/vc_column_text][vc_gallery type=”flickity_static_height_style” images=”501,502,503,504,505″ flickity_spacing=”5px” flickity_controls=”none” flickity_overflow=”visible” flickity_wrap_around=”no-wrap” flickity_box_shadow=”large_depth” image_loading=”default” onclick=”link_image” flickity_img_height=”120″][\/vc_column][\/vc_row][vc_row type=”full_width_content” full_screen_row_position=”middle” column_margin=”default” equal_height=”yes” content_placement=”middle” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” bg_color=”#f4f5f8″ scene_position=”center” top_padding=”8%” constrain_group_1=”yes” bottom_padding=”8%” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none” gradient_type=”default” shape_type=””][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”3\/5″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid” column_padding_type=”default” gradient_type=”default”][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all”][vc_column_inner column_padding=”padding-10-percent” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid” column_padding_type=”default” gradient_type=”default”][vc_column_text]\n 05 \u2014 COLOUR STUDIO<\/p>\n[\/vc_column_text][vc_column_text]\n Palette generators are useful for inspiration, but a set of swatches is not yet a usable design system. Colour Studio connects exploration with refinement, accessibility feedback and contextual preview so a palette can become part of an actual project.<\/p>\n[\/vc_column_text][divider line_type=”No Line”][nectar_icon_list animate=”true” color=”default” direction=”horizontal” columns=”3″ icon_size=”small” icon_style=”border”][nectar_icon_list_item icon_type=”numerical” text_full_html=”simple” title=”List Item” id=”1787860289416-7″ header=”Explore” text=”Generate palettes [vc_row type=”full_width_background” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” bg_color=”#182033″ scene_position=”center” top_padding=”12%” bottom_padding=”0%” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” class=”darkBg” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none” gradient_type=”default” shape_type=””][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default”…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-402","page","type-page","status-publish"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/designer.chanchalpt.com\/index.php\/wp-json\/wp\/v2\/pages\/402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designer.chanchalpt.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/designer.chanchalpt.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/designer.chanchalpt.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designer.chanchalpt.com\/index.php\/wp-json\/wp\/v2\/comments?post=402"}],"version-history":[{"count":82,"href":"https:\/\/designer.chanchalpt.com\/index.php\/wp-json\/wp\/v2\/pages\/402\/revisions"}],"predecessor-version":[{"id":539,"href":"https:\/\/designer.chanchalpt.com\/index.php\/wp-json\/wp\/v2\/pages\/402\/revisions\/539"}],"wp:attachment":[{"href":"https:\/\/designer.chanchalpt.com\/index.php\/wp-json\/wp\/v2\/media?parent=402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Creating a design system shouldn’t require five different tools.<\/h2>\n[\/vc_column_text][vc_column_text]\n
Defining the experience before designing the interface.<\/h2>\n[\/vc_column_text][vc_column_text]\n
01<\/h2>\n
MAKE
\nCOMPLEXITY
\nAPPROACHABLE<\/h3>\n
\n02<\/h2>\n
CONNECT
\nDESIGN
\nDECISIONS<\/h3>\n
\n03<\/h2>\n
BUILD
\nACCESSIBILITY
\nINTO CREATION<\/h3>\n
\n04<\/h2>\n
BRIDGE DESIGN
\nAND
\nDEVELOPMENT<\/h3>\n
\nTurning many tools into one understandable workflow<\/h2>\n[\/vc_column_text][vc_column_text]\n
\nDefine Direction” tab_id=”1787860289416-9″][\/nectar_icon_list_item][nectar_icon_list_item icon_type=”numerical” text_full_html=”simple” title=”List Item” id=”1787860289426-3″ header=”BUILD” text=”Choose Colours
\nSet Typography
\nCreate Rules” tab_id=”1787860289427-8″][\/nectar_icon_list_item][nectar_icon_list_item icon_type=”numerical” text_full_html=”simple” title=”List Item” id=”1787860289432-5″ header=”VALIDATE” text=”Accessibility
\nPreview
\nDesign QA” tab_id=”1787860289432-9″][\/nectar_icon_list_item][nectar_icon_list_item icon_type=”numerical” text_full_html=”simple” title=”List Item” id=”1787860289437-4″ header=”HAND OFF” text=”Export” tab_id=”1787860289437-10″][\/nectar_icon_list_item][\/nectar_icon_list][\/vc_column][\/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” bg_color=”#f4f5f8″ scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none” gradient_type=”default” shape_type=””][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” translate_y=”-15%” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid” column_padding_type=”default” gradient_type=”default”][nectar_image_with_hotspots image=”492″ preview=”https:\/\/designer.chanchalpt.com\/wp-content\/uploads\/2026\/08\/Rulebook-project-daash-1.webp” color_1=”Accent-Color” hotspot_icon=”plus_sign” tooltip=”hover” tooltip_shadow=”medium_depth” animation=”true”][nectar_hotspot left=”10.8578%” top=”17.5794%” position=”top”]Guide Structure: Keeps colour, typography, rules and other system sections within one predictable structure.[\/nectar_hotspot][nectar_hotspot left=”18.885722041259502%” top=”9.176506514657982%” position=”top”]Contextual workspace: Lets users move between editing the system and seeing it applied in context.[\/nectar_hotspot][nectar_hotspot left=”66.66327361563518%” top=”4.911441368078176%” position=”top”]Validate & hand off: Bring validation, importing and export into the same project workflow.[\/nectar_hotspot][nectar_hotspot left=”78.1725%” top=”53.4813%” position=”top”]Contextual inspector: Shows only the controls, usage and accessibility feedback relevant to the selected item.[\/nectar_hotspot][nectar_hotspot left=”41.2595%” top=”58.9486%” position=”top”]Design workspace: Keeps the active design-system decisions visible and editable in one focused canvas.[\/nectar_hotspot][\/nectar_image_with_hotspots][\/vc_column][\/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” column_margin=”default” equal_height=”yes” content_placement=”middle” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” bg_color=”#dfe7f7″ scene_position=”center” top_padding=”8%” constrain_group_1=”yes” bottom_padding=”8%” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” id=”save-time” row_name=”Save Time” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none” gradient_type=”default” shape_type=””][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/2″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][image_with_animation image_url=”500″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” border_radius=”none” box_shadow=”none” image_loading=”default” max_width=”100%” max_width_mobile=”default”][\/vc_column][vc_column column_padding=”padding-2-percent” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/2″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all”][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” enable_animation=”true” animation=”fade-in-from-bottom” animation_easing=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text]\nRemoving the blank-canvas problem<\/h2>\n[\/vc_column_text][vc_column_text]\n
Turning colour exploration into a usable system<\/h2>\n[\/vc_column_text][vc_column_text]\n
\nHarmony modes
\nExtract from images” tab_id=”1787860289416-9″][\/nectar_icon_list_item][nectar_icon_list_item icon_type=”numerical” text_full_html=”simple” title=”List Item” id=”1787860289426-3″ header=”Refine” text=”Reorder
\nAdjust combinations
\nBuild gradients” tab_id=”1787860289427-8″][\/nectar_icon_list_item][nectar_icon_list_item icon_type=”numerical” text_full_html=”simple” title=”List Item” id=”1787860289432-5″ header=”Apply” text=”Check contrast
\nPreview in context
\nApply to project” tab_id=”1787860289432-9″][\/nectar_icon_list_item][\/nectar_icon_list][\/vc_column_inner][\/vc_row_inner][\/vc_column][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”2\/5″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all”][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][image_with_animation image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” border_radius=”none” box_shadow=”none” image_loading=”default” max_width=”100%” max_width_mobile=”default”][image_with_animation image_url=”528″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” animation_movement_intensity=”-1″ hover_animation=”none” alignment=”” border_radius=”none” box_shadow=”none” image_loading=”default” max_width=”150%” max_width_mobile=”default”][\/vc_column_inner][\/vc_row_inner][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” text_align=”left” row_position=”absolute” row_position_tablet=”inherit” row_position_phone=”inherit” top_position_desktop=”25%” left_position_desktop=”-20%” overflow=”visible” pointer_events=”all”][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][image_with_animation image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” border_radius=”none” box_shadow=”none” image_loading=”default” max_width=”100%” max_width_mobile=”default”][image_with_animation image_url=”529″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” animation_movement_intensity=”1″ hover_animation=”none” alignment=”” border_radius=”none” box_shadow=”none” image_loading=”default” max_width=”custom” max_width_custom=”50%”][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"