dwave-examples · k8culver · Feb 13, 2026 · Nov 13, 2025 · Nov 13, 2025 · Nov 13, 2025
diff --git a/app.py b/app.py
@@ -52,7 +52,7 @@
 
 app.config.suppress_callback_exceptions = True
 
-app.index_string = '''
+app.index_string = """
 <!DOCTYPE html>
 <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
     <head>
@@ -71,7 +71,7 @@
         </footer>
     </body>
 </html>
-'''
+"""
 
 # Parse debug argument
 parser = argparse.ArgumentParser(description="Dash debug setting.")

diff --git a/assets/__demo_variables.css b/assets/__demo_variables.css
@@ -26,21 +26,24 @@ Dash reads all css files contained in `/assets/` so no imports are necessary.
     --blue-bright: #03B8FF;
     --blue-light: #2A7DE1;
     --blue-dark: #074C91;
-    --red-light: #C70039;
-    --red-dark: #900C3F;
+    --blue-darker: #2d4376;;
+    --blue-darkest: #202239;
+    --red-light: #f57677;
+    --red-dark: #aa3a3c;
     --orange: #FF7006;
-    --teal-light: #06ECDC;
+    --teal-light: #06ecdc;
+    --teal: #17bebb;
     --teal-dark: #17BEBB;
     --teal-darker: #008C82;
-    --grey-lighter: #EEEEEE;
-    --grey-light: #DDDDDD;
+    --grey-lighter: #f5f7fb;
+    --grey-light: #DBDBDB;
     --grey: #AAAAAA;
     --grey-medium: #737373;
     --grey-dark: #222222;
     --box-shadow: 0 0 1rem rgba(66, 82, 121, 0.2);
     --font: "proxima-nova", "Helvetica Neue", sans-serif;
-    --banner-height: 3.5rem;
+    --banner-height: 6.5rem;
     --left-col-width: 26.25rem;
     --problem-details-height: 11.25rem;
-    /*** Add new variables here ***/
+    --title-section-height: 13.5rem;
 }
diff --git a/assets/__style_guide.css b/assets/__style_guide.css
@@ -21,8 +21,7 @@ limitations under the License.
 }
 
 body {
-    background-color: #f9f9f9;
-    color: var(--grey-dark);
+    color: var(--grey-darkest);
     font-size: 1.125rem;
     line-height: 1.5rem;
     margin: 0;
@@ -31,17 +30,19 @@ body {
 h1, h2, h3, h4, h5, h6, td, th,
 span, a, p, label, button, input {
     font-family: var(--font);
+    color: var(--blue-darkest);
 }
 
 h1, h2, h3, h4, h5, h6 {
-    color: var(--blue-dark);
-    font-weight: 400;
+    font-weight: 600;
+    margin-top: 0;
 }
 
 h1 {
     font-size: 2.5rem;
     line-height: 3rem;
     margin-bottom: 1rem;
+    font-weight: 400;
 }
 
 h2 {
@@ -62,6 +63,8 @@ h5 {
     font-size: 1.125rem;
     margin: 1rem 0;
     font-weight: 600;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
 }
 
 label {
@@ -79,19 +82,29 @@ hr {
 table {
     margin-bottom: 1.25rem;
     font-size: 1rem;
-    border: 1px solid var(--grey-light);
     border-collapse: collapse;
+    border: 1px solid var(--grey-light);
+}
+
+thead {
+    border-bottom: 1px solid var(--grey-light);
+    font-weight: 600;
+    background-color: var(--blue-darker);
+}
+
+tfoot {
+    border-top: 1px solid var(--grey-light);
+    font-weight: 600;
 }
 
 th {
     font-weight: 600;
+    color: white;
+    padding: 0.5rem;
 }
 
-th, td {
-    color: var(--grey-dark);
+td {
     padding: 0.25rem 0.5rem;
-    border-right: 1px solid var(--grey-light);
-    border-bottom: 1px solid var(--grey-light);
 }
 
 th:first-child, td:first-child {
@@ -104,34 +117,33 @@ th:last-child, td:last-child {
 
 input[type="checkbox"],
 input[type="radio"] {
-    accent-color: var(--blue-dark);
-    margin: 0 0.6rem 0 0;
+    accent-color: var(--blue-darker);
+    margin: 0 0.5rem 0 0;
 }
 
 .display-none {
     display: none !important;
 }
 
 #app-container {
-    min-width: 62.5rem;
     height: 100vh;
     display: flex;
     flex-direction: column;
 }
 
 .banner {
     height: var(--banner-height);
-    box-sizing: border-box;
-    background-color: var(--blue-dark);
-    padding: 1rem 2rem;
+    background-color: #12131f;
+    padding: 0 2rem;
+    border-bottom: 2px solid var(--teal);
 
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 
 .banner img {
-    height: 100%;
+    height: 1rem;
 }
 
 .columns-main {
@@ -141,17 +153,45 @@ input[type="radio"] {
 
 .left-column {
     display: flex;
-    height: calc(100vh - var(--banner-height));
+    height: 100%;
+    background-color: var(--grey-lighter);
+    box-shadow: var(--box-shadow);
 }
 
 .right-column {
-    background-color: var(--grey-lighter);
-    padding: 1.25rem 0 0;
     width: 100%;
+    min-height: 40rem;
+}
+
+.title-section {
+    padding: 2rem 1rem 1.5rem;
+    background-color: var(--blue-darkest);
+    background-image: url("background.svg");
+    background-position: 30% 0;
+    height: var(--title-section-height);
+}
+
+.title-section h1 {
+    color: white;
+}
+
+.title-section p {
+    margin-bottom: 0;
+    color: white;
 }
 
 .settings {
-    margin: 1rem 0 1.5rem;
+    margin: 1rem 0 2rem;
+}
+
+.form-section {
+    display: flex;
+    flex: 1;
+}
+
+.settings-and-buttons-wrapper {
+    padding: 0 1rem 2rem;
+    flex: 1;
 }
 
 .radio label,
@@ -171,7 +211,7 @@ input[type="radio"] {
 }
 
 .is-focused:not(.is-open) > .Select-control {
-    border-color: var(--orange);
+    border-color: var(--teal);
     box-shadow: none;
 }
 
@@ -195,7 +235,7 @@ div.dash-sk-circle {
 
 /* Make the skip link visible when it receives keyboard focus */
 .skip-link:focus {
-    color: var(--orange);
+    color: var(--teal);
     position: static;
     width: auto;
     height: auto;
@@ -204,3 +244,13 @@ div.dash-sk-circle {
     padding: 1rem;
     z-index: 1000;
 }
+
+@media screen and (max-width: 1000px) {
+    .columns-main {
+        flex-direction: column;
+    }
+
+    .form-section {
+        flex-direction: column;
+    }
+}
diff --git a/assets/_buttons.css b/assets/_buttons.css
@@ -17,24 +17,34 @@ limitations under the License.
 /* Style rules for buttons */
 
 button {
-    font-size: 1rem;
-    line-height: 1rem;
-    padding: 1rem 2rem;
-    height: auto;
-    color: white;
-    transition: all 0.2s ease-in-out;
     border: none;
-    background-color: var(--blue-dark);
+    font-size: 0.875rem;
     font-weight: 600;
-    text-transform: uppercase;
-    border-radius: 0.25rem;
+    line-height: 1.75;
+    border-radius: 4px;
+    padding: 0.75rem 1.5rem;
     cursor: pointer;
-    letter-spacing: .1rem;
+    transition: all 0.2s ease-in-out;
 }
 
-button:hover {
-    filter: brightness(80%);
+.button {
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.75;
+    border-radius: 4px;
+    padding: 0.75rem 1.5rem;
     color: white;
+    text-transform: uppercase;
+    background: radial-gradient(61.22% 95.86% at 26.96% 100%, #4c71c6 0%, var(--blue-darker) 100%);
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: rgba(29, 30, 36, 0.19) 0px 5px 14px 0px;
+    border: 1px solid rgba(76, 113, 198, 0.4);
+}
+
+.button:hover {
+    background: radial-gradient(61.22% 95.86% at 26.96% 100%, var(--blue-darker) 0%, var(--blue-darker) 100%);
 }
 
 #run-button,
@@ -43,11 +53,12 @@ button:hover {
 }
 
 #cancel-button {
-    background-color: var(--red-light);
+    background: radial-gradient(61.22% 95.86% at 26.96% 100%, var(--red-light) 0%, var(--red-dark) 100%);
+    border: 1px solid rgb(245, 118, 119, 0.4);
 }
 
 #cancel-button:hover {
-    background-color: var(--red-dark);
+    background: radial-gradient(61.22% 95.86% at 26.96% 100%, var(--red-dark) 0%, var(--red-dark) 100%);
 }
 
 button:disabled {
@@ -57,5 +68,5 @@ button:disabled {
 }
 
 button:focus-visible {
-    box-shadow: 0 0 0 4px var(--orange);
+    box-shadow: 0 0 0 4px var(--teal);
 }