Skip to content

Brand Guidelines

Visual identity, tone, and usage guidelines for setype.

Logo

setype

Primary logo uses Space Grotesk.

Download SVG (placeholder)Download PNG (placeholder)

Colors

#0B0D10
Dark Base
Background
#11151B
Dark Surface
Cards, surfaces
#E7ECF2
Text Primary
Primary text
#97A3B6
Text Muted
Secondary text
#3BF0FF
Accent Cyan
Primary accent
#8A5CFF
Accent Violet
Secondary accent

Typography

Headings
Space Grotesk
Weight: Bold
Size: 32px - 72px
Body
Inter
Weight: Regular
Size: 16px - 18px
Code
JetBrains Mono
Weight: Regular
Size: 14px

Tone

Do

  • • Engineering-first, technical language
  • • Concise and direct
  • • Confident without fluff
  • • Focus on outcomes
  • • Clear and actionable

Don't

  • • Marketing fluff or buzzwords
  • • Vague promises
  • • Overly casual language
  • • Exaggerated claims
  • • Unnecessary complexity

Motion

Motion should be tasteful and purposeful.

  • Reveal animations on scroll (fade + slide)
  • Staggered lists for visual interest
  • Hover lift on interactive elements
  • Micro-interactions for feedback
  • Always respect prefers-reduced-motion

Use Framer Motion with reduced motion checks. Keep animations under 300ms for interactions.

Components

Our design system includes reusable components:

• Container
• SectionHeader
• Button
• Card
• Badge
• Tabs
• Accordion
• Callout

All components use glass morphism, subtle noise overlay, and consistent spacing.