Documentation Index Fetch the complete documentation index at: https://docs.discovr.media/llms.txt
Use this file to discover all available pages before exploring further.
Discovr doesn’t ship a pre-built sign-in button — we want you to have full control over how it fits into your UI. These assets and colors give you everything you need to build one that feels at home in your app.
Once your button is ready, wire it up to the Web Sign-in Flow or Device Code Flow .
The :Discovr brand mark You’ll notice we style the brand name with a colon prefix — :Discovr — in text and marketing. The colon is intentional branding, a nod to media metadata notation. Feel free to use this style in your own copy when referring to the platform (e.g., “Powered by :Discovr” or “Sign in with :Discovr”).
In button UI, the wordmark SVG is the :Discovr — you don’t need to add the colon separately.
Logos File Use it when… D.svgTight spaces — icon buttons, app icons, favicon-scale Discovr.svgFull wordmark, dark fill — light backgrounds Discovr_dark.svgFull wordmark, light fill — dark backgrounds or dark-filled buttons
Colors Token Light Dark Ink — button bg, border, text on light#1A1A1A#EAEAEACanvas — button text and fg on Ink#F4F1EA#2F2F2F
Hover: opacity: 0.9. Works for solid and outlined styles alike.Disabled / loading: opacity: 0.5 + pointer-events: none. Swap label to "Signing in…".Font: DM Sans (or system sans-serif), 14 px, weight 500.The wordmark SVG already contains the word “Discovr”, so in buttons the pattern is Sign in with + the wordmark SVG inline — the logo is the label. You don’t need to add the word “Discovr” as text alongside it.
Sign in with :Discovr The classic pattern — “Sign in with” as text, the wordmark SVG as the last word. Familiar to anyone who’s seen a Google or Apple sign-in button.
Light
Sign in with Dark
Sign in with < style > :root { --ink : #1A1A1A ; --canvas : #F4F1EA ; } @media (prefers-color-scheme: dark) { :root { --ink : #EAEAEA ; --canvas : #2F2F2F ; } } .discovr-pill { display : inline-flex ; align-items : center ; gap : 8 px ; height : 36 px ; padding : 0 20 px ; border : none ; border-radius : 100 px ; background : var ( --ink ); color : var ( --canvas ); font-family : "DM Sans" , "Inter" , system-ui , sans-serif ; font-size : 14 px ; font-weight : 500 ; white-space : nowrap ; cursor : pointer ; transition : opacity 150 ms ease ; } .discovr-pill:hover { opacity : 0.9 ; } .discovr-pill:disabled { opacity : 0.5 ; pointer-events : none ; } .discovr-pill img { height : 13 px ; flex-shrink : 0 ; } @media (prefers-color-scheme: dark) { .logo-light { display : none ; } } @media (prefers-color-scheme: light) { .logo-dark { display : none ; } } </ style > < button class = "discovr-pill" onclick = " signIn ()" > Sign in with < img class = "logo-light" src = "https://storage.googleapis.com/discoveryapi.firebasestorage.app/assets/brand/Discovr.svg" alt = "Discovr" /> < img class = "logo-dark" src = "https://storage.googleapis.com/discoveryapi.firebasestorage.app/assets/brand/Discovr_dark.svg" alt = "Discovr" /> </ button >
Continue with :Discovr Wordmark as a leading icon — clean and no background, just the glyph. Works great on login pages where you want a solid, confident button.
Light
Dark
< style > :root { --ink : #1A1A1A ; --canvas : #F4F1EA ; } @media (prefers-color-scheme: dark) { :root { --ink : #EAEAEA ; --canvas : #2F2F2F ; } } .discovr-solid { display : inline-flex ; align-items : center ; gap : 10 px ; height : 36 px ; padding : 0 16 px ; border : none ; border-radius : 8 px ; background : var ( --ink ); color : var ( --canvas ); font-family : "DM Sans" , "Inter" , system-ui , sans-serif ; font-size : 14 px ; font-weight : 500 ; white-space : nowrap ; cursor : pointer ; transition : opacity 150 ms ease ; } .discovr-solid:hover { opacity : 0.9 ; } .discovr-solid:disabled { opacity : 0.5 ; pointer-events : none ; } .discovr-solid img { height : 14 px ; flex-shrink : 0 ; } @media (prefers-color-scheme: dark) { .logo-light { display : none ; } } @media (prefers-color-scheme: light) { .logo-dark { display : none ; } } </ style > < button class = "discovr-solid" onclick = " signIn ()" > < img class = "logo-dark" src = "https://storage.googleapis.com/discoveryapi.firebasestorage.app/assets/brand/Discovr_dark.svg" alt = "" /> < img class = "logo-light" src = "https://storage.googleapis.com/discoveryapi.firebasestorage.app/assets/brand/Discovr.svg" alt = "" /> Continue with :Discovr </ button >
:Discovr Sign In — outlined Outlined ghost style, slightly different energy. The border-only treatment works well when the button is sitting on a card or alongside other options and you don’t want to compete visually.
Light
Dark
< style > :root { --ink : #1A1A1A ; } @media (prefers-color-scheme: dark) { :root { --ink : #EAEAEA ; } } .discovr-ghost { display : inline-flex ; align-items : center ; gap : 10 px ; height : 36 px ; padding : 0 16 px ; background : transparent ; color : var ( --ink ); border : 1.5 px solid var ( --ink ); border-radius : 8 px ; font-family : "DM Sans" , "Inter" , system-ui , sans-serif ; font-size : 14 px ; font-weight : 500 ; white-space : nowrap ; cursor : pointer ; transition : opacity 150 ms ease ; } .discovr-ghost:hover { opacity : 0.7 ; } .discovr-ghost:disabled { opacity : 0.4 ; pointer-events : none ; } .discovr-ghost img { height : 13 px ; flex-shrink : 0 ; } @media (prefers-color-scheme: dark) { .logo-light { display : none ; } } @media (prefers-color-scheme: light) { .logo-dark { display : none ; } } </ style > < button class = "discovr-ghost" onclick = " signIn ()" > < img class = "logo-light" src = "https://storage.googleapis.com/discoveryapi.firebasestorage.app/assets/brand/Discovr.svg" alt = "" /> < img class = "logo-dark" src = "https://storage.googleapis.com/discoveryapi.firebasestorage.app/assets/brand/Discovr_dark.svg" alt = "" /> :Discovr Sign In </ button >
Full-width — get started For dedicated sign-in screens. No text competing with the wordmark — just the logo, centered. The copy around the button does the explaining.
Light
Dark
< style > :root { --ink : #1A1A1A ; --canvas : #F4F1EA ; } @media (prefers-color-scheme: dark) { :root { --ink : #EAEAEA ; --canvas : #2F2F2F ; } } .discovr-hero { display : flex ; align-items : center ; justify-content : center ; width : 100 % ; height : 40 px ; background : var ( --ink ); border : none ; border-radius : 8 px ; cursor : pointer ; transition : opacity 150 ms ease ; } .discovr-hero:hover { opacity : 0.92 ; } .discovr-hero:disabled { opacity : 0.5 ; pointer-events : none ; } .discovr-hero img { height : 14 px ; } .discovr-hero .loading { color : var ( --canvas ); font-family : "DM Sans" , "Inter" , system-ui , sans-serif ; font-size : 14 px ; font-weight : 500 ; } @media (prefers-color-scheme: dark) { .logo-light { display : none ; } } @media (prefers-color-scheme: light) { .logo-dark { display : none ; } } </ style > < button class = "discovr-hero" onclick = " signIn ()" aria-label = "Get started with Discovr" > < img class = "logo-dark" src = "https://storage.googleapis.com/discoveryapi.firebasestorage.app/assets/brand/Discovr_dark.svg" alt = "Get started with Discovr" /> < img class = "logo-light" src = "https://storage.googleapis.com/discoveryapi.firebasestorage.app/assets/brand/Discovr.svg" alt = "Get started with Discovr" /> </ button >
A few things to keep in mind Nothing rigid here — just some patterns that tend to keep things looking consistent across integrations:
Ink and Canvas are the primary button colors, and they’re a good starting point even if you tweak things for your app
The wordmark SVG already contains the word “Discovr”, so there’s no need to add it as text alongside the logo
When the button has a dark (Ink) fill, use the light-fill wordmark (Discovr_dark.svg), and vice versa — they’re designed to sit on opposite surfaces
The logo looks best at its natural aspect ratio — scaling by height works well, but stretching or cropping tends to look off
This button is really only meant to trigger the Discovr sign-in flow, so try to keep it for that use case specifically
