Task Board Brand Kit
The visual reference for anything produced for the Redbelly DAO Community Task Board: the board itself, task graphics, social assets, and contributor deliverables.
Scope, and what this is not
Every value here is read from the live application at app/globals.css, not from a mood board. If a token changes in the app, it changes here. That is the point: contributors and the board should not drift apart.
This is the Task Board brand, not Redbelly Network's corporate brand. It is built to sit consistently alongside Redbelly Network's own identity, but it is not a substitute for it and it does not govern Redbelly Network material. If a deliverable is going out under the Redbelly Network name rather than the DAO Task Board, check with the core team first.
The design language is called Kinetic Consensus. It reads as corporate modern with a technical edge: deep slate surfaces, one high-impact red, generous negative space, monospace reserved for anything machine-generated. Industrial and robust, but approachable enough for a community board.
Colour
One accent, used everywhere, never joined by a second. The red is the only saturated colour in the system and it is reserved for high-impact actions, brand moments, and critical status. Everything else is a slate neutral.
Dark surfaces, lowest to highest
Accent and state
The accent flips value between themes. On dark, accent text is #ffb3ae, because #EF5350 does not carry enough contrast for small text on a slate ground. On light, it darkens to #B3272A for the same reason. The solid fill #EF5350 stays constant in both. Get this wrong and the accent either disappears or shouts.
Light counterpart
The board ships a light theme. It is the same brand, not a second one.
Typography
Be Vietnam Pro carries every heading and all body copy. JetBrains Mono is functional only: wallet addresses, transaction hashes, task IDs, timestamps, scores, and any other machine-generated value. Never use the mono for prose because it looks technical.
Both are open-licence and free. Be Vietnam Pro and JetBrains Mono are both on Google Fonts. If a contributor's tool cannot embed them, the fallback order is the system UI sans and the system monospace, in that order. Never substitute a serif, and never substitute Inter as a stand-in.
Rules
| Rule | Value | Why |
|---|---|---|
| Body line height | 1.5 | Governance and technical documents get read end to end. Tight leading fatigues. |
| Line length | 65 to 75 characters | Anything wider loses the reader between lines. |
| Minimum body size on mobile | 16px | Most board traffic arrives from a Discord link on a phone. |
| Heading emphasis | Weight and colour | Control hierarchy with weight, not raw scale. No oversized headings for their own sake. |
Logo
There are two variants of the same lockup. Dark ink for light backgrounds, light ink for dark ones. Pick by background and never place either on a plate: the plate was a workaround from when only the dark variant existed, and it is retired.
On dark. dao-logo-on-dark.png, bare, no plate.
On light. dao-logo-on-light.png.
On the brand red, use the light-ink variant.
| Constraint | Value |
|---|---|
| Shape | Landscape, close to 7:5. The mark sits above the wordmark. Scale by height and let the width follow; never set both. |
| Clear space | Minimum the height of the mark's tallest letterform on all four sides. Nothing enters that box. The files already carry part of it, so do not crop them tight. |
| Minimum size | 28px tall on screen. Below that the wordmark stops reading, so use the favicon instead. |
| Which variant | Light ink on any surface darker than #DADDE1, including the brand red. Dark ink on anything lighter. Never a plate. |
| Master files | public/dao-logo-on-light.png and public/dao-logo-on-dark.png, copied alongside this page. |
Never recolour, stretch, rotate, add a shadow to, or place the mark over a busy photograph. If it will not read, use the wordmark in Be Vietnam Pro 700 instead.
Shape, spacing, depth
One radius scale, applied consistently. Soft enough to feel modern, square enough to stay architectural. Pill shapes are not used for primary buttons.
| Token | Value | Applies to |
|---|---|---|
| radius base | 4px | Buttons, inputs, chips, small cards |
| radius lg | 8px | Panels, modals, large containers |
| radius full | 9999px | Status dots and avatars only |
| spacing base | 4px | All component padding steps off this |
| gutter | 24px | Grid columns |
| margin, mobile | 16px | Strict. Never less. |
| margin, desktop | 64px | Section separation uses 48, 64, 80 |
| max width | 1280px | Content column |
Depth is tonal, not shadowed. A card sits above the page because it is a lighter slate, with a 1px border a shade lighter than its own fill. Heavy drop shadows are not part of this system. Modals and navigation may use a backdrop blur of 12px to 20px over a semi transparent dark fill.
Components
Buttons
Primary is a solid brand fill with white text. Secondary is a ghost with a neutral border that picks up the accent on hover. Destructive uses #DC2626, which is the one place a red other than the brand red is allowed, so that "delete" never reads as "confirm". Labels are one to three words and never wrap.
Inputs
Label above the input, always. Never use a placeholder as the label. Focus takes the accent border plus a 2px aura. Error text sits below the field, not beside it.
Status
Status is a small dot plus a monospace label. It is not a filled pill. This keeps dense lists calm, which matters on the submissions and admin views where dozens stack vertically.
Cards
Locked versus unlocked positions, delegation timelines, and which wallet counts for Snapshot.
Card header separated from body by a 1px rule. Use a card only when elevation communicates real hierarchy. Otherwise group with a top border or plain negative space.
Social and graphic assets
Sizes for anything produced for the DAO's channels. Deliver exports plus editable source files, always.
| Asset | Dimensions | Notes |
|---|---|---|
| X single image post | 1600 x 900 | 16:9. Keep text inside a 5% safe margin. |
| X square post | 1080 x 1080 | Better for dense reference graphics such as a venue list. |
| X header | 1500 x 500 | The centre 1500 x 360 is the only reliably visible band. |
| Discord embed image | 1200 x 630 | Also the correct Open Graph size for any linked page. |
| Avatar | 512 x 512 | The lockup centred on a square, sized to leave full clear space left and right rather than filling the width. Pick the variant that suits the avatar background. |
| Export format | PNG | SVG where the asset is pure vector. No JPEG for anything containing text. |
Graphics that carry facts which expire, such as a list of exchanges or a set of chain IDs, must carry a dated "last verified" line in the artwork itself. A screenshot outlives the post it was attached to.
Voice and copy
The board's writing is first person, direct, and plain. It owns mistakes rather than smoothing them over. These are hard rules for anything published under the DAO Task Board name.
Do
- Use plain hyphens. Write two sentences where you were reaching for a longer pause.
- Say the number. "Five days", not "a few days".
- Name the thing that went wrong and what happens next.
- Cite the rule number when you invoke a rule, and pull it from the board, not from an older draft.
- Lead with the answer, then the reasoning.
Do not
- No em dashes or en dashes. Anywhere. Not in copy, not in graphics, not in commit messages.
- No emoji. The board's own checkmark and cross glyphs are the only sanctioned symbols.
- No filler verbs. Not "elevate", "seamless", "unleash", "revolutionize".
- No corporate hedging. If a decision is not final, say what would make it final.
- No second accent colour introduced to make something feel important.
Contrast
Every pairing below meets WCAG AA. Anything not listed here has not been checked, so check it before shipping.
| Foreground | Background | Ratio | Use |
|---|---|---|---|
| #e4ebf0 | #0f181d | 14.92:1 | Body text on dark. Passes AAA. |
| #b8c4cc | #0f181d | 10.10:1 | Secondary text on dark. |
| #93a4ae | #0f181d | 6.98:1 | Muted labels. Do not go below this grey. |
| #93a4ae | #1e2a31 | 5.70:1 | The same muted grey on a card. Still AA, with less headroom. |
| #ffb3ae | #0f181d | 10.53:1 | Accent text and links on dark. |
| #ffffff | #EF5350 | 3.49:1 | Primary button label. Large text only, 18px and up or 14px bold. |
| #16202A | #F6F7F8 | 15.37:1 | Body text on light. |
| #B3272A | #F6F7F8 | 6.04:1 | Accent text on light. |
The white on brand red pairing is the one tight spot in the system at 3.5:1. It is fine for a button label at 14px bold or larger, which is how the board uses it. It is not fine for body copy, captions, or small print on a red field. If you need small text on red, invert: dark text on #ffdad7.