# Buildful brand

Logos, colors, type and naming for Buildful (buildful.ai). Everything here is free to use when you write about Buildful, link to it, or build an integration. For anything else, email hello@buildful.ai.

- Page: https://buildful.ai/brand
- All files in one zip: https://buildful.ai/brand/buildful-brand-kit.zip
- CSS variables: https://buildful.ai/brand/brand-tokens.css

## Describe Buildful

Short: Buildful is coding superintelligence for everyone: 1,000 tasks for $10 a month.

Long: Buildful is coding superintelligence for everyone. Describe a change, and Buildful builds it in a cloud sandbox, runs your checks, tests UI changes in a real browser with a recording, and opens a pull request on your GitHub. It routes every task to the right model, so frontier-level work costs about a cent a task: 1,000 tasks for $10 a month. Buildful is made by the makers of Hashnode.

## Name

- Write Buildful with a capital B, as the wordmark does.
- The website is buildful.ai.
- Don't split or restyle the name: not BuildFul, Build-ful or BUILDFUL.

## The logo

The icon is a bowl with a heart sinking into it, one solid shape. The default logo has the icon in brand green and the wordmark, “Buildful” in Geist SemiBold, in ink. The one-color versions are ink on light backgrounds and white on dark.

### Logo

The icon and the wordmark together. Use it whenever you have the room. The green logo is the default; use the ink or white logo where you can only use one color.

| File | Use | Download |
|---|---|---|
| Logo | Default. Light backgrounds. | [SVG](https://buildful.ai/brand/buildful-logo-green.svg) · [PNG](https://buildful.ai/brand/png/buildful-logo-green-256h.png) |
| Logo, ink | One color on light backgrounds. | [SVG](https://buildful.ai/brand/buildful-logo.svg) · [PNG](https://buildful.ai/brand/png/buildful-logo-256h.png) |
| Logo, white | Dark backgrounds. | [SVG](https://buildful.ai/brand/buildful-logo-white.svg) · [PNG](https://buildful.ai/brand/png/buildful-logo-white-256h.png) |
| Logo, currentColor | Inline SVG that takes the surrounding text color. | [SVG](https://buildful.ai/brand/buildful-logo-currentcolor.svg) |

### Stacked logo

The icon above the wordmark, for square and centered spaces such as posters, event badges and login cards.

| File | Use | Download |
|---|---|---|
| Stacked | Default. Light backgrounds. | [SVG](https://buildful.ai/brand/buildful-logo-stacked-green.svg) |
| Stacked, ink | One color on light backgrounds. | [SVG](https://buildful.ai/brand/buildful-logo-stacked.svg) · [PNG](https://buildful.ai/brand/png/buildful-logo-stacked-512h.png) |
| Stacked, white | Dark backgrounds. | [SVG](https://buildful.ai/brand/buildful-logo-stacked-white.svg) · [PNG](https://buildful.ai/brand/png/buildful-logo-stacked-white-512h.png) |

### Icon

A bowl with a heart sinking into it, one solid shape. Use it alone in small or square spaces, at 16px and up.

| File | Use | Download |
|---|---|---|
| Icon | Default. Light backgrounds. | [SVG](https://buildful.ai/brand/buildful-icon-green.svg) · [PNG](https://buildful.ai/brand/png/buildful-icon-green-1024.png) |
| Icon, ink | One color on light backgrounds. | [SVG](https://buildful.ai/brand/buildful-icon.svg) · [PNG](https://buildful.ai/brand/png/buildful-icon-1024.png) |
| Icon, white | Dark backgrounds. | [SVG](https://buildful.ai/brand/buildful-icon-white.svg) · [PNG](https://buildful.ai/brand/png/buildful-icon-white-1024.png) |

### App icon

The icon on a rounded square: white on dark (our favicon), or green on white. Use either wherever Buildful appears as a square: integrations, app directories, link previews.

| File | Use | Download |
|---|---|---|
| App icon | Favicon, home screens, avatars. | [SVG](https://buildful.ai/brand/buildful-app-icon-dark.svg) · [PNG](https://buildful.ai/brand/png/buildful-app-icon-dark-1024.png) |
| App icon, light | Integrations, directories, light layouts. | [SVG](https://buildful.ai/brand/buildful-app-icon.svg) · [PNG](https://buildful.ai/brand/png/buildful-app-icon-1024.png) |

### Wordmark

“Buildful” in Geist SemiBold, already outlined. Use it alone only when the icon is on the same screen.

| File | Use | Download |
|---|---|---|
| Wordmark | Light backgrounds. | [SVG](https://buildful.ai/brand/buildful-wordmark.svg) |
| Wordmark, white | Dark backgrounds. | [SVG](https://buildful.ai/brand/buildful-wordmark-white.svg) |

### Social

Ready-made images for link previews and profiles.

| File | Use | Download |
|---|---|---|
| Link preview | Open Graph image, 1200 × 630. | [PNG](https://buildful.ai/brand/social/og-image-light.png) |
| Profile banner | X and LinkedIn header, 1500 × 500. | [PNG](https://buildful.ai/brand/social/banner-1500x500.png) |
| Avatar | Profile picture, 400 × 400. Safe for circle crops. | [PNG](https://buildful.ai/brand/social/avatar-400.png) |

To show the logo on a web page:

```html
<img src="https://buildful.ai/brand/buildful-logo-green.svg" alt="Buildful" height="24">
```

## Do

- Use the files as they are. They are final artwork.
- Use the green logo by default: the icon in brand green, the wordmark in ink.
- Use the ink logo where you can only print one color, and the white logo on dark backgrounds.
- Leave clear space around the logo of at least half the icon's height on every side.
- Size the logo by its height: at least 24px tall, and the icon alone at least 16px.
- Use the wordmark alone only when the icon is on the same screen.

## Don't

- Stretch, rotate, outline, or add shadows or effects.
- Recolor the logo beyond green, ink and white, color the wordmark green, or fill it with a gradient.
- Change the space or size between the icon and the wordmark, or move the heart.
- Retype the wordmark in another font.
- Place the logo on a busy photo without a solid backing.

## Colors

| Color | Hex | CSS variable | Use |
|---|---|---|---|
| Green | `#0FA968` | `--bf-green` | The icon and accents. Never body text |
| Green text | `#087A4B` | `--bf-green-text` | Green text and links on white |
| Ink | `#111111` | `--bf-ink` | The wordmark, the one-color logo and text |
| White | `#FFFFFF` | `--bf-white` | Backgrounds, and the logo on dark |

## Type

- **Geist** (https://fonts.google.com/specimen/Geist): Our typeface. The wordmark is Geist SemiBold.
- **Geist Mono** (https://fonts.google.com/specimen/Geist+Mono): Code and labels.

## Contact

Press and partnerships: hello@buildful.ai