Skip to content

Media kit #186

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gtca merged 8 commits into from
Nov 16, 2025
Merged

Media kit #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a4841b6
Media kit page draft
gtca Mar 25, 2025
27801db
Merge branch 'main' into mediakit
gtca Nov 11, 2025
97da82a
Add media kit link to the footer
gtca Nov 12, 2025
fc50072
Add more examples and clean up package logos
gtca Nov 12, 2025
19a6763
Add example logo usage
gtca Nov 12, 2025
a6ff98e
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Nov 13, 2025
f1426e6
Include styles for the trademarked logo
gtca Nov 16, 2025
f34d660
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Nov 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
976 changes: 959 additions & 17 deletions assets/main.scss
View file
Open in desktop

Large diffs are not rendered by default.

137 changes: 137 additions & 0 deletions content/design/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
+++
title = "Media Kit"
aliases = ["/brand/", "/logo/"]

[[sections]]
primary_logos = """scverse® logo is a signature pair of letters **sc**, originally derived from 'single-cell', smoothly interwoven to create perseption of a third dimension.

Our logo is available in several formats for different use cases. Please use these official versions and follow our guidelines when representing our brand.

Our logo is protected as a registered trademark. For details and specifics, consult the [NumFOCUS trademark guidelines](https://numfocus.org/trademark-guidelines).
"""
logo_guidelines = "To maintain brand consistency, please follow these guidelines when using our logo."
do_guidelines = """
- Use the logo in its original proportions
- Maintain adequate white space around the logo
- Use the logo on backgrounds that provide sufficient contrast
- Use the SVG format when possible for best quality at any size
"""
dont_guidelines = """
- Don't alter the colors of the logo
- Don't stretch or distort the logo
- Don't add effects such as shadows, outlines, or glows
- Don't place the logo on busy backgrounds that reduce visibility
- Don't rotate or change the orientation of the logo
- Don't use the logo at sizes where details become illegible
"""
package_icons = "These logos represent our core packages. They are available for download in SVG or PNG formats, sometimes with variations such as with or without the package name."
contact = "For questions about logo usage or requests for additional formats, please contact us at [core@scverse.org](mailto:core@scverse.org). For more information about scverse, please visit our [About page](/about/)."

[[primarylogos]]
name = "Primary Logo"
description = "Primary logo with text"
img = "../img/logo/scverse.svg"
details = """
Our primary logo combines our icon with the full name. Use this version when introducing our brand or in more formal contexts. Use the PT Sans font.
"""
[[primarylogos.links]]
text = "Download SVG"
url = "../img/logo/scverse.svg"
[[primarylogos.links]]
text = "Download PNG"
url = "../img/logo/scverse.png"

[[primarylogos]]
name = "Icon Only"
description = "Logo mark without text"
img = "../img/logo/scverse_symbol.svg"
details = "Our icon can be used independently when space is limited or when our brand is already well-established in context."
[[primarylogos.links]]
text = "Download SVG"
url = "../img/logo/scverse_symbol.svg"
[[primarylogos.links]]
text = "Download PNG"
url = "../img/logo/scverse_symbol.png"

[[packageicons]]
name = "anndata"
description = "AnnData package icon"
img = "../img/libs/anndata_schema.svg"
details = "Icon for the AnnData package, representing annotated matrices."
color = true
[[packageicons.links]]
text = "Download SVG"
url = "../img/libs/anndata_schema.svg"

[[packageicons]]
name = "mudata"
description = "MuData package icon"
img = "../img/libs/mudata_flat.svg"
details = "Icon for the MuData package, representing multimodal data format."
color = true
[[packageicons.links]]
text = "Download SVG"
url = "../img/libs/mudata_flat.svg"
[[packageicons.links]]
text = "Download SVG (w/ name)"
url = "../img/libs/mudata.svg"

[[packageicons]]
name = "spatialdata"
description = "SpatialData package icon"
img = "../img/icons/spatialdata.svg"
details = "Icon for the SpatialData package, representing data format for spatial resolution data."
color = true
[[packageicons.links]]
text = "Download SVG"
url = "../img/icons/spatialdata.svg"
[[packageicons.links]]
text = "Download PNG (w/ name)"
url = "../img/libs/spatialdata_horizontal.png"

