diff --git a/designsafe/settings/common_settings.py b/designsafe/settings/common_settings.py
index 66c2ee58cc..baa94d97bd 100644
--- a/designsafe/settings/common_settings.py
+++ b/designsafe/settings/common_settings.py
@@ -309,6 +309,7 @@
('cms_homepage.html', 'Homepage Navigation'),
('ef_cms_page.html', 'EF Site Page'),
('cms_page.html', 'Main Site Page'),
+ ('cms_page_for_app.html', 'Main Site App Page'),
('cms_page_no_footer.html', 'Footerless Page'),
)
CMSPLUGIN_CASCADE = {
diff --git a/designsafe/static/styles/app-card.css b/designsafe/static/styles/app-card.css
index 0324f80a1b..b95a9cf0cb 100644
--- a/designsafe/static/styles/app-card.css
+++ b/designsafe/static/styles/app-card.css
@@ -1,7 +1,7 @@
/* STRUCTURE */
/* To load most structure from Core-Styles */
-@import url("https://cdn.jsdelivr.net/gh/TACC/core-styles@v2.25.3/dist/components/c-app-card.css");
+@import url("https://cdn.jsdelivr.net/gh/TACC/core-styles@v2.26.0/dist/components/c-app-card.css");
diff --git a/designsafe/static/styles/app-page.css b/designsafe/static/styles/app-page.css
new file mode 100644
index 0000000000..ff83869aed
--- /dev/null
+++ b/designsafe/static/styles/app-page.css
@@ -0,0 +1,32 @@
+@import url("./app-card.css");
+@import url("./app-version-list.css");
+
+/* To make width of page content line up with width of header. */
+/* TODO: Verify whether this is safe to put into `main.css` */
+.s-app-page > .container-fluid {
+ margin: 0 50px;
+}
+
+.s-app-page h1 {
+ color: var(--ds-accent-color, #47a59d);
+}
+.s-app-page h2 {
+ font-size: 2.0rem;
+ text-transform: none;
+
+ margin-bottom: 30px;
+}
+.s-app-page h2:not(.s-version-list *) {
+ color: var(--ds-accent-color, #47a59d);
+
+ margin-top: 40px;
+ padding-bottom: 16px;
+ border-bottom: 2px solid var(--ds-accent-color, #47a59d);
+}
+.s-app-page h3:not(.s-version-list *):not(.c-app-card__title) {
+ margin-top: 40px; /* double Bootstrap h3 margin-top */
+}
+
+p:where(.s-app-page *) {
+ line-height: 1.8;
+}
diff --git a/designsafe/static/styles/app-version-list.css b/designsafe/static/styles/app-version-list.css
new file mode 100644
index 0000000000..ff60910bfa
--- /dev/null
+++ b/designsafe/static/styles/app-version-list.css
@@ -0,0 +1,52 @@
+.s-version-list {
+ background-color: #F4F4F4;
+ padding: 20px;
+}
+.s-version-list > h2 {
+ color: inherit;
+ margin-top: unset;
+ padding-bottom: unset;
+ border-bottom: unset;
+}
+.s-version-list > article {
+ padding-top: 30px;
+ display: grid;
+ grid-template-areas:
+ "name link"
+ "desc desc";
+}
+.s-version-list > article:not(:last-of-type) {
+ padding-bottom: 15px;
+}
+.s-version-list > *:not(:first-of-type) {
+ border-top: 1px solid #333333;
+}
+.s-version-list > * > h3 {
+ grid-area: name;
+ font-size: 1.6rem;
+ font-weight: 500; /* e.g. "medium", Core-Styles `var(--medium)` */
+ margin-top: 0;
+
+ /* To center align text vertically (compared to button) */
+ display: grid;
+ align-content: center;
+}
+/* FAQ: CMS forces a button or link on its own line to be in a paragraph */
+.s-version-list > * > p:has(
+ a:only-child,
+ button:only-child
+) {
+ grid-area: link;
+ justify-self: end;
+}
+.s-version-list > * > p:not(:has(
+ a:only-child,
+ button:only-child
+)) {
+ grid-area: desc;
+}
+
+/* Bootstrap */
+.s-version-list .btn {
+ padding-inline: 24px; /* double Bootstrap .btn padding */
+}
diff --git a/designsafe/static/styles/main.css b/designsafe/static/styles/main.css
index 8be0737f54..bb8716405b 100644
--- a/designsafe/static/styles/main.css
+++ b/designsafe/static/styles/main.css
@@ -1,3 +1,7 @@
+:root {
+ --ds-accent-color: #47a59d;
+}
+
body, html {
background-color: #ffffff;
}
diff --git a/designsafe/templates/base.j2 b/designsafe/templates/base.j2
index 76c42c8291..23d2dfb9e3 100644
--- a/designsafe/templates/base.j2
+++ b/designsafe/templates/base.j2
@@ -68,7 +68,7 @@
{% endblock %}
-
+
{% cms_toolbar %}
{% include 'includes/header.html' %}
diff --git a/designsafe/templates/cms_page_for_app.html b/designsafe/templates/cms_page_for_app.html
new file mode 100644
index 0000000000..3f52860881
--- /dev/null
+++ b/designsafe/templates/cms_page_for_app.html
@@ -0,0 +1,6 @@
+{% extends "cms_page.html" %}
+{% load cms_tags static %}
+{% block page_class %}s-app-page{% endblock page_class %}
+{% addtoblock "css" %}
+
+{% endaddtoblock %}