Design Principles | Samsung Developer

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <title>Design Principles | Samsung Developer</title> <link rel="canonical" href="/one-ui-watch-tizen/principle.html" /> <meta name="description" content=""> <meta name="author" content=""> <meta name="keywords" content="">  <meta property="og:site_name" content="Samsung Developer"> <meta property="og:title" content="Design Principles | Samsung Developer"> <meta property="og:description" content="The world runs on you."> <meta property="og:type" content="website"> <meta property="og:url" content="/one-ui-watch-tizen/principle.html"> <meta property="og:locale" content="en_US"> <meta property="og:image" content="https://d3unf4s5rp9dfh.cloudfront.net/public/img/common/SNS_1280x630.png">  <meta name="twitter:site" content="@samsung_dev"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Design Principles | Samsung Developer"> <meta name="twitter:description" content="The world runs on you."> <meta name="twitter:domain" content="http://developer.samsung.com/"> <meta property="twitter:image" content="https://d3unf4s5rp9dfh.cloudfront.net/public/img/common/SNS_1280x630.png"> <link rel="icon" type="image/png" href="https://d3unf4s5rp9dfh.cloudfront.net/public/favicon-2023.ico" /> <link rel="manifest" href="https://d3unf4s5rp9dfh.cloudfront.net/public/manifest.json" /> <meta name="google-site-verification" content="" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta name="theme-color" content="#000000" /> <meta name="csrf-token" content=""/> <meta name="user-locale" content="SGP"/> <meta name="user-country" content="SG"/> <meta name="user-lang" content="*"/> <meta name="env" content="production"/> <link rel="preload" href="https://d3unf4s5rp9dfh.cloudfront.net/public/fonts/SamsungOne-400.woff2" as="font" type="font/woff2" crossorigin="anonymous"/> <link rel="preload" href="https://d3unf4s5rp9dfh.cloudfront.net/public/fonts/SamsungOne-700.woff2" as="font" type="font/woff2" crossorigin="anonymous"/> <link rel="preload" href="https://d3unf4s5rp9dfh.cloudfront.net/public/fonts/SamsungSharpSans-Bold.woff" as="font" type="font/woff2" crossorigin="anonymous" /> <link rel="preload" href="https://d3unf4s5rp9dfh.cloudfront.net/public/fonts/SamsungSharpSans-Medium.woff" as="font" type="font/woff2" crossorigin="anonymous" /> <link rel="preload" href="https://d3unf4s5rp9dfh.cloudfront.net/public/fonts/SamsungOneKorean-400.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> <link rel="preload" href="https://d3unf4s5rp9dfh.cloudfront.net/public/fonts/SamsungOneKorean-700.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> <link rel="preload" href="https://d3unf4s5rp9dfh.cloudfront.net/public/fonts/SamsungSharpSans-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> <link rel="stylesheet" href="https://d3unf4s5rp9dfh.cloudfront.net/public/d5df079/css/sdp.vendors.min.css"/> <link rel="stylesheet" href="https://d3unf4s5rp9dfh.cloudfront.net/public/d5df079/css/sdp.global.min.css"/> <link rel="stylesheet" href="https://d3unf4s5rp9dfh.cloudfront.net/public/d5df079/css/sdp.app.min.css"/> <link rel="stylesheet" href="https://d3unf4s5rp9dfh.cloudfront.net/public/d5df079/css/sdp.docs.min.css"/> <script type="text/javascript" src="https://d3unf4s5rp9dfh.cloudfront.net/public/d5df079/js/sdp.vendors.min.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=GTM-THSQV3D"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GTM-THSQV3D'); </script>   </head> <body>  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-THSQV3D" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>   <div id="app" attr-url="/one-ui-watch-tizen/principle.html" attr-ga-enabled="1" attr-cms="doc"> <div class="wrapper"> <header class="sdp-header sub doc" data-target="header" translate="no" data-component="true"> <div class="header-global-nav">  <div class="global-nav-top-box"> <div class="global-nav-top"> <i role="button" class="global-nav-menu" data-target="gnb"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 4.125H2" stroke="#1E1E1E" stroke-width="1.5"></path> <path d="M2 10.125H18" stroke="#1E1E1E" stroke-width="1.5"></path> <path d="M18 16.125H2" stroke="#1E1E1E" stroke-width="1.5"></path> </svg> </i> <a class="global-nav-logo" href="/"> <svg width="180" height="24" viewBox="0 0 180 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1_13833)"> <path d="M5.184 18.43C2.826 18.43 1.26 17.422 0.054 16.072L2.286 14.308C2.952 15.46 3.96 16.09 5.166 16.09C6.462 16.09 7.164 15.244 7.164 14.326C7.164 13.228 5.814 12.868 4.428 12.436C2.646 11.86 0.702 11.194 0.702 8.692C0.702 6.586 2.538 4.93 5.058 4.93C7.164 4.93 8.406 5.74 9.468 6.838L7.452 8.368C6.894 7.522 6.102 7.108 5.076 7.108C3.87 7.108 3.24 7.756 3.24 8.602C3.24 9.664 4.482 9.97 5.922 10.456C7.704 11.032 9.72 11.824 9.72 14.344C9.72 16.414 8.064 18.43 5.184 18.43ZM15.9503 18.466C13.4123 18.466 10.7663 16.45 10.7663 12.994C10.7663 9.502 13.3223 7.504 15.9863 7.504C17.3723 7.504 18.5963 8.062 19.3703 8.98V7.72H21.8003V18.25H19.3703V16.882C18.5963 17.872 17.3363 18.466 15.9503 18.466ZM16.3463 16.234C18.1643 16.234 19.4962 14.776 19.4962 12.958C19.4962 11.158 18.1643 9.718 16.3463 9.718C14.5463 9.718 13.1603 11.14 13.1603 12.958C13.1603 14.794 14.5463 16.234 16.3463 16.234ZM23.2723 18.25V7.72H25.6843V8.944C26.3503 8.062 27.3943 7.504 28.6903 7.504C30.3463 7.504 31.4803 8.17 32.1103 9.322C32.8303 8.224 34.0543 7.504 35.5663 7.504C38.4283 7.504 39.8503 9.16 39.8503 11.914V18.25H37.3663V12.112C37.3663 10.582 36.5923 9.61 35.0803 9.61C33.7663 9.61 32.7583 10.51 32.7583 12.364V18.25H30.2923V12.04C30.2923 10.528 29.5363 9.61 28.0783 9.61C26.7103 9.61 25.7023 10.546 25.7023 12.418V18.25H23.2723ZM45.1972 18.466C42.8392 18.466 41.3632 17.566 40.5172 15.91L42.7672 14.83C43.2712 15.82 44.1532 16.36 45.3052 16.36C46.5112 16.36 47.1052 15.784 47.1052 15.082C47.1052 14.308 45.9352 14.164 44.6392 13.876C42.8392 13.498 40.9492 12.922 40.9492 10.708C40.9492 9.016 42.5872 7.486 45.0892 7.486C47.2312 7.486 48.5812 8.314 49.3912 9.664L47.3212 10.708C46.8892 9.97 46.0972 9.502 45.0892 9.502C43.9372 9.502 43.3972 10.042 43.3972 10.636C43.3972 11.338 44.2252 11.518 45.8092 11.86C47.5372 12.202 49.5172 12.814 49.5172 15.028C49.5172 16.504 48.2032 18.466 45.1972 18.466ZM59.9517 7.72V18.25H57.5397V17.044C56.8737 17.926 55.8657 18.466 54.5157 18.466C51.9957 18.466 50.4657 16.828 50.4657 13.966V7.72H52.9317V13.714C52.9317 15.352 53.6517 16.36 55.1817 16.36C56.5317 16.36 57.5217 15.352 57.5217 13.498V7.72H59.9517ZM61.452 18.25V7.72H63.864V9.016C64.566 8.098 65.646 7.504 67.014 7.504C69.66 7.504 71.19 9.142 71.19 12.004V18.25H68.724V12.256C68.724 10.618 67.932 9.61 66.348 9.61C64.962 9.61 63.882 10.618 63.882 12.472V18.25H61.452ZM80.8765 18.07V16.846C80.1025 17.854 78.8605 18.466 77.4385 18.466C74.9005 18.466 72.2545 16.45 72.2545 12.994C72.2545 9.502 74.8105 7.504 77.4745 7.504C78.8605 7.504 80.0845 8.116 80.8585 9.07V7.72H83.2885V17.98C83.2885 20.932 81.3985 23.344 77.8525 23.344C75.1165 23.344 73.4065 22.066 72.4525 20.32L74.6125 19.006C75.3865 20.428 76.2145 21.112 77.8885 21.112C79.7245 21.112 80.8765 19.672 80.8765 18.07ZM77.8345 16.234C79.6525 16.234 80.9845 14.776 80.9845 12.958C80.9845 11.158 79.6525 9.718 77.8345 9.718C76.0345 9.718 74.6485 11.14 74.6485 12.958C74.6485 14.794 76.0345 16.234 77.8345 16.234ZM89.174 18.25V5.11H92.756C97.184 5.11 99.704 7.954 99.704 11.68C99.704 15.424 96.86 18.25 92.864 18.25H89.174ZM92.468 7.378H91.622V15.982H92.576C95.456 15.982 97.256 14.128 97.256 11.68C97.256 9.16 95.726 7.378 92.468 7.378ZM106.012 18.466C102.7 18.466 100.45 16.054 100.45 13.012C100.45 9.934 102.844 7.504 105.922 7.504C109.054 7.504 111.34 9.808 111.34 12.922V13.84H102.772C103.114 15.334 104.284 16.324 106.012 16.324C107.38 16.324 108.424 15.604 108.928 14.47L110.926 15.622C110.008 17.332 108.388 18.466 106.012 18.466ZM105.922 9.646C104.464 9.646 103.33 10.51 102.898 11.806H108.874C108.514 10.384 107.434 9.646 105.922 9.646ZM115.182 18.25L111.168 7.72H113.706L116.424 15.136L119.088 7.72H121.59L117.63 18.25H115.182ZM126.895 18.466C123.583 18.466 121.333 16.054 121.333 13.012C121.333 9.934 123.727 7.504 126.805 7.504C129.937 7.504 132.223 9.808 132.223 12.922V13.84H123.655C123.997 15.334 125.167 16.324 126.895 16.324C128.263 16.324 129.307 15.604 129.811 14.47L131.809 15.622C130.891 17.332 129.271 18.466 126.895 18.466ZM126.805 9.646C125.347 9.646 124.213 10.51 123.781 11.806H129.757C129.397 10.384 128.317 9.646 126.805 9.646ZM133.311 18.25V4.93H135.759V18.25H133.311ZM142.273 18.466C139.231 18.466 136.819 16.018 136.819 12.994C136.819 9.916 139.231 7.504 142.273 7.504C145.297 7.504 147.727 9.916 147.727 12.994C147.727 16.018 145.297 18.466 142.273 18.466ZM142.273 16.18C144.001 16.18 145.333 14.74 145.333 12.994C145.333 11.212 144.001 9.79 142.273 9.79C140.527 9.79 139.213 11.212 139.213 12.994C139.213 14.74 140.527 16.18 142.273 16.18ZM154.648 18.466C153.208 18.466 151.948 17.944 151.21 17.008V23.092H148.798V7.72H151.21V9.124C151.948 8.134 153.19 7.504 154.63 7.504C157.276 7.504 159.814 9.502 159.814 12.994C159.814 16.45 157.186 18.466 154.648 18.466ZM154.252 16.234C156.034 16.234 157.42 14.794 157.42 12.958C157.42 11.14 156.034 9.718 154.252 9.718C152.434 9.718 151.12 11.158 151.12 12.958C151.12 14.776 152.434 16.234 154.252 16.234ZM166.129 18.466C162.817 18.466 160.567 16.054 160.567 13.012C160.567 9.934 162.961 7.504 166.039 7.504C169.171 7.504 171.457 9.808 171.457 12.922V13.84H162.889C163.231 15.334 164.401 16.324 166.129 16.324C167.497 16.324 168.541 15.604 169.045 14.47L171.043 15.622C170.125 17.332 168.505 18.466 166.129 18.466ZM166.039 9.646C164.581 9.646 163.447 10.51 163.015 11.806H168.991C168.631 10.384 167.551 9.646 166.039 9.646ZM172.546 18.25V7.72H174.958V9.286C175.444 8.242 176.344 7.72 177.658 7.72C178.432 7.72 179.026 7.9 179.512 8.17L178.594 10.474C178.234 10.24 177.838 10.06 177.136 10.06C175.714 10.06 174.976 10.816 174.976 12.634V18.25H172.546Z" fill="black"></path> </g> <defs> <clipPath id="clip0_1_13833"> <rect width="180" height="23.5" fill="white" transform="translate(0 0.25)"></rect> </clipPath> </defs> </svg> </a> <div class="global-nav-util-group"> <div class="util-group-search" data-open="headerSearch"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17.2529 17.2511L12.5469 12.5142" stroke="#1E1E1E" stroke-width="1.5"></path> <path d="M14.3843 8.55871C14.3843 11.7763 11.776 14.385 8.55883 14.385C5.34167 14.385 2.7334 11.7763 2.7334 8.55871C2.7334 5.34107 5.34167 2.73242 8.55883 2.73242C11.776 2.73242 14.3843 5.34107 14.3843 8.55871Z" stroke="#1E1E1E" stroke-width="1.5"></path> </svg> <span>Search</span> </div>  <a class="util-group-sign-in" href="/login?redirectURL=%2Fone-ui-watch-tizen%2Fprinciple.html"> <span>Sign in</span> </a> </div> </div> </div>  <div class="header-dimmed" data-target="headerDimmed"></div>  <div id="filter"></div>  <div class="global-nav-bottom-fixed"> <div class="global-nav-bottom" data-open="gnb"> <div class="nav-btm-logo"> <i role="button" class="nav-btm-close" data-close="gnb"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4.00017 4L16 15.9998" stroke="#1E1E1E" stroke-width="1.5"></path> <path d="M4 15.9998L15.9998 4" stroke="#1E1E1E" stroke-width="1.5"></path> </svg> </i> <svg width="180" height="24" viewBox="0 0 180 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1_13833)"> <path d="M5.184 18.43C2.826 18.43 1.26 17.422 0.054 16.072L2.286 14.308C2.952 15.46 3.96 16.09 5.166 16.09C6.462 16.09 7.164 15.244 7.164 14.326C7.164 13.228 5.814 12.868 4.428 12.436C2.646 11.86 0.702 11.194 0.702 8.692C0.702 6.586 2.538 4.93 5.058 4.93C7.164 4.93 8.406 5.74 9.468 6.838L7.452 8.368C6.894 7.522 6.102 7.108 5.076 7.108C3.87 7.108 3.24 7.756 3.24 8.602C3.24 9.664 4.482 9.97 5.922 10.456C7.704 11.032 9.72 11.824 9.72 14.344C9.72 16.414 8.064 18.43 5.184 18.43ZM15.9503 18.466C13.4123 18.466 10.7663 16.45 10.7663 12.994C10.7663 9.502 13.3223 7.504 15.9863 7.504C17.3723 7.504 18.5963 8.062 19.3703 8.98V7.72H21.8003V18.25H19.3703V16.882C18.5963 17.872 17.3363 18.466 15.9503 18.466ZM16.3463 16.234C18.1643 16.234 19.4962 14.776 19.4962 12.958C19.4962 11.158 18.1643 9.718 16.3463 9.718C14.5463 9.718 13.1603 11.14 13.1603 12.958C13.1603 14.794 14.5463 16.234 16.3463 16.234ZM23.2723 18.25V7.72H25.6843V8.944C26.3503 8.062 27.3943 7.504 28.6903 7.504C30.3463 7.504 31.4803 8.17 32.1103 9.322C32.8303 8.224 34.0543 7.504 35.5663 7.504C38.4283 7.504 39.8503 9.16 39.8503 11.914V18.25H37.3663V12.112C37.3663 10.582 36.5923 9.61 35.0803 9.61C33.7663 9.61 32.7583 10.51 32.7583 12.364V18.25H30.2923V12.04C30.2923 10.528 29.5363 9.61 28.0783 9.61C26.7103 9.61 25.7023 10.546 25.7023 12.418V18.25H23.2723ZM45.1972 18.466C42.8392 18.466 41.3632 17.566 40.5172 15.91L42.7672 14.83C43.2712 15.82 44.1532 16.36 45.3052 16.36C46.5112 16.36 47.1052 15.784 47.1052 15.082C47.1052 14.308 45.9352 14.164 44.6392 13.876C42.8392 13.498 40.9492 12.922 40.9492 10.708C40.9492 9.016 42.5872 7.486 45.0892 7.486C47.2312 7.486 48.5812 8.314 49.3912 9.664L47.3212 10.708C46.8892 9.97 46.0972 9.502 45.0892 9.502C43.9372 9.502 43.3972 10.042 43.3972 10.636C43.3972 11.338 44.2252 11.518 45.8092 11.86C47.5372 12.202 49.5172 12.814 49.5172 15.028C49.5172 16.504 48.2032 18.466 45.1972 18.466ZM59.9517 7.72V18.25H57.5397V17.044C56.8737 17.926 55.8657 18.466 54.5157 18.466C51.9957 18.466 50.4657 16.828 50.4657 13.966V7.72H52.9317V13.714C52.9317 15.352 53.6517 16.36 55.1817 16.36C56.5317 16.36 57.5217 15.352 57.5217 13.498V7.72H59.9517ZM61.452 18.25V7.72H63.864V9.016C64.566 8.098 65.646 7.504 67.014 7.504C69.66 7.504 71.19 9.142 71.19 12.004V18.25H68.724V12.256C68.724 10.618 67.932 9.61 66.348 9.61C64.962 9.61 63.882 10.618 63.882 12.472V18.25H61.452ZM80.8765 18.07V16.846C80.1025 17.854 78.8605 18.466 77.4385 18.466C74.9005 18.466 72.2545 16.45 72.2545 12.994C72.2545 9.502 74.8105 7.504 77.4745 7.504C78.8605 7.504 80.0845 8.116 80.8585 9.07V7.72H83.2885V17.98C83.2885 20.932 81.3985 23.344 77.8525 23.344C75.1165 23.344 73.4065 22.066 72.4525 20.32L74.6125 19.006C75.3865 20.428 76.2145 21.112 77.8885 21.112C79.7245 21.112 80.8765 19.672 80.8765 18.07ZM77.8345 16.234C79.6525 16.234 80.9845 14.776 80.9845 12.958C80.9845 11.158 79.6525 9.718 77.8345 9.718C76.0345 9.718 74.6485 11.14 74.6485 12.958C74.6485 14.794 76.0345 16.234 77.8345 16.234ZM89.174 18.25V5.11H92.756C97.184 5.11 99.704 7.954 99.704 11.68C99.704 15.424 96.86 18.25 92.864 18.25H89.174ZM92.468 7.378H91.622V15.982H92.576C95.456 15.982 97.256 14.128 97.256 11.68C97.256 9.16 95.726 7.378 92.468 7.378ZM106.012 18.466C102.7 18.466 100.45 16.054 100.45 13.012C100.45 9.934 102.844 7.504 105.922 7.504C109.054 7.504 111.34 9.808 111.34 12.922V13.84H102.772C103.114 15.334 104.284 16.324 106.012 16.324C107.38 16.324 108.424 15.604 108.928 14.47L110.926 15.622C110.008 17.332 108.388 18.466 106.012 18.466ZM105.922 9.646C104.464 9.646 103.33 10.51 102.898 11.806H108.874C108.514 10.384 107.434 9.646 105.922 9.646ZM115.182 18.25L111.168 7.72H113.706L116.424 15.136L119.088 7.72H121.59L117.63 18.25H115.182ZM126.895 18.466C123.583 18.466 121.333 16.054 121.333 13.012C121.333 9.934 123.727 7.504 126.805 7.504C129.937 7.504 132.223 9.808 132.223 12.922V13.84H123.655C123.997 15.334 125.167 16.324 126.895 16.324C128.263 16.324 129.307 15.604 129.811 14.47L131.809 15.622C130.891 17.332 129.271 18.466 126.895 18.466ZM126.805 9.646C125.347 9.646 124.213 10.51 123.781 11.806H129.757C129.397 10.384 128.317 9.646 126.805 9.646ZM133.311 18.25V4.93H135.759V18.25H133.311ZM142.273 18.466C139.231 18.466 136.819 16.018 136.819 12.994C136.819 9.916 139.231 7.504 142.273 7.504C145.297 7.504 147.727 9.916 147.727 12.994C147.727 16.018 145.297 18.466 142.273 18.466ZM142.273 16.18C144.001 16.18 145.333 14.74 145.333 12.994C145.333 11.212 144.001 9.79 142.273 9.79C140.527 9.79 139.213 11.212 139.213 12.994C139.213 14.74 140.527 16.18 142.273 16.18ZM154.648 18.466C153.208 18.466 151.948 17.944 151.21 17.008V23.092H148.798V7.72H151.21V9.124C151.948 8.134 153.19 7.504 154.63 7.504C157.276 7.504 159.814 9.502 159.814 12.994C159.814 16.45 157.186 18.466 154.648 18.466ZM154.252 16.234C156.034 16.234 157.42 14.794 157.42 12.958C157.42 11.14 156.034 9.718 154.252 9.718C152.434 9.718 151.12 11.158 151.12 12.958C151.12 14.776 152.434 16.234 154.252 16.234ZM166.129 18.466C162.817 18.466 160.567 16.054 160.567 13.012C160.567 9.934 162.961 7.504 166.039 7.504C169.171 7.504 171.457 9.808 171.457 12.922V13.84H162.889C163.231 15.334 164.401 16.324 166.129 16.324C167.497 16.324 168.541 15.604 169.045 14.47L171.043 15.622C170.125 17.332 168.505 18.466 166.129 18.466ZM166.039 9.646C164.581 9.646 163.447 10.51 163.015 11.806H168.991C168.631 10.384 167.551 9.646 166.039 9.646ZM172.546 18.25V7.72H174.958V9.286C175.444 8.242 176.344 7.72 177.658 7.72C178.432 7.72 179.026 7.9 179.512 8.17L178.594 10.474C178.234 10.24 177.838 10.06 177.136 10.06C175.714 10.06 174.976 10.816 174.976 12.634V18.25H172.546Z" fill="black"></path> </g> <defs> <clipPath id="clip0_1_13833"> <rect width="180" height="23.5" fill="white" transform="translate(0 0.25)"></rect> </clipPath> </defs> </svg> </div> <ul class="nav-btm-menu" data-target="navMenu"> <li class="nav-item"> <a href="/learn">Learn</a> <i class="nav-btm-menu-arrow" role="button" data-target="navArrow"></i> <div class="nav-dynamic-menu"> <div class="dynamic-menu-item-contents"> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/codelab">Code Lab</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/foldables-and-largescreens">Foldables and Large Screens</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/one-ui-beta">One UI Beta</a></li> </ul> </div> </div> </div> </li> <li class="nav-item"> <a href="/develop" class="selected">Develop</a> <i class="nav-btm-menu-arrow" role="button" data-target="navArrow"></i> <div class="nav-dynamic-menu"> <div class="dynamic-menu-item-contents"> <div class="contents-item"> <p class="contents-item-title">Mobile/Wearable</p> <ul class="contents-item-list"> <li class="nav-item"> <a href="/galaxy-gamedev">Galaxy GameDev</a> </li> <li class="nav-item"> <a href="/galaxy-themes">Galaxy Themes</a> </li> <li class="nav-item"> <a href="/galaxy-watch">Galaxy Watch</a> </li> <li class="nav-item"> <a href="/health">Health</a> </li> <li class="nav-item"> <a href="/blockchain">Samsung Blockchain</a> </li> <li class="nav-item"> <a href="/samsung-dex">Samsung DeX</a> </li> <li class="nav-item"> <a href="/iap">Samsung IAP</a> </li> <li class="nav-item"> <a href="/internet">Samsung Internet</a> </li> <li class="nav-item"> <a href="/wallet">Samsung Wallet</a> </li> <li class="nav-item"> <a href="/mobile" class="selected"> <span class="contents-underline">See all mobile products</span> <span class="arrow"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4.45654 11.9L9.35659 6.99999L4.45654 2.09995" stroke="currentColor" stroke-width="1.05001"></path> </svg> </span> </a> <ul class="contents-item-list navbar-depth3 d-none"> <li class="d-none"> <a href="/pay/partner"><span>Samsung Pay Partner</span></a> </li> <li class="d-none"> <a href="/pay"><span>Samsung Pay</span></a> </li> <li class="d-none"> <a href="/galaxy-ar-emoji"><span>Galaxy AR Emoji</span></a> </li> <li class="d-none"> <a href="/galaxy-accessory"><span>Galaxy Accessory</span></a> </li> <li class="d-none"> <a href="/galaxy-edge"><span>Galaxy Edge</span></a> </li> <li class="d-none"> <a href="/galaxy-z"><span>Galaxy Z</span></a> </li> <li class="d-none"> <a href="/galaxy-performance"><span>Galaxy Performance</span></a> </li> <li class="d-none"> <a href="/galaxy-fm-radio"><span>Galaxy FM Radio</span></a> </li> <li class="d-none"> <a href="/galaxy-spen-remote"><span>Galaxy S Pen Remote</span></a> </li> <li class="d-none"> <a href="/galaxy-sensor-extension"><span>Galaxy Sensor Extension</span></a> </li> <li class="d-none"> <a href="/penup"><span>PENUP</span></a> </li> <li class="d-none"> <a href="/automation"><span>Samsung Automation</span></a> </li> <li class="d-none"> <a href="/neural"><span>Samsung Neural</span></a> </li> <li class="d-none"> <a href="/teegris"><span>Samsung TEEGRIS</span></a> </li> <li class="d-none"> <a href="/ese"><span>Samsung eSE SDK</span></a> </li> <li class="d-none"> <a href="/galaxy-watch-tizen"><span>Galaxy Watch for Tizen</span></a> </li> <li class="d-none"> <a href="/watch-face-studio"><span>Watch Face Studio</span></a> </li> <li class="d-none"> <a href="/one-ui-watch-tizen" class="selected"><span>One UI Watch for Tizen</span></a> </li> <li class="d-none"> <a href="/gws-converter"><span>Galaxy Watch Studio Converter</span></a> </li> <li class="d-none"> <a href="/galaxy-watch-iap"><span>Samsung IAP for Galaxy Watch (Tizen)</span></a> </li> </ul> </li> </ul> </div> <div class="contents-item"> <p class="contents-item-title">Visual Display</p> <ul class="contents-item-list"> <li><a href="/smarttv/develop">Smart TV</a></li> <li><a href="/smarttv/hospitality-display">Smart Hospitality Display</a></li> <li><a href="/smarttv/signage">Smart Signage</a></li> </ul> </div> <div class="contents-item"> <p class="contents-item-title">Digital Appliance</p> <ul class="contents-item-list"> <li><a href="/family-hub">Family Hub</a></li> </ul> </div> <div class="contents-item"> <p class="contents-item-title">Platform</p> <ul class="contents-item-list"> <li><a href="/bixby">Bixby</a></li> <li><a href="/knox">Knox</a></li> <li><a href="/smartthings">SmartThings</a></li> <li><a href="/tizen">Tizen.NET</a></li> </ul> </div> </div> </div> </li> <li class="nav-item"> <a href="/design">Design</a> <i class="nav-btm-menu-arrow" role="button" data-target="navArrow"></i> <div class="nav-dynamic-menu"> <div class="dynamic-menu-item-contents"> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/design-system">Design System</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/one-ui">One UI</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/one-ui-watch">One UI Watch</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/smarttv/design">Smart TV</a></li> </ul> </div> </div> </div> </li> <li class="nav-item"> <a href="/distribute">Distribute</a> <i class="nav-btm-menu-arrow" role="button" data-target="navArrow"></i> <div class="nav-dynamic-menu"> <div class="dynamic-menu-item-contents"> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/galaxy-store">Galaxy Store</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/tv-seller-office">TV Seller Office</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/galaxy-games">Galaxy Store Games</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/instant-plays">Instant Plays</a></li> </ul> </div> </div> </div> </li> <li class="nav-item"> <a href="/support">Support</a> <i class="nav-btm-menu-arrow" role="button" data-target="navArrow"></i> <div class="nav-dynamic-menu"> <div class="dynamic-menu-item-contents"> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="https://forum.developer.samsung.com">Forums</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/dev-support">Dev Support</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/remote-test-lab">Remote Test Lab</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/android-usb-driver">Samsung Android USB Driver</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/galaxy-emulator-skin">Galaxy Emulator Skin</a></li> </ul> </div> </div> </div> </li> <li class="nav-item"> <a href="/connect">Connect</a> <i class="nav-btm-menu-arrow" role="button" data-target="navArrow"></i> <div class="nav-dynamic-menu"> <div class="dynamic-menu-item-contents"> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/news">News and Updates</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/events">Events</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="https://www.samsungdeveloperconference.com/">Samsung Developer Conference</a></li> </ul> </div> </div> </div> </li> <li class="single nav-item"> <a href="/blog">Blog</a> </li>  <li class="only-mobile"><a href="/login?redirectURL=%2Fone-ui-watch-tizen%2Fprinciple.html">Sign in</a></li> </ul> </div> </div> </div>  <div class="sdp-header-search" data-target="headerSearch"> <div class="header-search-body"> <div class="base-search-input-box"> <input type="text" class="base-search-input" placeholder="Search developer.samsung.com" data-target="searchInput">  <svg class="icon-remove" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-target="searchRemove"> <circle cx="12" cy="12" r="12" fill="#EAEAEA"></circle> <path d="M7.33301 7.3335L16.6663 16.6668" stroke="#9E9E9E" stroke-width="1.06667"></path> <path d="M16.6663 7.3335L7.33301 16.6668" stroke="#9E9E9E" stroke-width="1.06667"></path> </svg>  <svg class="icon-search" width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg"> <g id="Group"> <path id="Vector" d="M37.4072 37.4034L26.1128 26.0347" stroke="black" stroke-width="3.60003"></path> <path id="Vector_2" d="M30.5248 16.5413C30.5248 24.2637 24.2649 30.5245 16.5437 30.5245C8.8224 30.5245 2.5625 24.2637 2.5625 16.5413C2.5625 8.81893 8.8224 2.55811 16.5437 2.55811C24.2649 2.55811 30.5248 8.81893 30.5248 16.5413Z" stroke="black" stroke-width="3.60003"></path> </g> </svg> </div> </div> <div class="header-search-recommend"> <ul class="recommend-ul">  <li><p>Recommendations</p></li> <li class="sdp-search-result-item" attr-keyword="Blog"> <a href="/search?query=Blog"> <span>Blog</span> </a> </li> <li class="sdp-search-result-item" attr-keyword="Code Lab"> <a href="/search?query=Code%20Lab"> <span>Code Lab</span> </a> </li> <li class="sdp-search-result-item" attr-keyword="Foldable and Large Screen Optimization"> <a href="/search?query=Foldable%20and%20Large%20Screen%20Optimization"> <span>Foldable and Large Screen Optimization</span> </a> </li> <li class="sdp-search-result-item" attr-keyword="Health"> <a href="/search?query=Health"> <span>Health</span> </a> </li> <li class="sdp-search-result-item" attr-keyword="Samsung Wallet"> <a href="/search?query=Samsung%20Wallet"> <span>Samsung Wallet</span> </a> </li> <li class="sdp-search-result-item" attr-keyword="SDC24"> <a href="/search?query=SDC24"> <span>SDC24</span> </a> </li></ul> </div> <i class="header-search-close" data-close="headerSearch"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1.00017 1L13 12.9998" stroke="#1E1E1E" stroke-width="1.5"></path> <path d="M1 12.9998L12.9998 1" stroke="#1E1E1E" stroke-width="1.5"></path> </svg> </i> </div>  <div class="header-dimmed" data-target="subNavDimmed"></div> <div class="header-breadcrumb-fixed">  <div class="header-sub-nav doc"> <div class="header-container"> <div class="sub-nav-breadcrumb"> <ul class="breadcrumb-item-list"> <li><a href="/one-ui-watch-tizen">One UI Watch for Tizen</a></li> </ul> </div> <div class="sub-nav-util">  </div> </div> </div>  <div class="header-breadcrumb doc">  <i class="breadcrumb-link-back d-none" id="nav-back"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.375 16.75L3 10.375L9.375 4" stroke="#1E1E1E" stroke-width="1.5"></path> <path d="M3 10.375H17" stroke="#1E1E1E" stroke-width="1.5"></path> </svg> </i>  <i class="breadcrumb-link-list" data-target="breadcrumbFilter" id="mobile-lnb-icon"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17 3H3V17H17V3Z" stroke="black" stroke-width="1.5"></path> <path d="M9 7H14" stroke="black" stroke-width="1.5"></path> <path d="M9 10H14" stroke="black" stroke-width="1.5"></path> <path d="M9 13H14" stroke="black" stroke-width="1.5"></path> <circle cx="6.9502" cy="7.05078" r="0.75" fill="black"></circle> <circle cx="6.9502" cy="10.0508" r="0.75" fill="black"></circle> <circle cx="6.9502" cy="13.0508" r="0.75" fill="black"></circle> </svg> </i> <div class="breadcrumb-link-group"> <div class="breadcrumb-link-text-area"> <span class="breadcrumb-link"> <a href="/one-ui-watch-tizen">One UI Watch for Tizen</a> </span> </div> </div> </div> </div> </header> <div id="el-sdp-container" class="sdp-container sdp-ly-document tech-document " attr-doc-type="tech-doc" attr-program-url="/one-ui-watch-tizen"> <div class="inner-wrap"> <aside class="sdp-lnb" data-target="sdpLnb">  <div class="sdp-lnb-mobile"> <div class="nav-btm-logo"> <i role="button" class="global-nav-menu" data-target="gnb"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 4.125H2" stroke="#1E1E1E" stroke-width="1.5"/> <path d="M2 10.125H18" stroke="#1E1E1E" stroke-width="1.5"/> <path d="M18 16.125H2" stroke="#1E1E1E" stroke-width="1.5"/> </svg> </i> <svg width="180" height="24" viewBox="0 0 180 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1_13833)"> <path d="M5.184 18.43C2.826 18.43 1.26 17.422 0.054 16.072L2.286 14.308C2.952 15.46 3.96 16.09 5.166 16.09C6.462 16.09 7.164 15.244 7.164 14.326C7.164 13.228 5.814 12.868 4.428 12.436C2.646 11.86 0.702 11.194 0.702 8.692C0.702 6.586 2.538 4.93 5.058 4.93C7.164 4.93 8.406 5.74 9.468 6.838L7.452 8.368C6.894 7.522 6.102 7.108 5.076 7.108C3.87 7.108 3.24 7.756 3.24 8.602C3.24 9.664 4.482 9.97 5.922 10.456C7.704 11.032 9.72 11.824 9.72 14.344C9.72 16.414 8.064 18.43 5.184 18.43ZM15.9503 18.466C13.4123 18.466 10.7663 16.45 10.7663 12.994C10.7663 9.502 13.3223 7.504 15.9863 7.504C17.3723 7.504 18.5963 8.062 19.3703 8.98V7.72H21.8003V18.25H19.3703V16.882C18.5963 17.872 17.3363 18.466 15.9503 18.466ZM16.3463 16.234C18.1643 16.234 19.4962 14.776 19.4962 12.958C19.4962 11.158 18.1643 9.718 16.3463 9.718C14.5463 9.718 13.1603 11.14 13.1603 12.958C13.1603 14.794 14.5463 16.234 16.3463 16.234ZM23.2723 18.25V7.72H25.6843V8.944C26.3503 8.062 27.3943 7.504 28.6903 7.504C30.3463 7.504 31.4803 8.17 32.1103 9.322C32.8303 8.224 34.0543 7.504 35.5663 7.504C38.4283 7.504 39.8503 9.16 39.8503 11.914V18.25H37.3663V12.112C37.3663 10.582 36.5923 9.61 35.0803 9.61C33.7663 9.61 32.7583 10.51 32.7583 12.364V18.25H30.2923V12.04C30.2923 10.528 29.5363 9.61 28.0783 9.61C26.7103 9.61 25.7023 10.546 25.7023 12.418V18.25H23.2723ZM45.1972 18.466C42.8392 18.466 41.3632 17.566 40.5172 15.91L42.7672 14.83C43.2712 15.82 44.1532 16.36 45.3052 16.36C46.5112 16.36 47.1052 15.784 47.1052 15.082C47.1052 14.308 45.9352 14.164 44.6392 13.876C42.8392 13.498 40.9492 12.922 40.9492 10.708C40.9492 9.016 42.5872 7.486 45.0892 7.486C47.2312 7.486 48.5812 8.314 49.3912 9.664L47.3212 10.708C46.8892 9.97 46.0972 9.502 45.0892 9.502C43.9372 9.502 43.3972 10.042 43.3972 10.636C43.3972 11.338 44.2252 11.518 45.8092 11.86C47.5372 12.202 49.5172 12.814 49.5172 15.028C49.5172 16.504 48.2032 18.466 45.1972 18.466ZM59.9517 7.72V18.25H57.5397V17.044C56.8737 17.926 55.8657 18.466 54.5157 18.466C51.9957 18.466 50.4657 16.828 50.4657 13.966V7.72H52.9317V13.714C52.9317 15.352 53.6517 16.36 55.1817 16.36C56.5317 16.36 57.5217 15.352 57.5217 13.498V7.72H59.9517ZM61.452 18.25V7.72H63.864V9.016C64.566 8.098 65.646 7.504 67.014 7.504C69.66 7.504 71.19 9.142 71.19 12.004V18.25H68.724V12.256C68.724 10.618 67.932 9.61 66.348 9.61C64.962 9.61 63.882 10.618 63.882 12.472V18.25H61.452ZM80.8765 18.07V16.846C80.1025 17.854 78.8605 18.466 77.4385 18.466C74.9005 18.466 72.2545 16.45 72.2545 12.994C72.2545 9.502 74.8105 7.504 77.4745 7.504C78.8605 7.504 80.0845 8.116 80.8585 9.07V7.72H83.2885V17.98C83.2885 20.932 81.3985 23.344 77.8525 23.344C75.1165 23.344 73.4065 22.066 72.4525 20.32L74.6125 19.006C75.3865 20.428 76.2145 21.112 77.8885 21.112C79.7245 21.112 80.8765 19.672 80.8765 18.07ZM77.8345 16.234C79.6525 16.234 80.9845 14.776 80.9845 12.958C80.9845 11.158 79.6525 9.718 77.8345 9.718C76.0345 9.718 74.6485 11.14 74.6485 12.958C74.6485 14.794 76.0345 16.234 77.8345 16.234ZM89.174 18.25V5.11H92.756C97.184 5.11 99.704 7.954 99.704 11.68C99.704 15.424 96.86 18.25 92.864 18.25H89.174ZM92.468 7.378H91.622V15.982H92.576C95.456 15.982 97.256 14.128 97.256 11.68C97.256 9.16 95.726 7.378 92.468 7.378ZM106.012 18.466C102.7 18.466 100.45 16.054 100.45 13.012C100.45 9.934 102.844 7.504 105.922 7.504C109.054 7.504 111.34 9.808 111.34 12.922V13.84H102.772C103.114 15.334 104.284 16.324 106.012 16.324C107.38 16.324 108.424 15.604 108.928 14.47L110.926 15.622C110.008 17.332 108.388 18.466 106.012 18.466ZM105.922 9.646C104.464 9.646 103.33 10.51 102.898 11.806H108.874C108.514 10.384 107.434 9.646 105.922 9.646ZM115.182 18.25L111.168 7.72H113.706L116.424 15.136L119.088 7.72H121.59L117.63 18.25H115.182ZM126.895 18.466C123.583 18.466 121.333 16.054 121.333 13.012C121.333 9.934 123.727 7.504 126.805 7.504C129.937 7.504 132.223 9.808 132.223 12.922V13.84H123.655C123.997 15.334 125.167 16.324 126.895 16.324C128.263 16.324 129.307 15.604 129.811 14.47L131.809 15.622C130.891 17.332 129.271 18.466 126.895 18.466ZM126.805 9.646C125.347 9.646 124.213 10.51 123.781 11.806H129.757C129.397 10.384 128.317 9.646 126.805 9.646ZM133.311 18.25V4.93H135.759V18.25H133.311ZM142.273 18.466C139.231 18.466 136.819 16.018 136.819 12.994C136.819 9.916 139.231 7.504 142.273 7.504C145.297 7.504 147.727 9.916 147.727 12.994C147.727 16.018 145.297 18.466 142.273 18.466ZM142.273 16.18C144.001 16.18 145.333 14.74 145.333 12.994C145.333 11.212 144.001 9.79 142.273 9.79C140.527 9.79 139.213 11.212 139.213 12.994C139.213 14.74 140.527 16.18 142.273 16.18ZM154.648 18.466C153.208 18.466 151.948 17.944 151.21 17.008V23.092H148.798V7.72H151.21V9.124C151.948 8.134 153.19 7.504 154.63 7.504C157.276 7.504 159.814 9.502 159.814 12.994C159.814 16.45 157.186 18.466 154.648 18.466ZM154.252 16.234C156.034 16.234 157.42 14.794 157.42 12.958C157.42 11.14 156.034 9.718 154.252 9.718C152.434 9.718 151.12 11.158 151.12 12.958C151.12 14.776 152.434 16.234 154.252 16.234ZM166.129 18.466C162.817 18.466 160.567 16.054 160.567 13.012C160.567 9.934 162.961 7.504 166.039 7.504C169.171 7.504 171.457 9.808 171.457 12.922V13.84H162.889C163.231 15.334 164.401 16.324 166.129 16.324C167.497 16.324 168.541 15.604 169.045 14.47L171.043 15.622C170.125 17.332 168.505 18.466 166.129 18.466ZM166.039 9.646C164.581 9.646 163.447 10.51 163.015 11.806H168.991C168.631 10.384 167.551 9.646 166.039 9.646ZM172.546 18.25V7.72H174.958V9.286C175.444 8.242 176.344 7.72 177.658 7.72C178.432 7.72 179.026 7.9 179.512 8.17L178.594 10.474C178.234 10.24 177.838 10.06 177.136 10.06C175.714 10.06 174.976 10.816 174.976 12.634V18.25H172.546Z" fill="black"/> </g> <defs> <clipPath id="clip0_1_13833"> <rect width="180" height="23.5" fill="white" transform="translate(0 0.25)"/> </clipPath> </defs> </svg> </div> <div class="header-breadcrumb web"> <i class="breadcrumb-close" data-close="breadcrumbFilter"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4.00017 4L16 15.9998" stroke="#1E1E1E" stroke-width="1.5"/> <path d="M4 15.9998L15.9998 4" stroke="#1E1E1E" stroke-width="1.5"/> </svg> </i> <div class="breadcrumb-link-group"> <div class="breadcrumb-link-text-area"> <span class="breadcrumb-link"> <a href="/one-ui-watch-tizen">One UI Watch for Tizen</a> </span> </div> </div> </div> </div> <div class="sdp-lnb-wrapper">  <div class="sdp-lnb-filter"> <div class="filter-input-group"> <svg class="filter-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 15H10H12" stroke="#1E1E1E" stroke-width="1.5"/> <path d="M4 10H10H16" stroke="#1E1E1E" stroke-width="1.5"/> <path d="M2 5H10H18" stroke="#1E1E1E" stroke-width="1.5"/> </svg> <input class="filter-input" type="text" placeholder="Filter" data-input="filter" /> <svg class="filter-close" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" data-remove="filterInput"> <path d="M4.00017 4L16 15.9998" stroke="#1E1E1E" stroke-width="1.5"/> <path d="M4 15.9998L15.9998 4" stroke="#1E1E1E" stroke-width="1.5"/> </svg> </div> </div>  <div class="sdp-lnb-menu"> <ul class="menu-accordion depth01" data-target="lnbAccordion"> <li> <div class="menu-accordion-header selected"> <p> <a href='/one-ui-watch-tizen/principle.html' onclick="handleLink(event, /one-ui-watch-tizen/principle.html) class="nav-link selected none-child"> Design Principle </a> </p> </div> </li> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui-watch-tizen/wearables/overview.html' onclick="handleLink(event, /one-ui-watch-tizen/wearables/overview.html) class="nav-link"> <span>Design for Wearables</span> </a> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui-watch-tizen/wearables/timely-info.html' class="nav-link none-child"> <span>Provide timely information when users need it</span> </a> </li> <li> <a href='/one-ui-watch-tizen/wearables/bezel-controls.html' class="nav-link none-child"> <span>Provide a precise and unique control with the bezel</span> </a> </li> <li> <a href='/one-ui-watch-tizen/wearables/clear-navigation.html' class="nav-link none-child"> <span>Provide clear navigation to find their way</span> </a> </li> <li> <a href='/one-ui-watch-tizen/wearables/diverse-interactions.html' class="nav-link none-child"> <span>Improve the user experience through the watch's diverse interactions</span> </a> </li> <li> <a href='/one-ui-watch-tizen/wearables/lasting-impression.html' class="nav-link none-child"> <span>Create a lasting impression with your designs</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui-watch-tizen/circular-ux.html' onclick="handleLink(event, /one-ui-watch-tizen/circular-ux.html) class="nav-link none-child"> Circular UX </a> </p> </div> </li> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui-watch-tizen/bezel-less-ux.html' onclick="handleLink(event, /one-ui-watch-tizen/bezel-less-ux.html) class="nav-link none-child"> Rotating bezel, touch bezel, and bezel-less UX </a> </p> </div> </li> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui-watch-tizen/watch-face/overview.html' onclick="handleLink(event, /one-ui-watch-tizen/watch-face/overview.html) class="nav-link"> <span>Watch Face</span> </a> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui-watch-tizen/watch-face/design.html' class="nav-link none-child"> <span>Design Types of Watch Faces</span> </a> </li> <li> <a href='/one-ui-watch-tizen/watch-face/states.html' class="nav-link none-child"> <span>Watch Face States</span> </a> </li> <li> <a href='/one-ui-watch-tizen/watch-face/complications.html' class="nav-link none-child"> <span>Complications</span> </a> </li> <li> <a href='/one-ui-watch-tizen/watch-face/system-icons.html' class="nav-link none-child"> <span>System Icons</span> </a> </li> <li> <a href='/one-ui-watch-tizen/watch-face/hourly-chime.html' class="nav-link none-child"> <span>Hourly Chime</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui-watch-tizen/structure/overview.html' onclick="handleLink(event, /one-ui-watch-tizen/structure/overview.html) class="nav-link"> <span>Structure</span> </a> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui-watch-tizen/structure/watch-faces.html' class="nav-link none-child"> <span>Watch Faces</span> </a> </li> <li> <a href='/one-ui-watch-tizen/structure/widgets.html' class="nav-link none-child"> <span>Widgets</span> </a> </li> <li> <a href='/one-ui-watch-tizen/structure/notifications.html' class="nav-link none-child"> <span>Notifications</span> </a> </li> <li> <a href='/one-ui-watch-tizen/structure/quick-panel.html' class="nav-link none-child"> <span>Quick Panel</span> </a> </li> <li> <a href='/one-ui-watch-tizen/structure/apps.html' class="nav-link none-child"> <span>Apps</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui-watch-tizen/navigation/overview.html' onclick="handleLink(event, /one-ui-watch-tizen/navigation/overview.html) class="nav-link"> <span>Navigation</span> </a> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui-watch-tizen/navigation/flow.html' class="nav-link none-child"> <span>Navigation Flow</span> </a> </li> <li> <a href='/one-ui-watch-tizen/navigation/screen-views.html' class="nav-link none-child"> <span>Screen Views</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui-watch-tizen/interaction/overview.html' onclick="handleLink(event, /one-ui-watch-tizen/interaction/overview.html) class="nav-link"> <span>Interaction</span> </a> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui-watch-tizen/interaction/touch.html' class="nav-link none-child"> <span>Touch</span> </a> </li> <li> <a href='/one-ui-watch-tizen/interaction/bezel.html' class="nav-link none-child"> <span>Bezel Interactions</span> </a> </li> <li> <a href='/one-ui-watch-tizen/interaction/gesture.html' class="nav-link none-child"> <span>Gesture Interactions</span> </a> </li> <li> <a href='/one-ui-watch-tizen/interaction/voice.html' class="nav-link none-child"> <span>Voice interactions</span> </a> </li> <li> <a href='/one-ui-watch-tizen/interaction/feedback.html' class="nav-link none-child"> <span>Feedback</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui-watch-tizen/visual/overview.html' onclick="handleLink(event, /one-ui-watch-tizen/visual/overview.html) class="nav-link"> <span>Visual Design</span> </a> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui-watch-tizen/visual/colors.html' class="nav-link none-child"> <span>Colors</span> </a> </li> <li> <a href='/one-ui-watch-tizen/visual/iconography.html' class="nav-link none-child"> <span>Iconography</span> </a> </li> <li> <a href='/one-ui-watch-tizen/visual/typography.html' class="nav-link none-child"> <span>Typography</span> </a> </li> <li> <a href='/one-ui-watch-tizen/visual/animation.html' class="nav-link none-child"> <span>Animation</span> </a> </li> <li> <a href='/one-ui-watch-tizen/visual/layout.html' class="nav-link none-child"> <span>Layout patterns</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui-watch-tizen/patterns/overview.html' onclick="handleLink(event, /one-ui-watch-tizen/patterns/overview.html) class="nav-link"> <span>Patterns</span> </a> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui-watch-tizen/patterns/app-start-process.html' class="nav-link none-child"> <span>Application Start Process</span> </a> </li> <li> <a href='/one-ui-watch-tizen/patterns/reserved-app.html' class="nav-link none-child"> <span>Reseved app</span> </a> </li> <li> <a href='/one-ui-watch-tizen/patterns/continue-activities-paired-device.html' class="nav-link none-child"> <span>Continuing Activities on a paired device</span> </a> </li> <li> <a href='/one-ui-watch-tizen/patterns/delete.html' class="nav-link none-child"> <span>Delete</span> </a> </li> <li> <a href='/one-ui-watch-tizen/patterns/empty-states.html' class="nav-link none-child"> <span>Empty States</span> </a> </li> <li> <a href='/one-ui-watch-tizen/patterns/errors.html' class="nav-link none-child"> <span>Errors</span> </a> </li> <li> <a href='/one-ui-watch-tizen/patterns/more-options.html' class="nav-link none-child"> <span>More Options</span> </a> </li> <li> <a href='/one-ui-watch-tizen/patterns/overscroll.html' class="nav-link none-child"> <span>Overscroll</span> </a> </li> <li> <a href='/one-ui-watch-tizen/patterns/permissions.html' class="nav-link none-child"> <span>Permissions</span> </a> </li> <li> <a href='/one-ui-watch-tizen/patterns/input.html' class="nav-link none-child"> <span>Input</span> </a> </li> <li> <a href='/one-ui-watch-tizen/patterns/search.html' class="nav-link none-child"> <span>Search</span> </a> </li> <li> <a href='/one-ui-watch-tizen/patterns/chooser.html' class="nav-link none-child"> <span>Chooser</span> </a> </li> <li> <a href='/one-ui-watch-tizen/patterns/select-mode.html' class="nav-link none-child"> <span>Select Mode</span> </a> </li> <li> <a href='/one-ui-watch-tizen/patterns/share.html' class="nav-link none-child"> <span>Share</span> </a> </li> <li> <a href='/one-ui-watch-tizen/patterns/refresh.html' class="nav-link none-child"> <span>Refresh</span> </a> </li> <li> <a href='/one-ui-watch-tizen/patterns/volume-controls.html' class="nav-link none-child"> <span>Volume Controls</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui-watch-tizen/ui-components/overview.html' onclick="handleLink(event, /one-ui-watch-tizen/ui-components/overview.html) class="nav-link"> <span>UI Components</span> </a> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui-watch-tizen/ui-components/pages.html' class="nav-link none-child"> <span>Pages</span> </a> </li> <li> <a href='/one-ui-watch-tizen/ui-components/list.html' class="nav-link none-child"> <span>List</span> </a> </li> <li> <a href='/one-ui-watch-tizen/ui-components/dialogs.html' class="nav-link none-child"> <span>Dialogs</span> </a> </li> <li> <a href='/one-ui-watch-tizen/ui-components/toasts.html' class="nav-link none-child"> <span>Toasts</span> </a> </li> <li> <a href='/one-ui-watch-tizen/ui-components/buttons.html' class="nav-link none-child"> <span>Buttons</span> </a> </li> <li> <a href='/one-ui-watch-tizen/ui-components/rotary-selectors.html' class="nav-link none-child"> <span>Rotary selectors</span> </a> </li> <li> <a href='/one-ui-watch-tizen/ui-components/text-fields.html' class="nav-link none-child"> <span>Text fields</span> </a> </li> <li> <a href='/one-ui-watch-tizen/ui-components/pickers.html' class="nav-link none-child"> <span>Pickers</span> </a> </li> <li> <a href='/one-ui-watch-tizen/ui-components/sliders.html' class="nav-link none-child"> <span>Sliders</span> </a> </li> <li> <a href='/one-ui-watch-tizen/ui-components/selection-controls.html' class="nav-link none-child"> <span>Selection Controls</span> </a> </li> <li> <a href='/one-ui-watch-tizen/ui-components/progress.html' class="nav-link none-child"> <span>Progress and Activity Indicators</span> </a> </li> <li> <a href='/one-ui-watch-tizen/ui-components/page-indicators.html' class="nav-link none-child"> <span>Page Indicators</span> </a> </li> <li> <a href='/one-ui-watch-tizen/ui-components/scroll-bars.html' class="nav-link none-child"> <span>Scroll Bars</span> </a> </li> <li> <a href='/one-ui-watch-tizen/ui-components/assist-panel.html' class="nav-link none-child"> <span>Assist Panel</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui-watch-tizen/writing-style.html' onclick="handleLink(event, /one-ui-watch-tizen/writing-style.html) class="nav-link none-child"> Writing Style </a> </p> </div> </li> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui-watch-tizen/internationalization.html' onclick="handleLink(event, /one-ui-watch-tizen/internationalization.html) class="nav-link none-child"> Internationalization </a> </p> </div> </li> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui-watch-tizen/accessibility/overview.html' onclick="handleLink(event, /one-ui-watch-tizen/accessibility/overview.html) class="nav-link"> <span>Accessibility</span> </a> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui-watch-tizen/accessibility/voice-assistant.html' class="nav-link none-child"> <span>Voice Assistant</span> </a> </li> <li> <a href='/one-ui-watch-tizen/accessibility/gray-neg-color.html' class="nav-link none-child"> <span>Grayscale / Negative color</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui-watch-tizen/resource.html' onclick="handleLink(event, /one-ui-watch-tizen/resource.html) class="nav-link none-child"> Design Resource </a> </p> </div> </li> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui-watch-tizen/asset-creator.html' onclick="handleLink(event, /one-ui-watch-tizen/asset-creator.html) class="nav-link none-child"> Asset Creator </a> </p> </div> </li> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui-watch-tizen/lifestyle-photo-assets.html' onclick="handleLink(event, /one-ui-watch-tizen/lifestyle-photo-assets.html) class="nav-link"> <span>Lifestyle Photo Assets</span> </a> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui-watch/lifestyle-photo-assets/galaxy-watch5.html' class="nav-link none-child"> <span>Galaxy Watch5</span> </a> </li> <li> <a href='/one-ui-watch/lifestyle-photo-assets/galaxy-watch4.html' class="nav-link none-child"> <span>Galaxy Watch4</span> </a> </li> <li> <a href='/one-ui-watch-tizen/lifestyle-photo-assets/galaxy-watch3.html' class="nav-link none-child"> <span>Galaxy Watch3</span> </a> </li> <li> <a href='/one-ui-watch-tizen/lifestyle-photo-assets/galaxy-watch-active2.html' class="nav-link none-child"> <span>Galaxy Watch Active2</span> </a> </li> <li> <a href='/one-ui-watch-tizen/lifestyle-photo-assets/galaxy-watch.html' class="nav-link none-child"> <span>Galaxy Watch</span> </a> </li> <li> <a href='/one-ui-watch-tizen/lifestyle-photo-assets/gear-s3.html' class="nav-link none-child"> <span>Gear S3</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <a href='https://developer.samsung.com/galaxy-watch-tizen/studio/overview.html' target=_blank onclick="handleLink(event, https://developer.samsung.com/galaxy-watch-tizen/studio/overview.html) class="nav-link none-child"> Galaxy Watch Studio for Tizen </a> </p> </div> </li> </ul> </div> </div> </aside> <main role="main" id="el-main-container" class="main-container has-toc"> <div class="inner-container col"> <div class="inner-sec mkdown-docs"> <nav class="nav-breadcrumb" aria-label="breadcrumb"> <ol id="inner-el-breadcrumb" class="breadcrumb"> <li class="breadcrumb-item mobile-show"> <a class="item-text has-link" href="/one-ui-watch-tizen"> One UI Watch for Tizen </a> </li> </ol> </nav> <p class="mk-wall-cta" > </p> <html><head></head><body><span style="background-color: #ffdce0"> <span style="color:red"> DISTRIBUTION OF TIZEN-BASED WATCH APPS HAS BEEN DISCONTINUED </span> </span> <h1 id="Design-Principles">Design Principles</h1> <h2 id="Overview">Overview</h2> <p>Watch design principles are based on how users wear watches. Understanding the basic approaches to design for the watch鈥檚 compact circular display will help you deliver a better user experience for your app.</p> <h2 id="Scannable">Scannable</h2> <p>The watch is worn on the wrist and its interactions with users take place in a split second. So, apps using the watch鈥檚 small circular display should show information at a glance. Design your apps to be easily scannable and incorporate the principles of scannability to ensure smooth user interactions.</p> <h3>Focus on a central theme</h3> <p>Your app will have a greater impact when you focus on a simple, core idea. Place the main content in the center of the screen in a font large enough to draw the user鈥檚 attention. Excessive detail or features detract from the central theme, so keep it simple and streamline the flow between screens. Increase your app鈥檚 scannability by allowing tasks to be completed in only a few steps.</p> <p><img src="https://d3unf4s5rp9dfh.cloudfront.net/GlxyWatchDesign_doc/DesignPrinciple_1.1.1.png" alt="The main content is emphasized in the middle of the screen." class="img-fluid"></p> <h3>Design your screens to be readable</h3> <p>Graphic elements enhance the visibility of your main idea. They can also be more effective than several lines of text when conveying meaning. When you need to use text, select a font size that鈥檚 easy to read. You can also pick colors that contrast with the background to emphasize key information, or use dark-colored themes to make your content easy to read when outdoors. Refer to <a href="/galaxy-watch-design/visual/overview.html">Visual Design</a> for more details.</p> <p><img src="https://d3unf4s5rp9dfh.cloudfront.net/GlxyWatchDesign_doc/DesignPrinciple_1.1.2.png" alt="Graphical elements present your main message clearly and succinctly." class="img-fluid"></p> <h2 id="Easy-to-follow">Easy to follow</h2> <p>Users should be able to control the watch quickly and conveniently. Avoid making your design complicated for users to complete their task. Consistent, meaningful, and intuitive designs help users navigate pages and orient themselves within your app.</p> <h3>Suggest interactions intuitively</h3> <p>Intuitive and meaningful connections between interactions and components on the screen can help users better understand the information and its context. For example, bezel controls should suggest how users use the bezel to navigate and interact with your app.</p> <p><img src="https://d3unf4s5rp9dfh.cloudfront.net/GlxyWatchDesign_doc/DesignPrinciple_1.2.1.png" alt="The interface design suggests how the user should utilize the bezel." class="img-fluid"></p> <h3>Keep a consistent theme</h3> <p>Deliver a consistent user experience throughout your app by maintaining visual continuity. Your screens should have a consistent layout, brand color, and font. Give your app one common theme that represents the content it provides.</p> <p><img src="https://d3unf4s5rp9dfh.cloudfront.net/GlxyWatchDesign_doc/DesignPrinciple_1.2.2.png" alt="A consistent theme across all screens ties your entire app together." class="img-fluid"></p> <h2 id="Responsive">Responsive</h2> <p>The watch should respond immediately to user input. Responsive designs give users confidence in the watch and a greater sense of control.</p> <h3>Provide natural and responsive feedback</h3> <p>Your app should provide immediate feedback as a natural response to user input by using visual, audible, and haptic feedback. Avoid nonessential screens that require additional user interactions to complete tasks.</p> <h3>Make your components easy to use</h3> <p>Adequately sized on-screen UI elements make interacting with your app easier. The watch can be difficult to use if its buttons are too small or components take up too much screen space.</p> <p><img src="https://d3unf4s5rp9dfh.cloudfront.net/GlxyWatchDesign_doc/DesignPrinciple_1.3.2.png" alt="Components are relatively large so users can touch them easily." class="img-fluid"></p> <h2 id="Desirable">Desirable</h2> <p>It鈥檚 not enough to simply make an app that works. Users will only download your app if the aesthetic aspects of your design are desirable, and if the user benefits are clear.</p> <h3>Concentrate on benefits, not features</h3> <p>Users will decide whether or not to download your app by asking themselves how it will improve or benefit their lifestyle. Keep this in mind when you are designing your app. Brainstorm a range of user scenarios and be clear on how your app will be beneficial in each situation.</p> <h3>Design stylish screens</h3> <p>The watch is a fashion accessory as well as a smartwatch. Stylish designs that incorporate typographic and graphical elements for decorative purposes will make your app more attractive.</p> <p><img src="https://d3unf4s5rp9dfh.cloudfront.net/GlxyWatchDesign_doc/DesignPrinciple_1.4.2.png" alt="A well-designed watch face works as a fashion item." class="img-fluid"></p> </body></html> </div> <aside class="etc-aside">  <a href="#app" class="btn-goto-top no-ga"> <span class="sr-only">top of page</span> <span class="icon-top align-middle icon-size-2"> <i class="s-ico s-ico-arrow-top-white"></i> </span> </a> </aside> </div> </main> </div> </div> <footer class="sdp-footer" translate="no" data-component="true"> <div class="sdp-ft-wrap web-d-none"> <a class="navbar-brand" href="/">Samsung Developer</a> </div> <div class="inner-wrap"> <div class="sdp-sitemap"> <div class="sdp-ft-wrap doc-d-none"> <a class="navbar-brand" href="/">Samsung Developer</a> </div> <div class="sdp-ft-wrap"> <div class="ft-header"> <span>Quick Link</span> <button class="toggle-submenu"></button> </div> <div class="ft-depth2-wrap"> <div class="ft-depth2-inner"> <ul class="nav ft-menu-list"> <li class="menu-item"> <a class="item-link" href="/android-usb-driver"><span>Android USB Driver</span></a> </li> <li class="menu-item"> <a class="item-link" href="/codelab"><span>Code Lab</span></a> </li> <li class="menu-item"> <a class="item-link" href="/galaxy-emulator-skin"><span>Galaxy Emulator Skin</span></a> </li> <li class="menu-item"> <a class="item-link" href="/foldables-and-largescreens"><span>Foldables and Large Screens</span></a> </li> </ul> <ul class="nav ft-menu-list"> <li class="menu-item"> <a class="item-link" href="/remote-test-lab"><span>Remote Test Lab</span></a> </li> <li class="menu-item"> <a class="item-link" href="/dev-support"><span>Dev Support</span></a> </li> </ul> </div> </div> </div> <div class="sdp-ft-wrap"> <div class="ft-header"> <span>Family Site</span> <button class="toggle-submenu"></button> </div> <div class="ft-depth2-wrap"> <div class="ft-depth2-inner"> <ul class="nav ft-menu-list"> <li class="menu-item"> <a class="item-link" target="_blank" href="https://bixbydevelopers.com"><span>Bixby</span></a> </li> <li class="menu-item"> <a class="item-link" target="_blank" href="https://developer.samsungknox.com"><span>Knox</span></a> </li> <li class="menu-item"> <a class="item-link" target="_blank" href="https://developer.smartthings.com"><span>SmartThings</span></a> </li> <li class="menu-item"> <a class="item-link" target="_blank" href="https://docs.tizen.org"><span>Tizen</span></a> </li> </ul> <ul class="nav ft-menu-list"> <li class="menu-item"> <a class="item-link" target="_blank" href="https://research.samsung.com"><span>Samsung Research</span></a> </li> <li class="menu-item"> <a class="item-link" target="_blank" href="https://opensource.samsung.com/main"><span>Samsung Open Source</span></a> </li> <li class="menu-item"> <a class="item-link" target="_blank" href="https://www.europe-samsung.com/smsdev/Home/Index"><span>Samsung Dev Spain</span></a> </li> </ul> </div> </div> </div> <div class="sdp-ft-wrap sdp-ft-wrap-w-half"> <div class="ft-header"> <span>Legal</span> <button class="toggle-submenu"></button> </div> <div class="ft-depth2-wrap"> <div class="ft-depth2-inner"> <ul class="nav ft-menu-list"> <li class="menu-item ft-depth3-inner"> <div class="menu-item-button"> <span class="item-link"><span>Terms</span></span> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M1.71484 3.85547L6.00056 8.14118L10.2863 3.85547" stroke="currentColor" stroke-width="1.02857"></path> </svg> </div> <ul class="footer-dropdown-list"> <li><a href="/terms">Samsung Developer Terms</a></li> <li><a href="/wallet/terms?type=tos">Samsung Wallet Partner Terms</a></li> <li><a href="/pay/terms?type=tos">Samsung Pay Partner Terms</a></li> </ul> </li> <li class="menu-item ft-depth3-inner"> <div class="menu-item-button"> <span class="item-link"><span>Privacy</span></span> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M1.71484 3.85547L6.00056 8.14118L10.2863 3.85547" stroke="currentColor" stroke-width="1.02857"></path> </svg> </div> <ul class="footer-dropdown-list"> <li><a href="/privacy">Samsung Developer Privacy Policy</a></li> <li><a href="/wallet/terms?type=privacy">Samsung Wallet Partner Privacy Policy</a></li> <li><a href="/pay/terms?type=privacy">Samsung Pay Partner Privacy Policy</a></li> </ul> </li> <li class="menu-item ft-depth3-inner"> <div class="menu-item-button"> <a class="item-link" href="/open-source"><span>Open Source License</span></a> </div> </li> <li class="menu-item ft-depth3-inner"> <div class="menu-item-button"> <span class="item-link"><span>Cookie</span></span> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M1.71484 3.85547L6.00056 8.14118L10.2863 3.85547" stroke="currentColor" stroke-width="1.02857"></path> </svg> </div> <ul class="footer-dropdown-list"> <li><a href="/cookie-policy">Samsung Developer Cookie Policy</a></li> <li><a href="/wallet/terms?type=cookie">Samsung Wallet Partner Cookie Policy</a></li> <li><a href="/pay/terms?type=cookie">Samsung Pay Partner Cookie Policy</a></li> </ul> </li> </ul> </div> </div> </div>  <div class="sdp-ft-wrap li-mobile"> <div class="ft-header"> <span>Social Communications</span> <button class="toggle-submenu"></button> </div> <div class="ft-depth2-wrap"> <div class="ft-depth2-inner"> <ul class="nav ft-menu-list ft-sns-list"> <li class="menu-item"> <a class="item-link" href="https://www.facebook.com/samsungdev"><span>Facebook</span></a> </li> <li class="menu-item"> <a class="item-link" href="https://instagram.com/samsung_dev"><span>Instagram</span></a> </li> <li class="menu-item"> <a class="item-link" href="https://twitter.com/samsung_dev"><span>Twitter</span></a> </li> <li class="menu-item"> <a class="item-link" href="https://www.youtube.com/samsungdevelopers"><span>YouTube</span></a> </li> <li class="menu-item"> <a class="item-link" href="/feed"><span>Rss</span></a> </li> <li class="menu-item"> <a class="item-link" href="https://www.linkedin.com/company/samsungdevelopers"><span>Linkedin</span></a> </li> </ul> </div> </div> </div> <div class="sdp-ft-wrap sdp-ft-wrap-w-half"> <div class="ft-header"> <span></span> <button class="toggle-submenu"></button> </div> <div class="ft-depth2-wrap"> <div class="ft-depth2-inner"> <ul class="nav ft-menu-list system-list"> <li class="menu-item"> <a class="item-link" href="/system-status"><span>System Status</span></a> </li> <li class="menu-item"> <a class="item-link" href="/sitemap"><span>Site Map</span></a> </li> </ul> </div> </div> </div> </div> <div class="content"> <ul class="nav ft-menu-list system-list"> <li class="menu-item"> <a class="item-link" href="/system-status"><span>System Status</span></a> </li> <li class="menu-item"> <a class="item-link" href="/sitemap"><span>Site Map</span></a> </li> </ul> <ul class="nav ft-sns-list"> <li class="menu-item"><a class="item-link" href="https://www.facebook.com/samsungdev" target="_blank"><i class="s-ico s-ico-facebook"></i><span class="sr-only">facebook</span></a></li> <li class="menu-item"><a class="item-link" href="https://instagram.com/samsung_dev" target="_blank"><i class="s-ico s-ico-instagram"></i><span class="sr-only">instagram</span></a></li> <li class="menu-item"><a class="item-link" href="https://twitter.com/samsung_dev" target="_blank"><i class="s-ico s-ico-twitter"></i><span class="sr-only">twitter</span></a></li> <li class="menu-item"><a class="item-link" href="https://www.youtube.com/samsungdevelopers" target="_blank"><i class="s-ico s-ico-youtube"></i><span class="sr-only">youtube</span></a></li> <li class="menu-item"><a class="item-link" href="/feed" target="_blank"><i class="s-ico s-ico-rss"></i><span class="sr-only">rss</span></a></li> <li class="menu-item"><a class="item-link" href="https://www.linkedin.com/company/samsungdevelopers" target="_blank"><i class="s-ico s-ico-linkedin"></i><span class="sr-only">linkedin</span></a> </li> </ul> <p class="copyright">Copyright 漏 2024 SAMSUNG. All rights reserved.</p> </div> </div> </footer> </div> <div id="el-sdp-popup-cookies-wrapper" attr-page-id="cookie-policy-popup">  <article id="el-sdp-popup-cookie" class="base-modal cookie-manager-modal page-modal" data-target="cookieManagerModal"> <section id="modal-main-menu" class="base-modal-dialog"> <div class="base-modal-frame"> <i class="base-modal-close close-button" role="button" data-close="cookieManagerModal"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M1 1L15 15" stroke="black" stroke-width="1.6"/> <path d="M15 1L1 15" stroke="black" stroke-width="1.6"/> </svg> </i> <div class="base-modal-body"> <div class="base-text-group"> <h1 class="text-group-title"> Manage Your Cookies </h1> <p class="text-group-text"> We use cookies to improve your experience on our website and to show you relevant advertising. Manage you settings for our cookies below.</p> </div> <div class="base-section"> <div class="base-section-body"> <div class="base-section-panel"> <h2 class="base-section-title">Essential Cookies</h2> <p class="base-section-text"> These cookies are essential as they enable you to move around the website. This category cannot be disabled.</p> <div class="cookie-manager-cta"> <button type="button" class="cookie-manager-text-button" data-target="cookieButton"> <span>View Cookies</span> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"> <path d="M2 4.5L7 9.5L12 4.5" stroke="#363636" stroke-width="1.2"/> </svg> </button> </div> <div class="cookie-manager-table" data-target="cookieTable"> <dl> <dt>Company</dt> <dt>Domain</dt> <dd>Samsung Electronics</dd> <dd>.samsungdeveloperconference.com</dd> </dl> </div> </div> </div> </div> <div class="base-section"> <div class="base-section-body"> <div class="base-section-panel"> <h2 class="base-section-title">Analytical/Performance Cookies</h2> <p class="base-section-text"> These cookies collect information about how you use our website. for example which pages you visit most often. All information these cookies collect is used to improve how the website works.</p> <div class="cookie-manager-cta"> <button type="button" class="cookie-manager-text-button" data-target="cookieButton"> <span>View Cookies</span> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"> <path d="M2 4.5L7 9.5L12 4.5" stroke="#363636" stroke-width="1.2"/> </svg> </button> <div class="base-sort" id="performance-select" value="performance"> <label> <input type="radio" name="sort1" hidden checked /> <span class="base-sort-label">NO</span> </label> <label> <input type="radio" name="sort1" hidden /> <span class="base-sort-label">YES</span> </label> </div> </div> <div class="cookie-manager-table" data-target="cookieTable"> <dl> <dt>Company</dt> <dt>Domain</dt> <dd>LinkedIn</dd> <dd>.linkedin.com</dd> <dd>Meta (formerly Facebook)</dd> <dd>.samsungdeveloperconference.com</dd> <dd>Google Inc.</dd> <dd>.samsungdeveloperconference.com</dd> </dl> </div> </div> </div> </div> <div class="base-section"> <div class="base-section-body"> <div class="base-section-panel"> <h2 class="base-section-title">Functionality Cookies</h2> <p class="base-section-text"> These cookies allow our website to remember choices you make (such as your user name, language or the region your are in) and tailor the website to provide enhanced features and content for you.</p> <div class="cookie-manager-cta"> <button type="button" class="cookie-manager-text-button" data-target="cookieButton"> <span>View Cookies</span> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"> <path d="M2 4.5L7 9.5L12 4.5" stroke="#363636" stroke-width="1.2"/> </svg> </button> <div class="base-sort" id="functionality-select" value="functionality"> <label> <input type="radio" name="sort2" hidden checked /> <span class="base-sort-label">NO</span> </label> <label> <input type="radio" name="sort2" hidden /> <span class="base-sort-label">YES</span> </label> </div> </div> <div class="cookie-manager-table" data-target="cookieTable"> <dl> <dt>Company</dt> <dt>Domain</dt> <dd>LinkedIn</dd> <dd>.ads.linkedin.com, .linkedin.com</dd> </dl> </div> </div> </div> </div> <div class="base-section"> <div class="base-section-body"> <div class="base-section-panel"> <h2 class="base-section-title">Advertising Cookies</h2> <p class="base-section-text"> These cookies gather information about your browser habits. They remember that you've visited our website and share this information with other organizations such as advertisers.</p> <div class="cookie-manager-cta"> <button type="button" class="cookie-manager-text-button" data-target="cookieButton"> <span>View Cookies</span> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"> <path d="M2 4.5L7 9.5L12 4.5" stroke="#363636" stroke-width="1.2"/> </svg> </button> <div class="base-sort" id="advert-select" value="advert"> <label> <input type="radio" name="sort3" hidden checked /> <span class="base-sort-label">NO</span> </label> <label> <input type="radio" name="sort3" hidden /> <span class="base-sort-label">YES</span> </label> </div> </div> <div class="cookie-manager-table" data-target="cookieTable"> <dl> <dt>Company</dt> <dt>Domain</dt> <dd>LinkedIn</dd> <dd>.linkedin.com</dd> <dd>Meta (formerly Facebook)</dd> <dd>.samsungdeveloperconference.com</dd> <dd>Google Inc.</dd> <dd>.samsungdeveloperconference.com</dd> </dl> </div> </div> </div> </div> </div> <footer class="base-modal-footer"> <button type="button" class="base-button submit-button"> <span>Save Preference</span> </button> </footer> </div> </section> </article>  <article id="el-sdp-popup-submitted" class="base-modal alert" data-target="cookie-submit-popup"> <section class="base-modal-dialog"> <div class="base-modal-frame"> <i class="base-modal-close" role="button" data-close="cookie-submit-popup"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M1 1L15 15" stroke="black" stroke-width="1.6"/> <path d="M15 1L1 15" stroke="black" stroke-width="1.6"/> </svg> </i> <div class="base-modal-body"> <div class="base-text-group"> <h1 class="text-group-title"> Preferences Submitted </h1> <p class="text-group-text"> You have successfully updated your cookie preferences. </p> </div> </div> <footer class="base-modal-footer"> <button type="button" class="base-button" data-close="cookie-submit-popup"> <span>Close</span> </button> </footer> </div> </section> </article> </div> </div> <script type="text/javascript" src="https://d3unf4s5rp9dfh.cloudfront.net/public/d5df079/js/sdp.common.min.js"></script> <script type="text/javascript" src="https://d3unf4s5rp9dfh.cloudfront.net/public/d5df079/js/sdp.ui.min.js"></script> <script type="text/javascript" src="https://d3unf4s5rp9dfh.cloudfront.net/public/d5df079/js/sdp.utils.min.js"></script> <script type="text/javascript" src="https://d3unf4s5rp9dfh.cloudfront.net/public/d5df079/js/sdp.helpers.min.js"></script>     </body> </html>

CINXE.COM

Design Principles | Samsung Developer