{"id":402,"date":"2026-08-07T22:31:27","date_gmt":"2026-08-07T22:31:27","guid":{"rendered":"https:\/\/designer.chanchalpt.com\/?page_id=402"},"modified":"2026-08-25T16:04:16","modified_gmt":"2026-08-25T16:04:16","slug":"rulebook","status":"publish","type":"page","link":"https:\/\/designer.chanchalpt.com\/index.php\/rulebook\/","title":{"rendered":"Rulebook"},"content":{"rendered":"[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” 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

INDEPENDENT PRODUCT DESIGN \u00b7 2026<\/p>\n[\/vc_column_text][vc_column_text]\n

Rulebook Design Studio<\/h1>\n[\/vc_column_text][vc_column_text]\n

Designing an accessible workspace for creating, testing and managing design systems. A connected workspace for turning visual decisions into accessible, reusable design systems and developer-ready outputs.<\/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

Creating a design system shouldn’t require five different tools.<\/h2>\n[\/vc_column_text][vc_column_text]\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

Defining the experience before designing the interface.<\/h2>\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

01<\/h2>\n

MAKE
\nCOMPLEXITY
\nAPPROACHABLE<\/h3>\n
\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

02<\/h2>\n

CONNECT
\nDESIGN
\nDECISIONS<\/h3>\n
\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

03<\/h2>\n

BUILD
\nACCESSIBILITY
\nINTO CREATION<\/h3>\n
\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

04<\/h2>\n

BRIDGE DESIGN
\nAND
\nDEVELOPMENT<\/h3>\n
\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

Turning many tools into one understandable workflow<\/h2>\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=”1469496380463-1039da-01ea” header=”START” text=”Create Project
\nDefine Direction” tab_id=”1485703048239-5″][\/nectar_icon_list_item][nectar_icon_list_item icon_type=”numerical” text_full_html=”simple” title=”List Item” id=”1469496380621-239da-01ea” header=”BUILD” text=”Choose Colours
\nSet Typography
\nCreate Rules” tab_id=”1485703048245-4″][\/nectar_icon_list_item][nectar_icon_list_item icon_type=”numerical” text_full_html=”simple” title=”List Item” id=”1469496416453-939da-01ea” header=”VALIDATE” text=”Accessibility
\nPreview
\nDesign QA” tab_id=”1485703048251-2″][\/nectar_icon_list_item][nectar_icon_list_item icon_type=”numerical” text_full_html=”simple” title=”List Item” id=”1469496416453-939da-01ea” header=”HAND OFF” text=”Export” tab_id=”1485703048251-2″][\/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=”7\/12″ 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=”5\/12″ 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]\n

04 \u2014 GUIDED CREATION<\/p>\n[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_column_text]\n

Removing the blank-canvas problem<\/h2>\n[\/vc_column_text][vc_column_text]\n

Starting from an empty design-system workspace can be intimidating, especially for users who know the visual direction they want but are less familiar with system-level decisions.<\/p>\n

I introduced a guided setup flow that breaks the starting process into smaller, more understandable choices.<\/p>\n[\/vc_column_text][\/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” 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=”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_gallery type=”flickity_static_height_style” images=”501,502,503,504,505″ flickity_spacing=”default” flickity_controls=”pagination” flickity_overflow=”hidden” flickity_wrap_around=”wrap” flickity_box_shadow=”large_depth” image_loading=”default” onclick=”link_image”][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"

[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":69,"href":"https:\/\/designer.chanchalpt.com\/index.php\/wp-json\/wp\/v2\/pages\/402\/revisions"}],"predecessor-version":[{"id":520,"href":"https:\/\/designer.chanchalpt.com\/index.php\/wp-json\/wp\/v2\/pages\/402\/revisions\/520"}],"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}]}}