> For the complete documentation index, see [llms.txt](https://docs.usegimbal.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegimbal.app/resources/brand.md).
# Brand and channels
Where Gimbal speaks officially, and the visual system behind it: the mark, the colour tokens, the typefaces, the ornament and the motion.
## The mark
The mark, shown here on its icon plate
Two rounded bands, one cyan and one deep blue, interlocked into a diamond and rendered as polished glass, with a warm highlight caught in the inner face. It is a full-colour mark, cut out with no ground of its own, and it reads cleanly down to 16 px.
Three rules govern its use.
1. Pale grounds first: Snow, White or Frost. The dark Ink plate is reserved for app icons and favicons. No other background colour is permitted.
2. No recolouring, no outline, no flattening to a single colour, and no effect apart from the one soft shadow the system allows beneath it.
3. Clear space on every side of at least half the mark's width.
## Colour tokens
One accent, cobalt, taken from the deep blue band of the mark and used at five intensities. Everything else is a shade of the cool near-white ground. Three further colours exist for meaning alone: a warning, a healthy figure, a loss.
| Use | Token | Hex |
| ---------------------------------------------------- | ------------- | ----------------------- |
| Ground of the page, never pure white | Snow | `#f7f8fb` |
| Cards and raised panels | White | `#ffffff` |
| Tinted panels and nested blocks | Frost | `#f0f2f7` |
| A second, deeper tint | Frost 2 | `#e7eaf2` |
| Rules, borders and grid dots | Mist | `#e2e6ee` |
| Text, primary and headings | Ink | `#12161f` |
| Text, secondary | Slate | `#4b5261` |
| Captions and overlines | Stone | `#8b91a0` |
| The quietest text and counters | Quiet | `#b9bec9` |
| Actions, links, active states, the accent on figures | Cobalt | `#2b4fd8` |
| Cobalt pressed | Cobalt, deep | `#2140b6` |
| Cobalt muted, for completed indicators | Cobalt at 40% | `rgb(43 79 216 / 0.4)` |
| Cobalt background, for tags and badges | Cobalt at 12% | `rgb(43 79 216 / 0.12)` |
| Cobalt surface, for accented cards | Cobalt at 6% | `rgb(43 79 216 / 0.06)` |
| Cobalt border, for active card edges | Cobalt at 10% | `rgb(43 79 216 / 0.1)` |
| Warnings and margin calls | Ember | `#e08a3c` |
| Ember when set as text | Ember, deep | `#b8621a` |
| Figures that are healthy | Moss | `#3f9f6a` |
| Moss when set as text | Moss, deep | `#2c7d51` |
| Loss and liquidation | Coral | `#d45a4a` |
| Coral when set as text | Coral, deep | `#b3443a` |
The primary call to action carries the accent's glow, a shadow of cobalt at 25 percent. No decorative gradient exists anywhere. The only colour washes are two soft blurs of cobalt behind a hero, laid under a fine grain so they read as material rather than as gradient.
## Type
Two families, each with one job.
| Family | Set in it |
| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| Fraunces, weight 400, optical size 144 | Display text: page and section headings, the wordmark, the large figures. An italic in cobalt marks the one accented phrase in a heading |
| Plus Jakarta Sans | Everything else: body, section titles at 600, labels, buttons, tables, and every number, address and hash with tabular figures |
Overlines are the sans at 11 px and weight 700, letter-spaced and in Stone. Nothing is set in capitals beyond an overline.
## Ornament, imagery and motion
Radius grows with the importance of the element: 6 px on badges, 10 px on inputs and small buttons, 12 px on icon tiles, 14 px on nested blocks, 16 px on the primary call to action, 20 px on cards. Cards are white with a hairline of Mist and a shadow just deep enough to read as lift. Behind a hero or a closing section sit the two cobalt washes with grain over them and a faint dot grid that fades toward the edges. The only drawn ornament is a pair of hairline rings in cobalt, one still and one turning, that echo the interlocking bands of the mark.
Imagery is the mark itself, rendered large, and clean glass or product renders in the same light. No photography of people, no clip art, no illustration.
The washes drift slowly. Cards float by a few pixels. Figures count up when a screen loads. No element bounces, and none flashes.
## The name in text
Write Gimbal as a single word with one capital letter, the G. Running text never sets it in capitals; the wordmark is set in title case as well, in Fraunces.
## Official channels
| Channel | Where |
| ---------------- | ---------------------------------------------------- |
| Website | [usegimbal.app](https://usegimbal.app) |
| Documentation | [docs.usegimbal.app](https://docs.usegimbal.app) |
| X | [@useGimbal](https://x.com/useGimbal) |
| GitHub | [github.com/usegimbal](https://github.com/usegimbal) |
| General email | |
| Security reports | |
No other domain, handle or address represents Gimbal, regardless of what it claims. Contract addresses are published in two places and two only: this documentation and the website.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.usegimbal.app/resources/brand.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
