diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 2d81c020..b68da25d 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -2,7 +2,7 @@ name: Release
 on:
   push:
     branches:
-      - master
+      - quince/indigo
 jobs:
   release:
     name: Release
diff --git a/favicon.ico b/favicon.ico
index 4664a7cc..5bc7c23d 100644
Binary files a/favicon.ico and b/favicon.ico differ
diff --git a/package-lock.json b/package-lock.json
index d414b0c2..5c132e26 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,13 @@
 {
-  "name": "@edx/brand-openedx",
+  "name": "@edly-io/indigo-brand-openedx",
   "version": "1.0.0",
-  "lockfileVersion": 1
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@edly-io/indigo-brand-openedx",
+      "version": "1.0.0",
+      "license": "GPL-3.0-or-later"
+    }
+  }
 }
diff --git a/package.json b/package.json
index 875affea..1e1ec139 100644
--- a/package.json
+++ b/package.json
@@ -1,17 +1,17 @@
 {
-  "name": "@openedx/brand-openedx",
-  "version": "1.0.0-semantically-released",
+  "name": "@edly-io/indigo-brand-openedx",
+  "version": "1.0.0",
   "description": "The default branding and SASS theme package containing for Open edX applications. This package is designed to be copied and customized.",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/openedx/brand-openedx.git"
+    "url": "git+https://github.com/edly-io/brand-openedx.git"
   },
   "author": "Open edX Community",
   "license": "GPL-3.0-or-later",
   "bugs": {
-    "url": "https://github.com/openedx/brand-openedx/issues"
+    "url": "https://github.com/edly-io/brand-openedx/issues"
   },
-  "homepage": "https://github.com/openedx/brand-openedx#readme",
+  "homepage": "https://github.com/edly-io/brand-openedx#readme",
   "publishConfig": {
     "access": "public"
   }
diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss
index a242f09f..238c89e4 100644
--- a/paragon/_overrides.scss
+++ b/paragon/_overrides.scss
@@ -1,2 +1,959 @@
 // Use this file to define style overrides for @edx/paragon
 // This file is included after all Paragon styles, but should generally avoid using private mixins in Paragon.