[[packageicons]]
name = "scanpy"
description = "Scanpy package icon"
img = "../img/icons/scanpy.svg"
details = "Icon for the Scanpy package, representing single-cell analysis framework."
color = true
[[packageicons.links]]
text = "Download SVG"
url = "../img/icons/scanpy.svg"

[[packageicons]]
name = "muon"
description = "Muon package icon"
img = "../img/icons/muon.svg"
details = "Icon for the Muon package, representing multi-omics analysis framework."
[[packageicons.links]]
text = "Download SVG"
url = "../img/icons/muon.svg"

[[packageicons]]
name = "scirpy"
description = "Scirpy package icon"
img = "../img/icons/scirpy.svg"
details = "Icon for the Scirpy package, representing single-cell immune sequencing framework."
[[packageicons.links]]
text = "Download SVG"
url = "../img/icons/scirpy.svg"

[[packageicons]]
name = "squidpy"
description = "Squidpy package icon"
img = "../img/icons/squidpy.svg"
details = "Icon for the Squidpy package, representing spatial single cell analysis."
[[packageicons.links]]
text = "Download SVG"
url = "../img/icons/squidpy.svg"

[[packageicons]]
name = "scvi-tools"
description = "scvi-tools package icon"
img = "../img/icons/scvi-tools.svg"
details = "Icon for the scvi-tools package, representing probabilistic modelling framework for single-cell omics data."
[[packageicons.links]]
text = "Download SVG"
url = "../img/icons/scvi-tools.svg"
+++
213 changes: 213 additions & 0 deletions layouts/design/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
<!doctype html>
<html>
<head>
{{ partial "head" . }}
</head>

<body>
<header>
{{ partial "header" . }}
</header>
<div id="wrapper">
<div id="content">
<div id="page-content">
<h1>{{ .Title }}</h1>
<article class="post">
{{ if .Params.sections }}
{{ $sections := index .Params.sections 0 }}
<div class="post-content" id="media-kit-content">
{{ if or .Params.primarylogos .Params.packageicons }}
<h2 id="primary-logos">Primary Logos</h2>
<br />{{ $sections.primary_logos | markdownify }}
{{ if .Params.primarylogos }}
<div id="logos-list">
{{ $primarylogos := .Params.primarylogos }}
{{ range $i, $e := $primarylogos }}
<div
class="logo-section"
style="--hover-color: var(--{{ .name | lower }}-color);"
id="{{ .name | lower }}-tile"
>
<div class="logo-img">
<img src="{{ .img }}" />
</div>
<div class="logo-info">
<div class="logo-tile">
<div class="logo-text">
<span class="logo-name">{{ .name }}</span>
<span class="logo-details">{{ .details | markdownify }}</span>
</div>
</div>
<div class="logo-links">
{{ range $k, $v := $e.links }}
<a href="{{ $v.url }}" target="_blank">{{ $v.text }}</a>
{{ end }}
</div>
</div>
</div>
{{ end }}
</div>
{{ end }}
<h2 id="logo-guidelines">Logo Usage Guidelines</h2>
<br />{{ $sections.logo_guidelines | markdownify }}
<div class="guidelines-container">
<div class="do-section">
<h3>Do's</h3>
{{ $sections.do_guidelines | markdownify }}
</div>
<div class="dont-section">
<h3>Don'ts</h3>
{{ $sections.dont_guidelines | markdownify }}
</div>
</div>
<h2 id="logo-examples">Logo in Action</h2>
<div class="logo-examples-gallery">
<div class="example-item">
<div class="example-image">
<img
src="../img/logo/scverse-bridge-sketch.png"
alt="scverse logo - Golden Gate Bridge example"
/>
</div>
<div class="example-caption">
<strong>Conference Branding</strong> - scverse conference in the Bay Area in 2025
</div>
</div>
<div class="example-item">
<div class="example-image">
<img src="../img/logo/scverse-lettering.png" alt="scverse lettering (no logo)" />
</div>
<div class="example-caption">
<strong>Conference Branding</strong> - scverse lettering for the 2025 conference (no icon)
</div>
</div>
<div class="example-item">
<div class="example-image">
<img src="../img/logo/scverse-munich.png" alt="scverse logo - Munich example" />
</div>
<div class="example-caption">
<strong>Conference Branding</strong> - scverse conference in Munich in 2024
</div>
</div>
<div class="example-item">
<div class="example-image">
<img src="../img/logo/scverse-slide.png" alt="scverse logo - Example slide" />
</div>
<div class="example-caption"><strong>Slide Branding</strong> - example scverse-branded slide</div>
</div>
<div class="example-item">
<div class="example-image">
<img src="../img/logo/scverse-palms.png" alt="scverse logo - Palm tree example" />
</div>
<div class="example-caption">
<strong>Light Backgrounds</strong> - scverse icon with the concentric circles reminding of the
multi-layered scverse ecosystem
</div>
</div>
</div>
<h2 id="package-icons">Package Logos</h2>
<br />{{ $sections.package_icons | markdownify }}
<div id="icons-list" class="icons-only-mode">
{{ $packageicons := .Params.packageicons }}
{{ range $i, $e := $packageicons }}
<div
class="icon-section"
style="--hover-color: var(--{{ .name | lower }}-color);"
id="{{ .name | lower }}-tile"
>
<div class="icon-img">
<!-- Store both image versions in data attributes -->
<img
src="{{ .img }}"
data-icon="{{ .img }}"
data-icon-with-text="{{ if .imgWithText }}
{{ .imgWithText }}
{{ else }}
{{ .img }}
{{ end }}"
/>
</div>
<div class="icon-info">
<div class="icon-tile">
<div class="icon-text">
<span class="icon-name">{{ .name }}</span>
<span class="icon-details">{{ .details | markdownify }}</span>
</div>
</div>
<div class="icon-links">
{{ range $k, $v := $e.links }}
<!-- Add data attributes to store both versions of the URL -->
<a
href="{{ $v.url }}"
target="_blank"
class="icon-link"
data-icon-url="{{ $v.url }}"
data-with-text-url="{{ if $v.urlWithText }}
{{ $v.urlWithText }}
{{ else }}
{{ $v.url }}
{{ end }}"
>
{{ $v.text }}
</a>
{{ end }}
</div>
</div>
</div>
{{ end }}
</div>
{{ end }}


