Brand
Logos, colors and type, ready to use
Everything you need to write about Scintillar, link to it or credit it in something you've built: the logo files, our colors and type, and a short guide to using them well. Take what you need.
SVG and PNG logos, icons and color tokens (ZIP)
Logos
The logo in every shape
Three layouts, each in green and mono, for light and dark backgrounds. Every file comes as SVG and as PNG at three sizes.
Horizontal
The default. Headers, footers, documents and slides.
Green, for light backgrounds
Green, for dark backgrounds
Mono, for light backgrounds
Mono, for dark backgrounds
Vertical
Centered layouts: title slides, posters, empty states.
Green, for light backgrounds
Green, for dark backgrounds
Mono, for light backgrounds
Mono, for dark backgrounds
Mark
Small spaces: avatars, social profiles, loading states.
Green, for light backgrounds
Green, for dark backgrounds
Mono, for light backgrounds
Mono, for dark backgrounds
Which version?
- Use the green logo on plain light or dark backgrounds. That's most of the time.
- Use mono on photos, on colored backgrounds, or when printing in one color.
- Pick the file made for your background: "for light backgrounds" has dark ink, "for dark backgrounds" has light ink.
Icons
App icons and favicons
The mark on a tile, for browser tabs, app icons and anywhere a square or round shape is expected. Solid tiles stand out; outline tiles sit quietly in a list.
For light interfaces
Solid, round, green
Solid, square, green
Solid, round, mono
Solid, square, mono
Outline, round, green
Outline, square, green
Outline, round, mono
Outline, square, mono
For dark interfaces
Solid, round, green
Solid, square, green
Solid, round, mono
Solid, square, mono
Outline, round, green
Outline, square, green
Outline, round, mono
Outline, square, mono
Usage
Give it room, keep it whole
Use the files as they are. Never redraw, retype, recolor, stretch, rotate or animate the logo.
Clear space
Keep space at least as wide as one of the mark's side rings empty on every side. Measure from the drawing, not from the edge of the file.
Minimum size
Below these sizes the rings close up. Use the icon instead.
- Horizontal
- 120 px wide
- Vertical
- 80 px wide
- Mark
- 24 px tall
- Icon
- 16 px (favicon)
Please don't
Stretch or squash it
Rotate or tilt it
Change its colors
Add shadows, glows or effects
Use it without enough contrast
Retype the name in another font
Do
- Use the downloaded files without changes.
- Pick the version made for your background.
- Link the logo to scintillar.com when it stands for Scintillar.
Color
Jade green on calm neutrals
Green marks what matters: actions, links, focus and the logo. Neutrals with a hint of green carry everything else. Each theme has its own green, tuned for contrast.
Light theme
background
Page background
foreground
Headings and body text
card
Cards and panels
primary
Buttons, links, focus rings
primary-foreground
Text on green
muted
Quiet areas and chips
muted-foreground
Secondary text
border
Dividers and outlines
Dark theme
background
Page background
foreground
Headings and body text
card
Cards and panels
primary
Buttons, links, focus rings
primary-foreground
Text on green
muted
Quiet areas and chips
muted-foreground
Secondary text
border
Dividers and outlines
Logo green
The logo files use their own greens: #005E3E on light backgrounds and #5CD6AD on dark ones. Use the files rather than matching these by hand.
Contrast
Every pairing below meets WCAG AAA for body text (7:1 or more).
- Text on backgroundLight theme17.5:1AAA
- Green on backgroundLight theme7.3:1AAA
- Text on greenLight theme7.1:1AAA
- Secondary text on backgroundLight theme7.6:1AAA
- Text on backgroundDark theme18.8:1AAA
- Green on backgroundDark theme8.5:1AAA
- Text on greenDark theme8.4:1AAA
- Secondary text on backgroundDark theme14.0:1AAA
Tokens for code and design tools
The same colors and type as CSS variables and in the W3C design tokens format, which most design tools can import.
Type
JetBrains Mono, for everything
One family for headings, body text and code. Bold for headings, thin for body copy.
Heading 1
Bold 700 · 48 px
Self-serve tools
Heading 2
Bold 700 · 36 px
Host it yourself
Heading 3
Bold 700 · 18 px
One small tool at a time
Body
Light 300 · 16 px
Every tool takes your logo, colors and domain.
Eyebrow
Bold 700 · 12 px · uppercase
What is Scintillar?
Setting text
- Headings in sentence case. Tool names keep their capitals.
- Keep body lines under about 70 characters.
- Don't use other fonts next to it, even for code.
Naming
Saying the name
Scintillar is one word with a capital S. The tools have their own names, written as names.
Scintillar
SCINTILLAR, scintillar, ScintilarDocs Shell, Scintillar UI, Status Pages
docs-shell, the scintillar ui, status page toolScintillar's tools
Scintillar's projects, Scintillar platform@sntlr/docs-shell (in code and install commands)
Sntlr, SNTLR (in prose)
Our two domains
- scintillar.com is our home: this site, the tool catalog and how to reach us.
- sntlr.app is where things run: each tool's docs and our own instance, at <tool>.sntlr.app.
Tools and your brand
Your brand comes first
Every Scintillar tool is white-label: it takes your logo, colors and domain and runs under your brand. Our logo stays out of the way.
No Scintillar logo required
A tool you host shows your brand, not ours. You never have to display our logo or name.
Don't use ours as yours
Don't use the Scintillar logo as your instance's logo, or suggest that Scintillar runs or endorses your site.
Our own instances
Our instances on sntlr.app use the Scintillar brand, with the tool name next to the mark.
Want to give credit?
It's optional and always welcome. One small line in the footer or docs is enough.
<a href="https://scintillar.com">Built with Scintillar</a>Voice
Clear words, plain promises
We write like a friendly maintainer: helpful, direct and honest about what a tool is and isn't.
Lead with what you get
Describe what the tool does for people, not what it's built with.
SayPut your docs online with versions, search and two languages.
NotA Next.js MDX documentation framework.
Honest about scope
Our tools are provided as is, for hobbyists and small projects. Don't promise support, uptime or a roadmap.
SayFree to use, provided as is. Help is best-effort on GitHub.
NotEnterprise-grade platform with dedicated support.
Tools at the center
Talk about the tools. Mention the community behind them lightly.
SayStatus Pages gives your services one public status page.
NotOur amazing team is revolutionizing status pages!
Something not covered here?
Ask on GitHub and we'll answer when we can.