You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import { Rubik } from 'next/font/google'
import NextImage from 'next-image-export-optimizer'
import { useState } from 'react'
import graphqlLogo from '../../public/img/logo.svg'
import graphqlLogoWhite from '../../public/img/brand/logos/logo-white.svg'
import graphqlLogoBlack from '../../public/img/brand/logos/logo-black.svg'
import graphqlLogoDontColor from '../../public/img/brand/logo-dont/dont-color.svg'
import graphqlLogoDontGradient from '../../public/img/brand/logo-dont/dont-gradient.svg'
import graphqlLogoDontWordmark from '../../public/img/brand/logo-dont/dont-color-wordmark.svg'
export const font = Rubik({
weight: ['300'],
subsets: ['latin']
})
GraphQL Logo & Brand Guidelines
Here you'll find dos and don’ts for use of the GraphQL brand and
GraphQL logo files in supported arrangement and colors.
Certain fair use of the GraphQL mark are pre-approved, such as factual
references to the project. Others require permission first, such as
apparel for sale or any other commercial purpose, using the word
GraphQL in domain names, or using the mark on printed materials, to
name a few. You can find a more comprehensive list in the trademark
policy.
- _Do_ keep the "GraphQL" word consistent, with the first letter and QL capitalized.
- _Do_ use "GraphQL" to clearly describe the GraphQL project or a conforming technology.
- GraphQL for Go
- Quick Start to GraphQL by <company>
- _Do_ provide clear attribution for projects, services and events, balancing "GraphQL" with your own brand.
- <service> for GraphQL by <company>
- Seattle GraphQL Meetup hosted by <company>
- _Don't_ lowercase or abbreviate "GraphQL" (for example "Graphql" or "GQL").
- _Don't_ directly combine “GraphQL” with another trademark or generic term.
- Go GraphQL
- GraphQL Quick Start by <company>
- _Don't_ use "GraphQL" in a way that could imply partnership, sponsorship, or endorsement by the GraphQL project or GraphQL Foundation either directly or by omission.
- _Don't_ use the GraphQL brand disparagingly or in any other way that violates our [code of conduct](/codeofconduct).
Color & Typeface
Our core color is called Rhodamine.
The GraphQL wordmark and headlines are set in Rubik Light.
- _Do_ use Rhodamine alongside grayscale or neutral colors.
- _Do_ prefer the P3 wide gamut color over RGB in digital; the PMS spot color over CMYK process in print.
- _Do_ use Rubik Light with optical kerning and standard letter spacing.
- _Don't_ use Rhodamine for large background areas.
- _Don't_ directly combine Rhodamine with other bright or saturated colors.
- _Don't_ bold, italicize, or alter the letter spacing of the GraphQL wordmark.
GraphQL Logo & Hexagraph
Our logomark is called the "hexagraph". The GraphQL logo is composed
of the hexagraph and the GraphQL wordmark set in Rubik Light.
<>
<>
<>
<>
<>
- _Do_ prefer the horizontal logo, but use the stacked logo at larger sizes.
- _Do_ use the provided assets, don't redraw the hexgraph.
-
_Don't_ rotate or stretch the hexagraph. Position the inner triangle pointing upwards.
The GraphQL logo should appear in Rhodamine, white, or black. It may
appear on any color background with the appropriate logo color.
- _Do_ prefer Rhodamine on a white background, our default color combination.
- _Do_ otherwise prefer use the white logo on most backgrounds unless contrast requires use of black.
- _Don't_ use black on a background of Rhodamine.
- _Don't_ use Rhodamine on a color or patterned background; use white instead.
- _Don't_ use different colors or apply gradients to the logo.
- _Don't_ use different colors for elements of the logo. Always use the same color for the hexagraph and wordmark.
<input
id="agree"
type="checkbox"
checked={agree}
onChange={(event) => setAgree(event.target.checked)}
/>
I have read and accept the brand and trademark guidelines.