+body {
+    font-family: 'Inter', sans-serif !important;
+}
+.container-xl {
+    max-width: 1090px !important;
+    padding-left: 15px !important;
+    padding-right: 15 !important;
+}
+#courseHome-outline {
+    .pgn_collapsible {
+        border-radius: 8px;
+        border: 1px solid #E5E7EB;
+        border-left: 8px solid $primary-light;
+    }
+    .collapsible-trigger {
+        padding: 8px 20px;
+        border: none !important;
+        font-size: 18px;
+        line-height: 24px;
+        @include media-breakpoint-up(md) {
+            font-size: 18px;
+            line-height: 30px;
+            padding: 14px 24px;
+        }
+        .fa-check-circle {
+            width: 20px;
+            height: 20px;
+            @include media-breakpoint-up(md) {
+                width: 24px;
+                height: 24px;
+            }
+        }
+        .text-success {
+            color: $primary !important;
+        }
+    }
+    .collapsible-body {
+        padding: 0 0 0 56px;
+        border: none;
+        @include media-breakpoint-up(md) {
+            padding: 0 0 0 91px;
+        }
+        .text-success {
+            color: $primary !important;
+        }
+        ol {
+            padding: 0 0 15px;
+            li {
+                div {
+                    @include media-breakpoint-down(md) {
+                        line-height: 18px;
+                    }
+                }
+                a {
+                    color: #111827;
+                    font-size: 15px;
+                    @include media-breakpoint-up(md) {
+                        font-size: 18px;
+                    }
+                }
+                .border-top { border: none !important; }
+            }
+        }
+    }
+}
+#root {
+    .course-outline-tab {
+        .raised-card {
+            background: $primary-light;
+            box-shadow: none !important;
+            .pgn__card-header-actions {
+                @include media-breakpoint-down(md) {
+                    margin-left: 0;
+                }
+                a {
+                    background: $primary;
+                    padding: 9px 17px;
+                    font-size: 16px;
+                    line-height: 24px;
+                    border-radius: 6px;
+                    border: none;
+                    @include media-breakpoint-down(md) {
+                        width: 180px;
+                    }
+                }
+            }
+            .pgn__card-header {
+                display: block;
+                @include media-breakpoint-up(md) {
+                    display: flex;
+                }
+            }
+        }
+        .pgn__card-header-content {
+            margin: 22px 0 0;
+            .pgn__card-header-title-md {
+                font-size: 18px;
+                line-height: 22px;
+                color: #111827;
+            }
+        }
+    }
+}
+.course-tabs-navigation {
+    padding-top: 20px;
+    border: none;
+    .nav.nav-underline-tabs {
+        border-bottom: 1px solid $primary-light;
+        a {
+            border-width: 2px;
+            font-size: 14px;
+            font-weight: 500;
+            margin: 0 10px 0 0;
+            background: none !important;
+            @include media-breakpoint-up(md) {
+                margin: 0 32px 0 0;
+            }
+        }
+    }
+}
+div[data-learner-type=b2c_learner] {
+    div[role=heading].h2  {
+        font-size: 28px;
+        line-height: 32px;
+        margin: 0 0 20px;
+        color: #111827;
+        font-weight: 800;
+        @include media-breakpoint-up(md) {
+            font-size: 36px;
+            line-height: 44px;
+        }
+    }
+}
+.course-outline-tab {
+    padding-bottom: 30px;
+    @include media-breakpoint-up(md) {
+        padding-bottom: 50px;
+    }
+    section.mb-4 {
+        border-radius: 8px;
+        @include media-breakpoint-up(md) {
+            padding: 0 0 0 25px;
+        }
+        h2 {
+            color: #111827;
+            font-size: 20px;
+            line-height: 28px;
+            font-weight: 700;
+        }
+        ul {
+            margin: 0;
+            li {
+                padding-top: 7px;
+                a, button {
+                    font-size: 14px;
+                    line-height: 20px;
+                    font-weight: 500;
+                    color: $primary;
+                    text-decoration: underline;
+                    &:hover {
+                        text-decoration: none;
+                    }
+                    svg {
+                        color: #9CA3AF;
+                    }
+                }
+            }
+        }
+    }
+}
+// login page styling
+#root {
+    .extra-large-screen-top-stripe, .medium-screen-top-stripe, .col-md-2.bg-white, .extra-large-screen-top-stripe, .small-screen-top-stripe {
+        display: none !important;
+    }
+    .layout {
+        min-height: 100vh;
+        background: $primary-light;
+        padding: 20px;
+        overflow: hidden;
+        position: relative;
+        @include media-breakpoint-up(sm) {
+            padding: 50px;
+        }
+        &:after {
+            position: absolute;
+            left: -400px;
+            bottom: -400px;
+            content: "";
+            width: 400px;
+            height: 400px;
+            border-radius: 50%;
+            box-shadow: 400px -400px 143px 90px rgba(122, 185, 250, 0.45);
+            -webkit-box-shadow: 400px -400px 143px 90px rgba(122, 185, 250, 0.45);
+            -moz-box-shadow: 400px -400px 143px 90px rgba(122, 185, 250, 0.45);
+        }
+        .col-md-3.bg-white {
+            display: none;
+        }
+        .pgn__hyperlink.default-link.standalone-link {
+            display: none;
+        }
+        .bg-primary-400 {
+            background: none !important;
+            flex: 0 0 100%;
+            max-width: 100%;
+            display: block;
+            .min-vh-100 {
+                min-height: 20px !important;
+                display: block !important;
+            }
+            h1 {
+                margin: 0 auto !important;
+                max-width: 564px !important;
+                font-size: 32px;
+                line-height: 40px;
+                color: $primary !important;
+                padding: 50px 0 0;
+                position: relative;
+                z-index: 1;
+                width: 100%;
+                @include media-breakpoint-up(sm) {
+                    font-size: 52px;
+                    line-height: 60px;
+                }
+                @media screen and (max-width: 1200px) {
+                    padding: 0;
+                }
+                .text-accent-a {
+                    font-weight: 400;
+                    font-size: 34px;
+                    line-height: 40px;
+                    color: $primary !important;
+                    display: block !important;
+                    @include media-breakpoint-up(sm) {
+                        font-size: 64px;
+                        line-height: 90px;
+                    }
+                }
+            }
+        }
+        .content {
+            background: #fff;
+            border-radius: 20px 0px;
+            padding: 20px;
+            margin: 0;
+            position: relative;
+            z-index: 1;
+            display: block;
+            @include media-breakpoint-up(sm) {
+                padding: 50px;
+                border-radius: 50px 0px;
+            }
+            @media screen and (max-width: 1200px) {
+                margin: 0 auto;
+                width: 100%;
+                max-width: 564px;
+            }
+            .nav.nav-tabs {
+                border-bottom: 1px solid #E5E7EB;
+                max-width: 450px;
+                margin: 0 auto;
+                a {
+                    font-size: 14px;
+                    line-height: 20px;
+                    font-weight: 500;
+                    padding: 0 0 16px;
+                    margin: 0 32px -1px 0;
+                    color: #6B7280;
+                    background: none !important;
+                    &:before {
+                        display: none;
+                    }
+                    &.active, &:hover {
+                        color: $primary;
+                        border-bottom: 2px solid $primary;
+                    }
+                }
+            }
+            #main-content {
+                min-width: 100px !important;
+                padding: 20px 0 0 !important;
+                > .mw-xs {
+                    min-width: 100px !important;
+                    max-width:450px !important;
+                    margin: 0 auto !important;
+                }
+                .alert-danger {
+                    border-radius: 6px;
+                    background: #FEF2F2;
+                    padding: 16px;
+                    color: #B91C1C;
+                    font-size: 14px;
+                    line-height: 20px;
+                    box-shadow: none;
+                    .alert-heading {
+                        color: #B91C1C;
+                        font-size: 14px;
+                        line-height: 20px;
+                        font-weight: 500;
+                    }
+                }
+                .pgn__form-control-decorator-group {
+                    margin-inline-end: 0;
+                }
+                #forgot-password {
+                    font-weight: 400 !important;
+                    font-size: 14px;
+                }
+                .btn-brand {
+                    background-color: $primary;
+                    border-color: $primary;
+                    font-size: 14px;
+                    font-weight: 500;
+                    line-height: 30px;
+                }
+            }
+        }
+     }
+}
+
+// detail page
+#root {
+    nav[aria-label=breadcrumb] {
+        max-width: 100% !important;
+        flex: 0 0 100% !important;
+        padding: 9px 13px !important;
+        margin: 20px  0 0 !important;
+        background: $primary-light;
+        border-radius: 6px 6px 0px 0px;
+        @include media-breakpoint-up(sm) {
+            margin: 50px  0 0 !important;
+        }
+        ol {
+            li {
+                font-size: 14px;
+                line-height: 20px;
+                a {
+                    color: #6B7280 !important;
+                    font-weight: 500;
+                }
+                button {
+                    font-size: 14px;
+                    background: none !important;
+                    padding: 0 !important;
+                    line-height: 20px;
+                    color: #6B7280 !important;
+                    border: none !important;
+                    font-weight: 500;
+                }
+                .pgn__menu-select-popup {
+                    display: none;
+                }
+            }
+        }
+        + div.d-flex.ml-auto {
+            .mt-3 {
+                margin: 0 !important;
+                border: none !important;
+                &:first-child {
+                    display: none;
+                }
+                button {
+                    padding: 0;
+                    border: none !important;
+                    position: absolute;
+                    right: 0;
+                    top: 12px;
+                    span {
+                        box-sizing: border-box;
+                        position: relative;
+                        display: block;
+                        transform: scale(var(--ggs,1));
+                        border: 2px solid #9CA3AF;
+                        border-bottom: 0;
+                        width: 14px;
+                        height: 14px;
+                        border-top-left-radius: 100px;
+                        border-top-right-radius: 100px;
+                        &:after, &:before {
+                            content: "";
+                            display: block;
+                            box-sizing: border-box;
+                            position: absolute;
+                        }
+                        &:after {
+                            border-radius: 3px;
+                            width: 16px;
+                            height: 10px;
+                            border: 6px solid transparent;
+                            border-top: 1px solid transparent;
+                            box-shadow: inset 0 0 0 4px #9CA3AF,  0 -2px 0 0 #9CA3AF;
+                            top: 14px;
+                            left: -3px;
+                            border-bottom-left-radius: 100px;
+                            border-bottom-right-radius: 100px;
+                        }
+                        &:before {
+                            background: #9CA3AF;
+                            width: 4px;
+                            height: 4px;
+                            top: -4px;
+                            left: 3px;
+                            border-top-left-radius: 100px;
+                            border-top-right-radius: 100px;
+                        }
+                    }
+                    svg {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+    #courseware-sequenceNavigation {
+        + div.d-flex.ml-auto{
+            .mt-3 {
+                margin: 0 !important;
+                border: none !important;
+                &:first-child {
+                    display: none;
+                }
+                button {
+                    padding: 0;
+                    border: none !important;
+                    position: absolute;
+                    right: 0;
+                    top: 9px;
+                    span {
+                        box-sizing: border-box;
+                        position: relative;
+                        display: block;
+                        transform: scale(var(--ggs,1));
+                        border: 2px solid #9CA3AF;
+                        border-bottom: 0;
+                        width: 14px;
+                        height: 14px;
+                        border-top-left-radius: 100px;
+                        border-top-right-radius: 100px;
+                        &:after, &:before {
+                            content: "";
+                            display: block;
+                            box-sizing: border-box;
+                            position: absolute;
+                        }
+                        &:after {
+                            border-radius: 3px;
+                            width: 16px;
+                            height: 10px;
+                            border: 6px solid transparent;
+                            border-top: 1px solid transparent;
+                            box-shadow: inset 0 0 0 4px #9CA3AF,  0 -2px 0 0 #9CA3AF;
+                            top: 14px;
+                            left: -3px;
+                            border-bottom-left-radius: 100px;
+                            border-bottom-right-radius: 100px;
+                        }
+                        &:before {
+                            background: #9CA3AF;
+                            width: 4px;
+                            height: 4px;
+                            top: -4px;
+                            left: 3px;
+                            border-top-left-radius: 100px;
+                            border-top-right-radius: 100px;
+                        }
+                    }
+                    svg {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+    .sequence-container {
+        width: 100%;
+        .sequence {
+            border-top: none;
+            border-radius: 0 0 6px 6px;
+            #courseware-sequenceNavigation {
+                button.previous-btn, button.next-btn {
+                    border-radius: 0;
+                    border-top: none !important;
+                }
+                .sequence-navigation-tabs {
+                    button {
+                        border-top: none;
+                        &.complete {
+                            background: $primary-light;
+                            color: $primary;
+                            &:after {
+                                background: $primary-light !important;
+                            }
+                            &.active {
+                                &:after {
+                                    background: $primary !important;
+                                }
+                            }
+                            .text-success {
+                                color: $primary !important;
+                            }
+                        }
+                    }
+                }
+            }
+            .unit-navigation {
+                max-width: 226px;
+                button {
+                    svg {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// progress page style
+.course-tabs-navigation + .container-xl {
+    >.mb-4.justify-content-between {
+        h1 {
+            font-weight: 800;
+            font-size: 36px;
+            line-height: 40px;
+            color: #111827;
+        }
+    }
+    >.row {
+        >.col-12.col-md-8.p-0 {
+            .rounded.raised-card {
+                border: 1px solid #E5E7EB !important;
+                border-left: 8px solid $primary-light !important;
+                border-radius: 8px !important;
+                box-shadow: none !important;
+                font-size: 14px;
+                &.grades {
+                    border: none !important;
+                    border-radius: none !important;
+                    padding: 0 !important;
+                }
+                h2 {
+                    font-size: 18px;
+                    line-height: 24px;
+                    font-weight: 600;
+                }
+                .bg-warning-100 {
+                    padding: 10px 15px !important;
+                    background: $primary-light !important;
+                    .h4 {
+                        font-size: 16px;
+                        color: $primary;
+                        font-weight: 600;
+                    }
+                    svg {
+                        color: $primary;
+                    }
+                }
+            }
+        }
+        >.col-12.col-md-4.p-0.px-md-4 {
+            section.mb-4.x-small {
+                background-color: $primary-light;
+                font-size: 14px;
+                border-radius: 8px;
+                padding: 20px;
+                ul {
+                    list-style: none;
+                    a {
+                        color: $primary;
+                    }
+                }
+            }
+        }
+    }
+    .donut-ring.complete-stroke, .donut-segment.complete-stroke, .donut-hole.complete-stroke {
+        stroke: $primary;
+    }
+    .donut-ring.incomplete-stroke, .donut-segment.incomplete-stroke, .donut-hole.incomplete-stroke {
+        stroke: $primary-light;
+    }
+    svg.donut {
+        @include media-breakpoint-up(sm) {
+            float: right;
+        }
+    }   
+    .donut-chart-text {
+        .donut-chart-number {
+            color: #111827;
+        }
+        .donut-chart-label {
+            color: #4B5563;
+        }
+    }
+    .grade-bar .grade-bar__base {
+        fill: $primary-light;
+    }
+}
+#root {
+    .grades {
+        .pgn__data-table {
+            thead {
+                th {
+                    background: none !important;
+                    border-bottom: 1px solid #E5E7EB !important;
+                    span.h5 {
+                        font-size: 14px;
+                        font-weight: 500;
+                    }
+                }
+            }
+            &.is-striped tr:nth-child(even) {
+                background: none !important;
+            }
+        }
+        .pgn__data-table-wrapper {
+            border: 1px solid #E5E7EB !important;
+            border-left: 8px solid $primary-light !important;
+            border-radius: 8px !important;
+            box-shadow: none !important;
+            .border-primary {
+                border-color: transparent !important;
+            }
+            .small, .x-small {
+                font-size: 14px !important;
+            }
+            #weighted-grade-summary.small {
+                color: $primary !important;
+                font-weight: 600 !important;
+                font-size: 16px !important;
+            }
+        }
+    }
+}
+#non-passing-grade-tooltip {
+    background: $primary;
+    border-color: $primary;
+    filter: none;
+    .arrow {
+        &:before {
+            border-top-color: $primary !important;
+        }
+        &:after {
+            border-top-color: $primary !important;
+        }
+    }
+    .popover-body {
+        color: white !important;
+    }
+}
+#minimum-grade-tooltip.bg-primary-500 {
+    background: #9CA3AF !important;
+    border-color: #9CA3AF !important;
+    filter: none;
+    .arrow {
+        &:before {
+            border-bottom-color: #9CA3AF !important;
+        }
+        &:after {
+            border-bottom-color: #9CA3AF !important;
+        }
+    }
+    .popover-body {
+        color: white !important;
+    }
+}
+
+
+/// header style
+#root {
+    header.learning-header {
+        box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.06), 0px 1px 3px 0px rgba(0,0,0,0.1);
+       .logo {
+            position: static;
+            height: auto;
+            margin: 15px 0 15px 35px !important;
+            @include media-breakpoint-up(lg) {
+                margin: 0 18px 0 0 !important;
+            }
+            img {
+                height: 21px;
+            }
+       }
+       .course-title-lockup {
+            display: flex;
+            .nav-course {
+                display: none;
+                @include media-breakpoint-up(lg) {
+                    display: block;
+                }
+                a {
+                    font-size: 14px;
+                    font-weight: 500;
+                    line-height: 22px;
+                    padding: 20px 0;
+                    color: #374151;
+                    margin: 0 16px 0 0;
+                    display: block;
+                    border-bottom: 2px solid transparent;
+                    &.active, &:hover {
+                        color: #111827;
+                        text-decoration: none;
+                        border-bottom: 2px solid $primary;
+                    }
+                }
+            }
+            .course-info-header {
+                padding: 13px 25px 0 0;
+                @include media-breakpoint-down(md) {
+                    padding: 4px 0 4px 15px;
+                }
+                .title {
+                    font-size: 14px;
+                    font-weight: 700;
+                    color: #111827;
+                    margin: 0 0 8px;
+                    @include media-breakpoint-down(md) {
+                        margin: 0 0 2px;
+                    }
+                }
+                .org {
+                    font-size: 12px;
+                    color: #6B7280;
+                }
+            }
+       }
+        .container-xl {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+        }
+    }
+    .user-dropdown {
+        @include media-breakpoint-down(md) {
+            position: static;
+        }
+        &.show {
+            button {
+                .hamburger-menu {
+                    .line {
+                        &:nth-child(1), &:nth-child(4) {
+                            top: 18px;
+                            width: 0%;
+                            left: 50%;
+                        }
+                        &:nth-child(2) {
+                            transform: rotate(45deg);
+                        }
+                        &:nth-child(3) {
+                            transform: rotate(-45deg);
+                        }
+                    }
+                }
+            }
+        }
+        button {
+            border: none !important;
+            padding: 0 !important;
+            box-shadow: none !important;
+            outline: none !important;
+            background: none !important;
+            &:after, &:before {
+                display: none;
+            }
+            @include media-breakpoint-down(md) {
+                position: absolute;
+                left: 15px;
+                top: 18px;
+            }
+            .hamburger-menu {
+                transition: 0.5s ease-in-out;
+                cursor: pointer;
+                height: 12px;
+                width: 20px;
+                display: none;
+                @include media-breakpoint-down(md) {
+                    display: block;
+                }
+                .line {
+                    display: block;
+                    position: absolute;
+                    height: 2px;
+                    width: 100%;
+                    background: #767676;
+                    opacity: 1;
+                    left: 0;
+                    top: 0;
+                    -webkit-transform: rotate(0deg);
+                    transform: rotate(0deg);
+                    -webkit-transition: 0.25s ease-in-out;
+                    transition: 0.25s ease-in-out;
+                    &:nth-child(2), &:nth-child(3) {
+                        top: 6px;
+                    }
+                    &:nth-child(4) {
+                        top: 12px;
+                    }
+                }
+            }
+            img {
+                display: none;
+                @include media-breakpoint-up(lg) {
+                    display: block;
+                }
+            }
+        }
+        .dropdown-menu {
+            position: absolute;
+            top: 60px !important;
+            width: 224px;
+            border-radius: 6px;
+            box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+            border: none;
+            overflow: hidden;
+            inset: unset !important;
+            transform: none !important;
+            right: 0 !important;
+            min-width: 12px;
+            padding: 0;
+            margin: 6px 0 0 !important;
+            @include media-breakpoint-down(md) {
+                width: 100%;
+                margin: 26px 0 0 !important;
+                border: none !important;
+                border-bottom: 2px solid indigo !important;
+                box-shadow: none;
+                border-radius: 0;
+            }
+            a {
+                box-sizing: border-box;
+                padding: 16px;
+                font-size: 14px;
+                line-height: 20px;
+                color: #374151;
+                &:hover {
+                    background: $primary-light;
+                    color: #111827;                         ;
+                }
+                &.h-desktop {
+                    display: none;
+                    @include media-breakpoint-down(md) {
+                        display: block;
+                    }
+                }
+                @include media-breakpoint-down(md) {
+                    &:after {
+                        content: '\00BB';
+                        padding: 0 0 0 5px;
+                    }
+                }
+            }
+        }
+    }
+}
+[dir="ltr"] #root .user-dropdown .dropdown-menu {
+    top: 54px;
+}
+// footer style
+.wrapper-footer {
+    padding: 25px 0;
+    border-top: 1px solid #E5E7EB;
+    @include media-breakpoint-up(md) {
+        padding: 45px 0;
+    }
+}
+footer.tutor-container {
+    margin: 0 auto;
+    padding: 0 15px;
+    max-width: 1090px;
+    text-align: center;
+    @include media-breakpoint-up(lg) {
+        text-align: left;
+    }
+    .footer-top {
+        margin: 0 0 15px;
+        &:after {
+            clear: both;
+            display: block;
+            content: "";
+        }
+        .powered-area {
+            margin: 0 0 10px;
+            @include media-breakpoint-up(md) {
+                margin: 0 0 15px;
+            }
+            @include media-breakpoint-up(lg) {
+                float: left;
+            }
+        }
+    }
+    .logo-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        letter-spacing: -.3em;
+        li {
+            display: inline-block;
+            vertical-align: middle;
+            padding: 0 5px;
+            letter-spacing: normal;
+            position: relative;
+            font-size: 12px;
+            line-height: 18px;
+            color: #6B7280;
+            &:first-child {
+                padding-left: 0;
+            }
+            &:last-child {
+                padding-left: 20px;
+                &:after {
+                    position: absolute;
+                    left: 5px;
+                    top: 50%;
+                    content: "";
+                    width: 1px;
+                    height: 29px;
+                    margin: -14px 0 0;
+                    background: #6B7280;;
+                }
+            }
+        }
+    }
+    .nav-colophon {
+        display: block;
+        overflow: hidden;
+        ol {
+            text-align: center;
+            li {
+                display: inline-block;
+                vertical-align: top;
+                padding: 0 8px;
+                font-size: 14px;
+                line-height: 20px;
+                @include media-breakpoint-up(md) {
+                    padding: 0 12px;
+                    font-size: 16px;
+                    line-height: 24px;
+                }
+                a {
+                    color: $light-drak;
+                    text-decoration: none;
+                    &:hover {
+                        color: #000;
+                        text-decoration: none;
+                    }
+                }
+            }
+        }
+    }
+    .copyright-site {
+        display: block;
+        font-size: 12px;
+        line-height: 16px;
+        color: $light-drak;
+    }
+}
+
+
+
diff --git a/paragon/_variables.scss b/paragon/_variables.scss
index f84e2b32..28f6c99f 100644
--- a/paragon/_variables.scss
+++ b/paragon/_variables.scss
@@ -1,2 +1,7 @@
 // Use this file to set SASS variables for @edx/paragon
 // See _variables.scss in https://github.com/openedx/paragon/blob/master/scss/core/ for reference
+$primary: #15376D;
+$primary-light: #F2F7F8;
+$light-drak: #374151;
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;800&display=swap');