SLABGG brand assets
Logo, colors, and typography for the SLABGG brand. Download assets and follow the guidelines for consistent usage.
Logo
| Format | Description | Size |
|---|---|---|
| SVG | Vector — scalable, recommended | < 1 KB |
| PNG | Transparent background | ~5 KB |
| ICO | Favicon format | ~2 KB |
Construction
The logo is an isometric cube built from three faces: top (light gold #E8C547), right (mid gold #D4A830), and left (dark gold #B8961F). The shape uses crisp edges for a pixel-art aesthetic. Minimum size: 16×16px. Clear space: equal to the logo height on all sides.
Colors
Background
#131210
19 18 16
Surface
#1C1B18
28 27 24
Accent
#E8C547
232 197 71
Text
#F5F4F1
245 244 241
Muted
#8B8A85
139 138 133
Border
#2A2825
42 40 37
Accent scale
Accent Light
#F0D66A
Hover states
Accent Base
#E8C547
Primary accent
Accent Mid
#D4A830
Logo right face
Accent Dark
#B8961F
Logo left face
Usage
- Accent is the primary brand color — use sparingly for CTAs, highlights, and the logo only.
- Text on Background is the default content pairing.
- Muted for secondary text, labels, and metadata.
- Border for dividers and card outlines — never use accent for borders.
- Never use gradients. The brand is flat, solid colors only.
Typography
Geist Sans
Used for headings and body text. Weights: 400 (regular), 500 (medium), 600 (semibold). Line-height: 1.1 for headings, 1.6 for body.
Aa Bb Cc 123
Geist Mono
Used for labels, metadata, numbers, and UI elements. Weights: 400 (regular), 500 (medium). Tabular nums for data.
Aa Bb Cc 123
| Token | Size | Usage |
|---|---|---|
| text-xs | 12px | Labels, metadata |
| text-sm | 14px | Body text |
| text-base | 16px | Body (lg) |
| text-lg | 18px | Card titles |
| text-4xl | 36px | Hero heading |
| text-5xl | 48px | Hero heading (md) |
Layout
Container
Max width: max-w-6xl (1152px). Horizontal padding: px-4 on mobile, px-6 on sm+.
Section rhythm
Vertical padding: py-16 on mobile, py-20 on md+. Sections separated by border-t border-border.
Border radius
Cards: rounded-lg (8px). Buttons: rounded-md (6px). Images: rounded-2xl (16px).
Borders
All borders use border-border (#2A2825) at 1px. Never use accent color for borders.
Don’ts
- ×Don’t recolor the logo — always use the three gold tones.
- ×Don’t add shadows, glows, or gradients to the logo.
- ×Don’t stretch or distort the logo aspect ratio.
- ×Don’t use accent color for large background areas.
- ×Don’t use purple or multicolor gradients anywhere.
- ×Don’t place the logo on busy or low-contrast backgrounds.