Brand Guidelines
2026
BoardwalkCustom Wordmark
- Modified “Satoshi — Black Italic” with custom strikethrough styling.
- All letters in the wordmark are equal height except “O”.
- LRTB padding is the width of one “B”.
If typing it out
- Usage
- Display, Large Ideas, Kinetic Text
- Size
- 96px
- Tracking
- -6%
- Line height
- 84
- Case
- Caps Lock
LogoAvatar — for social platforms
- Width of the whale is ¾ of the width of the container it lives in.
- Use this for social media platforms — the square version, not the circle variants.
LogoCircle — not for social avatars
- No stroke: width of whale is ¾ of the container.
- Stroke: width of whale is ⅔ of the container.
- Stroke of the circle (if any) is 1/25 of the width.
- Not for social media platforms — it will crop.
Logo with WordmarkHero — Variant A
- The “B” in BOARDWALK is the unit of measure.
- Padding LR is the width of one “B”.
- Padding TB is half the width of one “B”.
- Whale is 2 ⅓ the height (7 units) of one “B”.
- Variant A is suited for large use — hero sections, etc.
Logo with WordmarkNavigation — Variant B
- The “B” in BOARDWALK is the unit of measure.
- Padding LR is the width of one “B”.
- Padding TB is half the width of one “B”.
- Whale is 1 ⅔ the height (5 units) of one “B”.
- Variant B is suited for small use — menu bars, etc.
Logo with WordmarkStacked
- The “B” is the vertical unit of measure.
- Padding LRTB equals the height of one “B”.
- Width of whale is 7/12 of the BOARDWALK wordmark.
- Grid is 5 “B” high, 1 wordmark wide.
- Whale anchors to the top; wordmark anchors to the bottom.
- All letters equal height except “O” — do not anchor “O”. Use “B”, not “O”, to anchor.
Boardwalk ColorsPrimary
Brick Red
Primary hero-logo red. Use extremely sparingly as an accent. Also the primary accent line color — lines 1/2/4px, never over 8px; the opposite axis fills its container.
Deep Space Blue
Primary blue. Backgrounds, text, buttons — can live anywhere. Functions as Boardwalk’s version of black.
Papaya Whip
Primary white. Use liberally for backgrounds, text, buttons. Functions as Boardwalk’s version of white.
Steel Blue
Primary alternative blue. Buttons, highlights, text. Reach for it when Deep Space Blue is too dark; great for accents on ocean waves.
Molten Lava
Not an accent — Boardwalk’s fill color when red is needed in an all-consuming way. A subdued red suited for larger red panels.
Boardwalk ColorsSecondary
Gunmetal
Secondary color, used mainly in iconography in place of shadow and accents.
Grey
Secondary color, also used mainly in iconography in place of shadow and accents.
Pale Slate
Used when Papaya Whip is too bright. On Boardwalk, mostly used in iconography.
Baltic Blue
Secondary blue. Dropdown menus, card accents; works well as a fill for evening / sunset art.
Charcoal Blue
Secondary blue with a grey tint. Primarily used as a fill for text fields.
Boardwalk ColorsSuccess / Alerts / Candles
Jungle Green
Success color. Also the green candlestick in trading charts.
Lobster Pink
Alert / warning color. Also the red candlestick in trading charts.
- These colors are never used unless you are showing success, alerts, green trading candles, or red trading candles.
- Do not use these colors unless you have a situation that calls for it.
Boardwalk ColorsGreyscale
Black
White
Grey
- Black & White / Greyscale should never be used on native branding.
- The only use case is third-party websites that require a black / white / grey palette.
Boardwalk FontsHero, header & body
Display · Large ideas · Kinetic textSatoshi — Black Italic
96px · -6% tracking · 84 line-height · Caps Lock
Download Satoshi ↗
Sub-display · Large idea sub-textSatoshi — Light Italic
96px · -6% tracking · 84 line-height · Caps Lock
Download Satoshi ↗
Header textPlus Jakarta Sans — Bold
48px · -3% tracking · 48 line-height
Download Plus Jakarta Sans ↗
Sub-header · NavigationPlus Jakarta Sans — SemiBold
24px · -4% tracking · auto line-height · Caps Lock
Download Plus Jakarta Sans ↗
Body textManrope — Light · the quick brown fox
14px · 0% tracking · auto line-height
Download Manrope ↗
Buttons · Links · EmphasisManrope — Medium · the quick brown fox
14px · 0% tracking · auto line-height
Download Manrope ↗