Skip to content

Commit 7956366

Browse files
MazizovaMazizova
authored
Merge pull request #40 from Mazizova/brand-guidelines-page
Add a Brand Guidelines page under About
2 parents 51d132e + 1da88e2 commit 7956366

8 files changed

Lines changed: 400 additions & 12 deletions

File tree

‎assets/scss/_about.scss‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -652,3 +652,219 @@
652652
padding: 30px 1.25rem $section-pad;
653653
}
654654
}
655+
656+
// ── Brand Guidelines ──
657+
.brand-gradient-text {
658+
background: linear-gradient(135deg, $accent 0%, #60a5fa 50%, #a78bfa 100%);
659+
-webkit-background-clip: text;
660+
-webkit-text-fill-color: transparent;
661+
background-clip: text;
662+
}
663+
664+
// 01 — Logo
665+
.brand-logo-grid {
666+
display: grid;
667+
grid-template-columns: 1fr 1fr;
668+
gap: 1.5rem;
669+
margin-bottom: 2rem;
670+
}
671+
672+
.brand-logo-card {
673+
border-radius: 12px;
674+
border: 1px solid $dark-border;
675+
overflow: hidden;
676+
}
677+
678+
.brand-logo-preview {
679+
display: flex;
680+
align-items: center;
681+
justify-content: center;
682+
padding: 3rem 1.5rem;
683+
684+
img { height: 28px; width: auto; }
685+
}
686+
687+
.brand-logo-card--dark .brand-logo-preview { background: $dark-bg; }
688+
.brand-logo-card--light .brand-logo-preview { background: #f8f9fc; }
689+
690+
.brand-logo-card-footer {
691+
padding: 1rem 1.25rem;
692+
background: $dark-card;
693+
border-top: 1px solid $dark-border;
694+
}
695+
696+
.brand-logo-card-label {
697+
font-size: 0.875rem;
698+
font-weight: 600;
699+
color: $off-white;
700+
margin: 0 0 0.375rem;
701+
}
702+
703+
.brand-logo-card-links {
704+
display: flex;
705+
gap: 0.5rem;
706+
font-size: 0.8125rem;
707+
color: $muted;
708+
709+
a {
710+
color: $accent;
711+
text-decoration: none;
712+
713+
&:hover { text-decoration: underline; }
714+
}
715+
}
716+
717+
.brand-spec-row {
718+
display: grid;
719+
grid-template-columns: repeat(3, 1fr);
720+
gap: 1.5rem;
721+
}
722+
723+
.brand-spec-label {
724+
font-size: 0.8125rem;
725+
font-weight: 700;
726+
color: $off-white;
727+
margin: 0 0 0.25rem;
728+
}
729+
730+
.brand-spec-value {
731+
font-size: 0.875rem;
732+
color: $muted;
733+
margin: 0;
734+
}
735+
736+
// 02 — Color
737+
.brand-color-grid {
738+
display: grid;
739+
grid-template-columns: 1fr 1fr;
740+
gap: 1.5rem;
741+
margin-bottom: 1.5rem;
742+
}
743+
744+
.brand-swatch-fill {
745+
height: 72px;
746+
border-radius: 10px;
747+
margin-bottom: 0.75rem;
748+
border: 1px solid $dark-border;
749+
}
750+
751+
.brand-swatch-fill--gradient {
752+
background: linear-gradient(90deg, $accent 0%, #60a5fa 50%, #a78bfa 100%);
753+
}
754+
755+
.brand-swatch-fill--accent {
756+
background: $accent;
757+
}
758+
759+
.brand-swatch-label {
760+
font-size: 0.875rem;
761+
font-weight: 600;
762+
color: $off-white;
763+
margin: 0 0 0.25rem;
764+
}
765+
766+
.brand-swatch-value {
767+
font-size: 0.8125rem;
768+
color: $muted;
769+
margin: 0;
770+
font-family: $font-mono;
771+
}
772+
773+
.brand-theme-grid {
774+
display: grid;
775+
grid-template-columns: repeat(3, 1fr);
776+
gap: 1.5rem;
777+
}
778+
779+
.brand-theme-split {
780+
display: flex;
781+
height: 56px;
782+
border-radius: 10px;
783+
overflow: hidden;
784+
border: 1px solid $dark-border;
785+
margin-bottom: 0.75rem;
786+
787+
span {
788+
flex: 1;
789+
display: flex;
790+
align-items: center;
791+
justify-content: center;
792+
font-size: 0.6875rem;
793+
font-weight: 700;
794+
letter-spacing: 0.06em;
795+
}
796+
}
797+
798+
.brand-theme-bg--dark { background: $dark-bg; color: $off-white; }
799+
.brand-theme-text--dark { background: $dark-card; color: $off-white; }
800+
.brand-theme-bg--light { background: #f8f9fc; color: #0f172a; }
801+
.brand-theme-text--light { background: #ffffff; color: #0f172a; border-left: 1px solid $dark-border; }
802+
803+
.brand-theme-split--muted {
804+
background: #64748b;
805+
}
806+
807+
// 03 — Typography
808+
.brand-type-card {
809+
padding: 1.75rem;
810+
background: $dark-card;
811+
border: 1px solid $dark-border;
812+
border-radius: 12px;
813+
margin-bottom: 1.25rem;
814+
815+
&:last-child { margin-bottom: 0; }
816+
}
817+
818+
.brand-type-eyebrow {
819+
display: block;
820+
font-size: 0.75rem;
821+
font-weight: 700;
822+
letter-spacing: 0.08em;
823+
text-transform: uppercase;
824+
color: $accent;
825+
margin-bottom: 1rem;
826+
}
827+
828+
.brand-type-headline {
829+
font-size: clamp(1.5rem, 3.5vw, 2.25rem);
830+
font-weight: 900;
831+
letter-spacing: -0.02em;
832+
line-height: 1.15;
833+
color: $white;
834+
margin: 0 0 0.75rem;
835+
}
836+
837+
.brand-type-caption {
838+
font-size: 0.875rem;
839+
color: $muted;
840+
margin: 0;
841+
}
842+
843+
.brand-type-body {
844+
font-size: 1.0625rem;
845+
font-weight: 400;
846+
color: $off-white;
847+
line-height: 1.7;
848+
margin: 0 0 1rem;
849+
}
850+
851+
.brand-type-weights {
852+
font-size: 0.8125rem;
853+
color: $muted;
854+
margin: 0;
855+
856+
strong { color: $off-white; }
857+
}
858+
859+
@media (max-width: $break-sm) {
860+
.brand-logo-grid,
861+
.brand-color-grid {
862+
grid-template-columns: 1fr;
863+
}
864+
865+
.brand-spec-row,
866+
.brand-theme-grid {
867+
grid-template-columns: 1fr;
868+
gap: 1.25rem;
869+
}
870+
}

‎assets/scss/_light-theme.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -431,6 +431,35 @@
431431
}
432432
}
433433

434+
// Brand Guidelines
435+
.brand-logo-card { border-color: #dde3ed; }
436+
.brand-logo-card-footer {
437+
background: #ffffff;
438+
border-top-color: #dde3ed;
439+
}
440+
.brand-logo-card-label { color: #0f172a; }
441+
.brand-logo-card-links { color: #94a3b8; }
442+
443+
.brand-spec-label { color: #0f172a; }
444+
.brand-spec-value { color: #64748b; }
445+
446+
.brand-swatch-fill,
447+
.brand-theme-split { border-color: #dde3ed; }
448+
.brand-swatch-label { color: #0f172a; }
449+
.brand-swatch-value { color: #64748b; }
450+
451+
.brand-type-card {
452+
background: #ffffff;
453+
border-color: #dde3ed;
454+
}
455+
.brand-type-headline { color: #0f172a; }
456+
.brand-type-caption { color: #64748b; }
457+
.brand-type-body { color: #0f172a; }
458+
.brand-type-weights {
459+
color: #64748b;
460+
strong { color: #0f172a; }
461+
}
462+
434463
// Contribute page
435464
.contribute-method {
436465
background: #ffffff;

‎content/about/brand-guidelines.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: "Brand Guidelines"
3+
description: "The logo, color, and type as they actually ship on oursqlfoundation.org — for anyone writing a deck, a flyer, or a new page."
4+
layout: "brand-guidelines"
5+
---

0 commit comments

Comments
 (0)