Brand guidelines

X Gravity

Brand guidelines

Chapters
02

Color

Paper and ink for most of a page. Violet for buttons and links. Coral for Brand, teal for Build. Switch between web and print values, and click a color to copy it.

Show values for
HEX and RGB, for screens.
Roughly how much of any page each color takesPaper first, ink second, everything else in small doses
  • Text on darkWhite for headings, about 80% white for body copy.
  • Violet means actButtons, links and focus rings. Not backgrounds for fun.
  • Lane colors stay in their laneCoral is Brand, teal is Build. Never general decoration.
Download the color kit
03

Type

Unbounded Light for headlines, Hanken Grotesk for everything else. Both are free on Google Fonts.

Click the headline and type your own
Your brand, website and tools.
One flat fee, from $8,000 a month. The thinking and the craft stay human, and AI clears the busywork so your fee goes further.
Aa

Unbounded

Headlines and big statements. Light 300 almost always; 400 and 500 for small headings. Fallback: Arial Black.

Aa

Hanken Grotesk

Body, buttons, labels and interface. 400, 500 and 600. Fallback: the system sans.

  • Sentence caseHeadlines and buttons: "See how an engagement works", never Title Case.
  • Short linesLeads around 40 characters, prose around 66.
  • No orphansHeadlines balance across lines. Body copy never ends on a lone word.
Download the type kit
04

Voice

Plain, specific and short. Tap a card to see a rewrite.

  • Concrete over abstractName the actual thing that changes for the business.
  • HonestSay what we think and why. Name the trade-offs. No hype words.
  • The owner's point of viewWrite about their business and their money, not about us.
  • Warm, not cuteA light touch of wit is fine. Jokes and slang aren't.
  • House rulesUS English. Brand and Build, capitalized. "And", never "&". Real numbers from real case studies only.
  • NeverRevolutionary, seamless, world-class, cutting-edge, synergy, leverage.
  • US EnglishWe write in US English (color, center, organize).

Lines we reuse. Click to copy.

Download the voice guide
05

Illustration

Isometric line drawings: thin ink lines, one lane color, and a diamond where AI helps.

The Build map from xgravity.co: the brand package feeds a map, a clickable prototype and a build, ending in one shared system with people in different states each using their own agent
The Build map, from the site
The Brand map goes here.The coral staircase from the Brand page belongs beside this one. Drop its file in assets as brand-illustration.jpg and it appears.X Gravity World, the bigger illustrated map, joins this chapter once it's finished.
  • Line, not fillThin ink strokes. Pale tints in the lane color, nothing heavier.
  • One lane per drawingCoral for Brand, teal for Build. Violet only for the client.
  • AI is a diamondA small filled diamond marks every place AI is at work. People still make the calls.
  • Labels outsideStraight leader lines out to text in the margins. Never words on the drawing.
  • No stock, no generic AI artReal project work, or drawings made in this system.
Download the illustrations
06

Icons

A 24px grid, a 1.25px line and one small accent X. Pick the colors, then download any icon as SVG.

Line
Accent

Need one that isn't here?

Ask Claude with the icon skill: "I need a dump truck." It draws the icon on the same grid, with the same line and accent, ready to add to the set.

Download the icon skill
07

Patterns and gradients

Seamless tiles made from the logo's own shapes, and the gradients behind dark sections. Pick colors, then download.

Pattern
Background
Strength100%

Gradients

  • Behind, never on topPatterns and gradients sit behind content. Never on the logo or inside type.
  • Quiet by defaultKeep patterns faint enough that text on them still reads easily.
  • Lanes still mean lanesCoral patterns and the Brand glow belong to Brand work. Teal belongs to Build.
Download patterns and gradients
08

Motion

One easing curve. Things fade and slide in. Nothing bounces.

Clarity before style.

Headlines

Fade in while sliding 28px from the left, the whole line at once. Never letter by letter.

0.8s fade · 0.9s slide · cubic-bezier(.2,.7,.2,1)

Work images

Hover a project image and it grows a touch. That's all.

scale 102.5% · 0.4s
View the work

Arrow links

The circle slides 4px right and darkens. Hover it.

0.25s

Glows

Coral and teal light drifting slowly behind dark cards.

30s · alternating · ease-in-out
09

Interface

Pill buttons, hairline rules and rounded cards. Build a button, then copy its code.

Button
Page
Background
Size


      
Download buttons.css

    

    

      
Lane boxes
BrandThe idea worth owning, and everything that carries it.
BuildSoftware built around your business. Owned by you.

    

    
    
      
  • WidthContent up to 1240px. Reading column 720px. Gutters 16 to 48px.
    • 
      
  • CardsInset 10 to 40px from the page edge, corners 20 to 36px, 12 to 28px apart.
    • 
      
  • Icons24px grid, 1.25px line, square caps, one small accent X. See the Icons chapter.
    • 
      
  • FocusA 2px violet ring, 3px out. Always visible on keyboard.
    • 
    

  






  
  

    

      
10
Skills

      
Instruction files that teach Claude or another AI tool to make on-brand work.

    

    

  






  

    

      
11
Templates

      
Brand and Build project decks for PowerPoint and Keynote. Flip through every slide here.

    

    

      
1 / 20

      

      

      
Download .pptx

    

  






  
  

    

      
12
Downloads

      
Every kit, skill and template. Small files are emailed as attachments, larger ones as a download link.

    

    
    
    
    X Gravity brand libraryThis page isn't listed or searchable. Share the link on purpose.