Style Guide
Neo4j Logo
Our logo is a simple property graph.
The small white circles represent the detail or properties of the relationship between the three principal nodes, the larger green circles. The blue circle background centers the graph in the globe to signify that (graphs)-[:ARE]-(everywhere).
Colors
Below you can find the different color palettes we used on the site for the background, text, and accent colors, buttons, etc.
Web Colors
- Blue#0f5788
- Green#58b535
- Orange#F58220
Logo Colors
- Pantone 7460U#008cc1 RGB: 0, 140, 193
- Pantone 368U#65b144 RGB: 101, 177, 68
Typography
We use Open Sans and Letter Gothic.
When to Open Sans
Open Sans is used for all headings and paragraph text.
Headings
Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h6 and should be styled in a clear hierarchy (i.e., largest to smallest)
Paragraph
Paragraphs are groups of sentences, each with a lead (first sentence) and transition (last sentence). They are block level elements, meaning they stack vertically when repeated. Use them as such.
When to use Letter Gothic
Letter Gothic is used for code samples and code snippets to provide a clear distinction between code and paragraph text.
Editing the CSS
CSS for headings and paragraph styles can be found in app.css.
h1. Heading 1
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
h2. Heading 2
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo
h3. Heading 3
Dmedium-1c sed odio dui. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
h4. Heading 4
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
h5. Heading 5
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
h6. Heading 6
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.