<div id="contact">
<h2>Contact</h2>
<br />{{ $sections.contact | markdownify }}
</div>
</div>
{{ end }}
</article>
</div>
</div>
</div>
{{ partial "footer" . }}
</body>

<script>
document.addEventListener("DOMContentLoaded", function () {
const toggleSwitch = document.getElementById("icon-display-mode")
const iconsList = document.getElementById("icons-list")

toggleSwitch.addEventListener("change", function () {
if (this.checked) {
// Switch to logos with text mode
iconsList.classList.remove("icons-only-mode")
iconsList.classList.add("icons-with-text-mode")

// Update all displayed images to the text version
document.querySelectorAll("#icons-list .icon-img img").forEach((img) => {
img.src = img.dataset.iconWithText
})

// Update download links to point to the text versions
document.querySelectorAll("#icons-list .icon-link").forEach((link) => {
link.href = link.dataset.withTextUrl
})
} else {
// Switch to icons only mode
iconsList.classList.remove("icons-with-text-mode")
iconsList.classList.add("icons-only-mode")

// Update all displayed images to the icon-only version
document.querySelectorAll("#icons-list .icon-img img").forEach((img) => {
img.src = img.dataset.icon
})

// Update download links to point to the icon-only versions
document.querySelectorAll("#icons-list .icon-link").forEach((link) => {
link.href = link.dataset.iconUrl
})
}
})
})
</script>
</html>
1 change: 1 addition & 0 deletions layouts/partials/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ <h5>Pages</h5>
<li><a href="/blog">Blog</a></li>
<li><a href="/events">Events</a></li>
<li><a href="/about">About</a></li>
<li><a href="/design">Media kit</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
Expand Down
3 changes: 3 additions & 0 deletions layouts/partials/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,9 @@
<li>
<a class="dropdown-item" href="/about/code_of_conduct">Code of Conduct</a>
</li>
<li>
<a class="dropdown-item" href="/design">Media kit</a>
</li>
<li>
<!-- This is just a second link to the /join page, but makes it more discoverable for people who think “I don’t want to join, just contact” -->
<a class="dropdown-item" href="/join">Contact</a>
Expand Down
Loading