# 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 it 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 in text. The wordmark is lowercase.
- The website is buildful.ai.
- Don't split or restyle the name: not BuildFul, Build-ful or BUILDFUL.

## The logo

The icon is a heart rising out of a mug. The default style is outline: an ink mug (white on dark) with a green heart. The solid style is one filled shape in one color, for sizes below 32px. The site and this kit never use a gradient version.

### Logo

The icon and the wordmark together. Use it whenever you have the room. Ink on light backgrounds, white on dark, and the solid white version on brand green.

| File | Use | Download |
|---|---|---|
| Logo | Default. Light backgrounds. | [SVG](https://buildful.ai/brand/logo.svg) · [PNG](https://buildful.ai/brand/png/logo-192h.png) |
| Logo, dark | Dark backgrounds. | [SVG](https://buildful.ai/brand/logo-dark.svg) · [PNG](https://buildful.ai/brand/png/logo-dark-192h.png) |
| Logo on green | Brand green backgrounds only. | [SVG](https://buildful.ai/brand/logo-solid-white.svg) |
| Logo, black | One color: print, embossing, stamps. | [SVG](https://buildful.ai/brand/logo-mono-black.svg) |
| Logo, white | One color on dark or on photos with a solid backing. | [SVG](https://buildful.ai/brand/logo-mono-white.svg) |

### Stacked logo

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

| File | Use | Download |
|---|---|---|
| Stacked | Light backgrounds. | [SVG](https://buildful.ai/brand/logo-stacked.svg) |
| Stacked, dark | Dark backgrounds. | [SVG](https://buildful.ai/brand/logo-stacked-dark.svg) |

### Icon

A heart rising out of a mug. The outline icon is the default at 32px and up. Below 32px the outline heart turns into dots, so use the solid one-color icon.

| File | Use | Download |
|---|---|---|
| Icon | 32px and up, light backgrounds. | [SVG](https://buildful.ai/brand/icon.svg) · [PNG](https://buildful.ai/brand/png/icon-1024.png) |
| Icon, dark | 32px and up, dark backgrounds. | [SVG](https://buildful.ai/brand/icon-dark.svg) · [PNG](https://buildful.ai/brand/png/icon-dark-1024.png) |
| Solid icon, black | Below 32px, light backgrounds. | [SVG](https://buildful.ai/brand/icon-solid-black.svg) |
| Solid icon, white | Below 32px, dark backgrounds. | [SVG](https://buildful.ai/brand/icon-solid-white.svg) |
| Outline icon, black | One color, 32px and up. | [SVG](https://buildful.ai/brand/icon-mono-black.svg) |
| Outline icon, white | One color on dark, 32px and up. | [SVG](https://buildful.ai/brand/icon-mono-white.svg) |

### App icon

The icon on a rounded tile. The white tile with the solid mug is our favicon and app icon, and the best choice for a link or integration that shows Buildful as a square.

| File | Use | Download |
|---|---|---|
| App icon | Favicon, integrations, directories. | [SVG](https://buildful.ai/brand/app-icon-solid.svg) · [PNG](https://buildful.ai/brand/png/app-icon-solid-1024.png) |
| App icon, outline | Large tiles on light pages. | [SVG](https://buildful.ai/brand/app-icon-light.svg) · [PNG](https://buildful.ai/brand/png/app-icon-light-1024.png) |
| App icon, green | Large tiles where color helps. | [SVG](https://buildful.ai/brand/app-icon-green.svg) · [PNG](https://buildful.ai/brand/png/app-icon-green-1024.png) |

### Wordmark

Lowercase “buildful” in Geist Medium, 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/wordmark.svg) |
| Wordmark, white | Dark backgrounds. | [SVG](https://buildful.ai/brand/wordmark-white.svg) |

### Social

Ready-made images for link previews and profiles.

| File | Use | Download |
|---|---|---|
| Link preview, dark | Open Graph image, 1200 × 630. | [PNG](https://buildful.ai/brand/social/og-image.png) |
| Link preview, light | 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/logo.svg" alt="Buildful" height="24">
```

## Do

- Use the files as they are. They are final artwork.
- Use the outline logo by default, and the solid one-color icon below 32px.
- Put the ink logo on light backgrounds, the white logo on dark, and the solid white logo on brand green.
- Leave clear space around the logo of at least twice the mug's line width on every side.
- Keep the icon at least 16px, and the logo's icon at least 15px tall (20px type).
- Use the wordmark alone only when the icon is on the same screen.

## Don't

- Stretch, rotate, outline, or add shadows or effects.
- Recolor parts of the logo, make the mug green, or fill it with a gradient.
- Mix the outline and solid styles in one lockup.
- Move the heart out of the mug or change the spacing.
- Retype the wordmark in another font.
- Place the logo on a busy photo without a solid backing.

## Colors

| Color | Hex | CSS variable | Use |
|---|---|---|---|
| Ink | `#0A0A0A` | `--bf-ink` | Logo, headings, primary buttons |
| White | `#FFFFFF` | `--bf-white` | Backgrounds, logo on dark |
| Dark | `#0B0F0D` | `--bf-dark` | Dark sections and panels |
| Green | `#0FA968` | `--bf-green` | The heart, dots and accents. Never body text |
| Green text | `#087A4B` | `--bf-green-text` | Green text and links on white |
| Green on dark | `#7FDDB0` | `--bf-green-soft` | Green text on dark |
| Body | `#4A4A4A` | `--bf-body` | Body text on white |
| Muted | `#6B6B6B` | `--bf-muted` | Captions and secondary text |
| Mint | `#F6FBF8` | `--bf-mint-50` | Soft surfaces and notes |
| Border | `#EBEBEB` | `--bf-border` | Rules and card edges |

## Type

- **Geist** (https://fonts.google.com/specimen/Geist): Interface and headings. Headings at weight 450, not bold, in sentence case.
- **Geist Mono** (https://fonts.google.com/specimen/Geist+Mono): Labels, code, and numbers in data.

## Contact

Press and partnerships: hello@buildful.ai