01 — Main page

Logos

Right-click or click the download icon for SVG / PNG

  • Icon light
  • Icon dark
  • Wordmark

Colors

  • Background #fcfcfc
  • Text #363636
  • Bold #0f0f0f
  • Link underline #d2d2d2
  • Grey 200 #2c2c2c
  • Grey 300 #666
  • Border #eaeaeb

Buttons

  • Contact
  • Submit

Say hello

Say hello

Inputs

Notes footer subscribe. States: placeholder, error, disabled.

  • Placeholder
  • Error: Something went wrong. Please try again.
  • Disabled

Typography

  • 12px · Apercu Mono Pro upper

The quick brown fox jumps over the lazy dog.

  • 14px · Inter medium

The quick brown fox jumps over the lazy dog.

  • 15px · Body

The quick brown fox jumps over the lazy dog.

  • 18px · Section

The quick brown fox jumps over the lazy dog.

  • 24px · Display

The quick brown fox jumps over the lazy dog.

  • 28px · Page title

The quick brown fox jumps over the lazy dog.

Links

Spacing scale

Margin/padding tokens. Bar height = actual pixel value.

  • mb-sm8px
  • mb-md12px
  • mb-lg16px
  • mb-xl24px

Border radius

Tokens used across the site. --border-radius = 12px (globals).

  • 2px (VC nav)
  • 4px
  • 6px
  • 8px (buttons, cards)
  • 12px (--border-radius)
  • 16px
  • 50% (circles)
  • 100px (pills)
  • 500px (avatar)

Hovers

  • Link: underline darkens.
  • Button: background + shadow.
  • Card: optional scale.

Card (glass hover)

Homepage portfolio tile. Empty box with glassy blurred overlay on hover. backdrop-filter: blur(7.5px), background: rgba(0,0,0,0.25).

Context menu (navbar logo)

Right-click the logo in the navbar to see this. Shown here for reference.

Author (Last edited by)

Last edited on Dec 11, 2024 by

  • Dawid Cedrych
    CEO of Altalogy

  • Tom Antas
    CTO of Altalogy

  • Jakub Klimek
    Co-founder of Altalogy

Don't use the logo like this

  • Don't stretch
  • Don't outline
  • Don't use unapproved colors
  • Don't apply shadows or effects
  • Don't rotate
  • Don't apply patterns

Don't use the sygnet (icon) like this

Dark background. Keep proportions, approved colors, clear space.

  • Don't stretch
  • Don't use different colors

02 — Notes

Colors

  • Background #fcfcfc
  • Subheading #111
  • Arrow / muted #888
  • Body #363636
  • Surface #eaeaeb

Typography

  • Arrow back · Inter 14px
  • Subheading · Inter 16px 525
  • Essay subheading
  • Subheading alt · Inter 20px 600
  • Section title

Link

03 — VC

Venture subpage. /vc.

Colors

  • Background #fbf8f3
  • Text / header #1d1d1f
  • Heading #292929
  • Border / divider #e3e0da
  • Cursive accent #909a9e
  • Link underline rgba(27, 27, 29, 0.36)

Typography

  • Hero · Graphik Semibold
  • Brand works
  • Paragraph · Eyja 24px
  • Our clients have trusted us to build brands.
  • Section · Apercu Mono Pro 16px
  • Section description uppercase
  • Cursive · Cedarville 24px
  • ...and everything else that defines a VC

Link

Input

  • Twitter Widget Iframe