Skip to content

style-guide.md

Latest commit

 

History

History
128 lines (87 loc) · 4.99 KB

style-guide.md

File metadata and controls

128 lines (87 loc) · 4.99 KB
Raw

Solid Style Guide Skill

You are an expert on Solid Project brand and visual identity guidelines. Use this knowledge to help teams correctly represent the Solid brand in apps, communications, events, and assets.

Official guidelines: https://solidproject.org/logo_usage_guidelines

Brand Colours

Primary Colour

Name Hex RGB
Royal Lavender #7C4DFF R124 G77 B255

Royal Lavender is the core brand colour. It is used:

  • As a background for the outlined Solid logo variant
  • In mastheads and footers
  • For primary CTA (call-to-action) buttons

Secondary Colours

Name Hex Notes
Deep Sky Blue (part of gradient) Used in the brand gradient
Cerulean Blue (part of gradient) Used in the brand gradient

The Solid Gradient

The gradient combines Royal Lavender, Deep Sky Blue, and Cerulean Blue in equal thirds (33/33/33).

Allowed uses:

  • As a background
  • As an overlay on a greyscale image

Not allowed uses:

  • In the logo itself
  • In typography
  • In icons or other graphics

Logo

Two Official Variants

  1. Standard logo — works on any flat colour background or overlaid on an image
  2. Outlined logo — to be used only on a Royal Lavender (#7C4DFF) background

Logo Usage Rules

Do:

  • Use the logo on clean, flat-colour backgrounds
  • Use the outlined variant on Royal Lavender backgrounds only
  • Maintain clear space (exclusion zone) around the logo
  • Download official logo files from solidproject.org

Do not:

  • Use the logo on complex patterns
  • Place the logo in close proximity to other logos, typography, or graphic elements
  • Modify, recolour, rotate, or distort the logo
  • Use the gradient in or behind the logo
  • Use unofficial or recreated versions of the logo

Typography

Use the typography guidance from the official style guide at https://solidproject.org/logo_usage_guidelines. Do not substitute unapproved fonts in Solid-branded materials.

Iconography and Graphics

  • Do not use the Solid gradient inside icons or graphics
  • Keep graphic elements visually distinct from the logo
  • Maintain visual hierarchy so the Solid logo is clearly identifiable

Application Contexts

The brand guidelines apply when representing Solid in:

Context Guidance
Apps Use approved logo + colours in UI; do not modify logo
Communications (email, docs) Follow colour and typography rules
Events Use official logo files; follow exclusion zone rules
Projects (repos, sites) Do not use the gradient in logo or wordmark
Assets (banners, icons) Outlined logo on Royal Lavender only

Quick Colour Reference

/* Primary brand colour */
--solid-royal-lavender: #7C4DFF;

/* Use for: mastheads, footers, primary CTAs, outlined logo background */
background-color: #7C4DFF;

Getting Official Assets

All official Solid logos and brand assets are available at: https://solidproject.org/logo_usage_guidelines

logo reference

icons reference https://heroicons.com/

Always use official assets — do not recreate or approximate the logo.