# Monolith brand

> Monolith is the permissionless stablecoin factory on Ethereum: anyone can launch a crypto-backed stablecoin, borrow it, stake it, redeem it and govern it through its DAO.

Version 2.2, updated Nov 3, 2026. Page: https://app.monolith.market/brand · JSON: https://app.monolith.market/brand.json

**Tagline:** Launch a stablecoin built to last. **Subline:** Launch with flexibility. Transition to immutability. Owned by Inverse Finance DAO.

- App: https://app.monolith.market
- Website: https://www.monolith.market
- Docs: https://docs.monolith.market
- X: https://x.com/MonolithMarket
- Newsletter: https://monolithmarkets.substack.com
- Discord: https://discord.gg/wz2JYmA93

## Essence

A stablecoin factory that people can trust for decades. The brand says so by being calm.

Monolith is the permissionless stablecoin factory on Ethereum: anyone can launch a crypto-backed stablecoin, borrow it, stake it, redeem it and govern it through its DAO.

Monolith takes its name and its stance from standing stones: plain, heavy, unmoved by weather. Stablecoins launched on Monolith start flexible and turn immutable on a deadline; the brand carries that promise as quiet confidence rather than noise.

| We are | We are not |
| --- | --- |
| Calm and certain | Loud, hyped or urgent |
| Plain and precise | Clever at the cost of clarity |
| Durable: paper, ink, stone | Glowing, neon, “futuristic” |
| Generous with space | Dense, boxed in, every number at once |
| Honest about risk | Hiding risk in fine print or color |

- Tagline: “Launch a stablecoin built to last.”
- Subline: “Launch with flexibility. Transition to immutability.”
- Ownership: Owned by Inverse Finance DAO.

## Principles

Five rules every screen, post and asset follows.

| Rule | What it means |
| --- | --- |
| One accent | Orange marks the brand, where you are, and what you earn: yields and earnings are orange, so they are found at a glance. It never marks risk or state. |
| Color means state | Green, amber and red only describe a state, and always next to a word: Healthy, Watch, At risk. |
| Hierarchy, not boxes | Type size, weight, hairlines and space make the order. One card level; cards never sit inside cards. |
| Fewer words | Labels of one to three words. Explanations live behind an info icon. No subtitles that repeat the tab. |
| Room to breathe | An 8-point spacing scale and generous margins. Nothing smaller than 12px. |

## Logo

The mark is a standing slab, cut on two corners. Orange on paper, always flat.

*Shown live on the page: The lockup: the orange mark beside the word Monolith in Lora SemiBold, on paper and on ink, and the mark alone.*

| Part | Spec |
| --- | --- |
| Mark | The slab path, 17 × 56 units (aspect 0.303). Orange #FF7230 on paper. |
| Wordmark | “Monolith” in Lora SemiBold (600), tracking −0.01em, ink #1A1A1A. |
| Lockup | Mark height = 1.33 × the wordmark’s font size; gap = 0.36 × the mark height. In the app: mark 28px, word 21px, gap 10px. |
| Clear space | At least the mark’s width on every side of the lockup. |
| Minimum size | Mark 16px tall on screen (12px for favicons only); lockup 96px wide. |
| On dark | Orange mark, paper wordmark (#FAF9F5) on ink. Never on a photo without a solid band behind it. |

**Do**
- Keep the mark flat orange, or ink when color is unavailable
- Give it clear space
- Use the supplied files

**Don’t**
- Gradients, glows, shadows or outlines
- Rotating, skewing or stretching the slab
- Recoloring outside orange, ink and paper
- Placing it on busy images
- Rewriting the wordmark in another typeface

- [Mark, orange (SVG)](https://app.monolith.market/brand/logo/monolith-mark.svg): Primary
- [Mark, ink (SVG)](https://app.monolith.market/brand/logo/monolith-mark-ink.svg): One-color print and stamps
- [Mark, paper (SVG)](https://app.monolith.market/brand/logo/monolith-mark-paper.svg): On ink or photos with a band
- [Lockup on paper (PNG)](https://app.monolith.market/brand/logo/monolith-lockup.png): 1600 px wide, transparent
- [Lockup on ink (PNG)](https://app.monolith.market/brand/logo/monolith-lockup-on-ink.png): 1600 px wide, transparent

## Color

Paper, ink and one orange. Light only: one theme to build, test and keep consistent.

| Name | Token | Hex | Contrast on paper | Use |
| --- | --- | --- | --- | --- |
| Paper | `paper` | `#F0EEE6` | – | The page. Every screen and asset starts on paper. |
| Paper deep | `paper-deep` | `#E8E5DB` | – | Recessed tracks (the coin tab bar, segmented controls, meters), skeletons, quiet tiles. |
| Surface | `surface` | `#FAF9F5` | – | Cards, panels, inputs on surfaces, menus, modals, the open tab. |
| Rule | `rule` | `#DFDCD1` | – | Hairlines: card borders, row dividers, the top bar. |
| Rule strong | `rule-strong` | `#C9C6BB` | – | Input borders, secondary buttons, emphasized dividers. |
| Ink | `ink` | `#1A1A1A` | 14.98:1 | Text, figures, primary buttons, the open tab’s label. |
| Ink soft | `ink-soft` | `#3D3D3D` | 9.35:1 | Secondary text, field labels, unselected tabs. |
| Muted | `muted` | `#696760` | 4.87:1 | Labels, captions, meta lines. The lightest color allowed for text. |
| Faint | `faint` | `#A9A69B` | 2.10:1 | Placeholders and decorative marks only, never information. |
| On ink | `on-ink` | `#FAF9F5` | – | Text on ink (16.5:1). |
| Orange | `brand` | `#FF7230` | 2.35:1 | The mark, the active tab icon, the brand moment. Never text, never data. |
| Orange strong | `brand-strong` | `#D45A20` | 3.42:1 | The active nav underline; the italic accent in large display type; yields and earnings at 24px and up. |
| Orange text | `brand-text` | `#B04A17` | 4.71:1 | Orange when it has to be small text, e.g. a brand link; yields and earnings below 24px. |
| Orange tint | `brand-tint` | `#F8E2D3` | – | Brand banners and the "live" chip, with ink text. |
| Positive | `positive` | `#2E7550` | 4.79:1 | Healthy, on peg, done, executed. Always with a word. |
| Positive tint | `positive-tint` | `#E2EDE4` | – | Background of positive chips and notices. |
| Caution | `caution` | `#8A5D0E` | 4.95:1 | Watch, pending action, not delegated. Always with a word. |
| Caution tint | `caution-tint` | `#F3E8CF` | – | Background of caution chips and notices. |
| Negative | `negative` | `#B03A2A` | 5.19:1 | At risk, failed, defeated, errors. Always with a word. |
| Negative tint | `negative-tint` | `#F5E1DB` | – | Background of negative chips and notices. |

- Text uses ink, ink soft or muted. Muted (#696760) is the lightest text color: 4.9:1 on paper, 5.4:1 on surface.
- Orange #FF7230 is 2.35:1 on paper, so it never carries text. Small orange text uses #B04A17; the active nav underline uses #D45A20. Yields and earnings use #D45A20 at 24px and up (3.4:1, past the 3:1 large text needs) and #B04A17 below.
- Primary buttons are ink with paper text (16.5:1). The one orange button per page, if any, carries ink text (6.4:1).
- States come in pairs: the color for the word, its tint for the chip or notice behind it (all above 4.6:1).
- Charts: series in this order: #1A1A1A, #FF7230, #A9A69B, #2E7550, #8A5D0E. Lines in ink on a light area; gridlines in rule.

## Typography

Lora for titles and the figures that matter; Inter for everything else.

*Shown live on the page: Lora and Inter specimens at each step of the scale.*

| Role | Family | Size | Weight | Tracking | Use |
| --- | --- | --- | --- | --- | --- |
| Display | Lora | 52px (36px on phones) | 500 | -0.025em | Page titles: Stablecoins, Earn, Deploy a stablecoin. |
| Title | Lora | 44px (34px) | 500 | -0.02em | A coin’s name in its header. |
| Figure | Lora | 28px (24px) | 500 | -0.01em | Key figures: $638K, 1.19%, 150%. Three or four per view. |
| Section | Lora | 24px (22px) | 500 | -0.01em | Section titles: Market, Activity, Your position. |
| Heading | Lora | 20–22px | 500 | 0 | Card and modal titles. |
| Body | Inter | 14–16px | 400–500 | 0 | Interface text, rows, buttons (14px), tab labels (16px). |
| Label | Inter | 13px | 400–600 | 0 | Stat and field labels, meta lines. |
| Small | Inter | 12px | 400–600 | 0 | Chips, notes, helper lines. Nothing is ever smaller. |

- Both families load from Google Fonts: Lora 400–700 (and italic), Inter 300–800.
- Figures are Inter or Lora with tabular numerals, never a monospace font.
- Sentence case everywhere: “Connect wallet”, “Your position”. No ALL-CAPS labels in the app.
- Italic Lora in orange strong is a display accent for the website and campaigns only (“built to last.”), never in the app.
- On the website, small tracked capitals (e.g. “ETHEREUM MAINNET”) serve as eyebrows above headlines.

## Voice and naming

Plain words, short sentences, exact numbers. Say what happens, then stop.

| Say | Don’t say | Why |
| --- | --- | --- |
| DAO, DAOs | CoinDAO, CoinDAOs | The product is a DAO; CoinDAO is an internal name. |
| stablecoin | coin (in public copy) | Precise about what it is. Code and URLs may keep “coin”. |
| governance token, or its symbol (SWAN) | GOV | GOV is a placeholder, not a word. |
| staked SwanUSD (sSwanUSD) | the vault share | Name what people hold. |
| interest-free loan | free debt (in UI copy) | Plain language; “free debt” stays in docs and code. |
| APR for borrow rates, APY for staking yields | APY on a borrow rate | A loan’s rate is quoted as APR (“1.19% APR”); a staker’s yield as APY (“Stablecoin APY”, “Stake APY”). |
| Monolith | Monolith Market, Monolith Protocol (in prose) | One name. The handle stays @MonolithMarket. |

- Buttons are a verb and, when needed, an object: “Deposit & borrow”, “Stake SwanUSD”, “Connect wallet”.
- Labels are one to three words. Helper lines are six words or fewer. Longer explanations go behind an info icon.
- Errors say what to do: “Exceeds wallet balance”, “Switch to Ethereum”.
- Risk is stated plainly, once, with a link to the full text: “Read the risks.”
- No hype: no “revolutionary”, “to the moon”, rockets or countdowns in the product. Campaigns may be playful; the product never is.

## Features

Eight product areas. Each has one name, one icon, one line and one figure it leads with.

### Stablecoins
- Icon: `Coins` (Lucide). Where: Top bar · /coins.
- Every stablecoin on Monolith in one list: what is locked, what borrowing costs, what stakers earn.
- Leads with: **$982K** locked
- Say: stablecoin, locked. Avoid: coin, Markets, TVL.
- Example: [Comparison post](https://app.monolith.market/brand/social/chart-split.jpg)

### Deploy
- Icon: `Rocket` (Lucide). Where: Top bar · /deploy, titled “Deploy a stablecoin”.
- Launch your own stablecoin, with its own DAO if you want one, in a single transaction.
- Leads with: **1** transaction, about two minutes
- Say: launch a stablecoin, Deploy (the page). Avoid: create a token, fork, mint a coin.
- Example: [Launch post](https://app.monolith.market/brand/social/post-launch.jpg)

### Borrow
- Icon: `HandCoins` (Lucide). Where: A stablecoin’s first tab.
- Borrow the stablecoin against your collateral, at a variable rate or interest-free.
- Leads with: **1.19%** APR, variable; or 0% interest-free
- Say: borrow, collateral, variable rate, interest-free loan. Avoid: free debt, CDP, vault.
- Example: [Feature post](https://app.monolith.market/brand/social/post-feature.jpg)

### Stake and Earn
- Icon: `Sparkles` and `TrendingUp` (Lucide). Where: A stablecoin’s Stake tab · top bar “Earn” (/earn).
- Earn what borrowers pay, plus governance tokens, by staking the stablecoin; stake those to share the revenue.
- Leads with: **150%** APY
- Say: stake, Savings, staked SwanUSD (sSwanUSD), governance tokens. Avoid: vault share, farm, GOV.
- Example: [Milestone post](https://app.monolith.market/brand/social/post-milestone.jpg)

### Redeem
- Icon: `ArrowDownUp` (Lucide). Where: A stablecoin’s Redeem tab.
- Turn the stablecoin into $1 of its collateral, straight from the protocol, without a buyer.
- Leads with: **$1.00** of collateral each, less a fee
- Say: redeem, collateral, redemption fee. Avoid: burn, cash out, withdraw.
- Example: [Captions sample](https://app.monolith.market/brand/motion/captions.jpg)

### Trade
- Icon: `Repeat` (Lucide). Where: A stablecoin’s Trade tab, with two sub-tabs: the stablecoin and its governance token.
- Buy or sell the stablecoin through its PSM or a DEX route, whichever pays more, and its governance token beside it.
- Leads with: **1:1** through the PSM
- Say: trade, buy, sell, PSM (peg stability module). Avoid: a separate “Buy SWAN” tab, arbitrage.
- Example: [Peg chart](https://app.monolith.market/brand/social/chart-peg.jpg)

### DAOs
- Icon: `Landmark` (Lucide). Where: A stablecoin’s DAO tab (Overview, Proposals, Technical) · /daos.
- Holders run the stablecoin: governance tokens with a fixed supply, staking rewards, a revenue share, a treasury and on-chain votes.
- Leads with: **10,000,000** governance tokens, fixed
- Say: DAO, governance token, proposal, vote, treasury. Avoid: CoinDAO, GOV, governor.
- Example: [Governance post](https://app.monolith.market/brand/social/post-vote.jpg)

### Dashboard
- Icon: `LayoutDashboard` (Lucide). Where: Top bar · /dashboard.
- Everything you borrow, stake and earn, across every stablecoin, in one place.
- Leads with: **$12,480** net value
- Say: your positions, net value, earning. Avoid: portfolio, PnL.
- Example: [Count-up sample](https://app.monolith.market/brand/motion/count-up.jpg)

- Names are written exactly as in the app, in sentence case: Stablecoins, Deploy, Borrow, Stake, Earn, Redeem, Trade, DAOs (a stablecoin’s tab says DAO), Dashboard.
- Icons are Lucide, as in the top bar and the coin tabs. The open tab’s icon is orange; everywhere else they are muted or ink.
- Lines lead with what people get, then how, in one sentence. Posts take the figure, never a paragraph.
- On a stablecoin’s page, Trade is one tab with two sub-tabs, the stablecoin and its governance token; there is no separate “Buy” tab.
- Other icons: Stats is ChartColumn (BarChart3), Docs is BookOpen, an airdrop tab is Gift.

## Numbers and data

Fewer, plainer numbers: three or four per view, rounded, in ink. Details on demand.

| Kind | Format | Example |
| --- | --- | --- |
| Headline amounts | Rounded, uppercase K/M/B, $ when in USD | $520K, 1.2M SwanUSD |
| Detail amounts | Up to two decimals, thousands separators | 2,871.20 · 6,000 SwanUSD |
| Rates | Up to two decimals; whole numbers above 100% | 1.19%, 15.75%, 150% |
| Rate units | Borrow rates are APR; staking yields are APY (Stablecoin APY, Stake APY) | 1.19% APR · 0.56% APY |
| Yields and earnings | Orange, so the number that matters is found at a glance: #D45A20 at 24px and up, #B04A17 below. Costs, prices and totals stay ink | 143% · 0.59% APY · ≈ $517/mo |
| Rate direction | An arrow beside the borrow rate: up in amber while it climbs, down in green while it eases, level in gray inside the target; the reason on hover | 1.19% ↗ |
| Sums of earnings | The total as shown, its sources on hover: each in its own token, then in USD | ≈ $20/mo · 4.83 SwanUSD · $4.83 |
| Stablecoin price | $1.00 on peg, with a green dot in a stablecoin's header; three decimals off it, with no warning | $1.00 · $0.993 |
| Dates | Month day, year; times in UTC with “UTC” | Oct 21, 2030 · 19 Nov, 16:00 UTC |
| Relative time | Short units | 14m, 3h, 2d |
| Addresses | First 6 and last 4, ENS name first when known | 0x4ed5…6a15, maaxximme.eth |
| Changes | Arrow from before to after | 49% → 46% |

Numbers are never colored for decoration. What you earn is orange; a value turns green, amber or red only when it is a state, and then a word goes with it.

## Layout and spacing

An 8-point grid, a 1280px container, one card level and hairlines.

| Element | Spec |
| --- | --- |
| Spacing | 4, 8, 12, 16, 24, 32, 40, 48, 64 px. Sections 40–48 apart; inside cards 20–24. |
| Container | Max 1280px, gutters 16 / 24 / 32px (phone / tablet / desktop). |
| Top bar | 72px, paper with a hairline; content starts 32–40px below. |
| Corners | 4px for chips, badges, meter bars, skeleton lines and the options inside segmented controls and tab lists; 6px for buttons, inputs and selects, option cards, segmented tracks, the coin tabs, icon tiles, tooltips, and the wallet and network buttons; 8px for cards, panels, tables, the coin tab bar, menus, popovers, modals, toasts and chart tooltips. |
| Round | Switches stay pill-shaped. Avatars, coin and token icons, status dots, step numbers and round icon buttons (“…”, settings) stay circles. Nothing else is round. |
| Cards | Surface, 1px rule, 8px corners, padding 24–28px. Never nested. A card that opens something rises 2px on hover, with an orange hairline (brand at 50%) and a soft shadow. |
| Inputs | Paper fill, 1px rule strong, 6px corners; focus: ink border. |
| Buttons and chips | Buttons have 6px corners and are 32 / 40 / 52px tall; chips have 4px corners. |
| Tables | A card with a quiet header row and hairline rows, 14px text. A long table shows five rows at a time and scrolls the rest under its header. |
| Elevation | Only overlays lift (menus, modals, toasts): 0 12px 32px rgb(26 26 26 / 0.1). |
| Coin pages | Header with four facts, a full-width tab bar, then content on the left and the action form on the right (400px). |
| Breakpoints | 640, 768, 1024, 1280px. Phones get one column; the tab bar scrolls sideways. |

## Components

One set of parts for every screen. In code: src/components/ui.

*Shown live on the page: Live specimens: buttons, state chips, the coin tab bar, a segmented control, an amount field, option cards, a stat row, detail rows and an earnings breakdown tooltip.*

| Component | Rule |
| --- | --- |
| Button | 6px corners. Ink for actions; secondary is a rule-strong outline; ghost for quiet actions; orange only for the brand moment; danger outline for liquidations. |
| Chip | 4px corners. A state in a tint with its word: Healthy, Watch, At risk, Pending, Active, Executed. |
| Coin tab bar | Full width under the coin’s name: a recessed paper-deep track (8px corners, 4px inset, no border). The open tab is raised on surface: ink semibold text, the orange icon, 6px corners and a soft shadow (0 1px 3px rgb(26 26 26 / 0.12)). Other tabs are ink soft with muted icons. 40px tall on phones, 44px from 640px up; 14 / 15px text. |
| Segmented control | A recessed paper-deep track with 6px corners; the selected option raised on surface, with 4px corners. |
| Sub tabs | Quiet underline tabs for pages inside a section (a DAO’s Overview, Proposals, Technical). |
| Amount field | Token on the left, the amount in 26px, Max as an underlined text button, USD value under it. |
| Option card | A radio choice as a card with 6px corners: title, a Lora figure, one line. |
| Stat row | Label over a Lora figure, split by hairlines. The borrow rate carries its direction: an arrow up in amber, down in green, level in gray, with the reason on hover. |
| Detail rows | Label left, value right, on hairlines; an info icon for explanations. |
| Notice | A tinted strip with an icon and one sentence, for state messages. |
| Modal | The surface card on a soft ink scrim, a Lora title, a close button, actions at the bottom right. |
| Toast | Bottom right, surface card with an icon, a title, one line and a transaction link. |
| Breakdown tooltip | Any figure that adds up earnings from several sources shows them on hover, in the light tooltip (6px corners): a small semibold title (“A month, at today’s rates”), one row per source named as on the Earn cards (label muted; the amount in its token in ink, then “· $x” in muted; a rate as a faint note), rows grouped under each stablecoin, then a hairline and a semibold Total with the figure as shown. |

## Icons and imagery

Lucide line icons in muted ink. Black-and-white stone photography in the shape of the mark.

- Icons: Lucide, 2px stroke, 16px in text and tabs, 20px in empty states. Muted by default; ink when active; orange only for the open tab.
- Token logos are circles; a coin’s collateral sits at its lower right with a paper ring.
- Photography: black-and-white standing stones and monoliths, high contrast, cropped into the mark’s slab shape. Never color photos, never stock 3D coins.
- Illustration and diagrams: ink lines on paper, one orange highlight, 1–2 word labels.
- Product shots: real screens on paper, lifted as cards with the overlay shadow.

## Motion and video

Calm, precise, editorial. Motion shows what changed, then gets out of the way.

- **Title card** (Sample, 5 s): The words rise one by one, the orange italic is unveiled left to right, a hairline settles under it. [MP4](https://app.monolith.market/brand/motion/title-card.mp4) · [poster](https://app.monolith.market/brand/motion/title-card.jpg)
- **Transition** (Sample, 5 s): A hairline crosses the frame in one eased second and leaves the next figure behind it. [MP4](https://app.monolith.market/brand/motion/transition-hairline.mp4) · [poster](https://app.monolith.market/brand/motion/transition-hairline.jpg)
- **Screencast** (Sample, 7 s): The real Stake tab on paper: the pointer picks each way to earn, and the app answers as it does. [MP4](https://app.monolith.market/brand/motion/screencast-stake.mp4) · [poster](https://app.monolith.market/brand/motion/screencast-stake.jpg)
- **Chart in one sweep** (Sample, 6 s): The grid settles, the line draws in one stroke with its area behind it, the last value lands. [MP4](https://app.monolith.market/brand/motion/chart-sweep.mp4) · [poster](https://app.monolith.market/brand/motion/chart-sweep.jpg)
- **Count-up** (Sample, 5 s): Locked value counts up in Lora’s tabular figures, so the digits never shift. [MP4](https://app.monolith.market/brand/motion/count-up.mp4) · [poster](https://app.monolith.market/brand/motion/count-up.jpg)
- **Captions** (Sample, 7 s): One line at a time on an ink box, in step with the voice; the picture changes with the words. [MP4](https://app.monolith.market/brand/motion/captions.mp4) · [poster](https://app.monolith.market/brand/motion/captions.jpg)
- **End card** (Sample, 4.5 s): The flat mark rises, the wordmark joins it, then one line and the address. [MP4](https://app.monolith.market/brand/motion/end-card.mp4) · [poster](https://app.monolith.market/brand/motion/end-card.jpg)

| Topic | Rule |
| --- | --- |
| Look | The brand as it is: flat paper and surface, ink Lora headlines with at most one orange italic word, Inter for the rest, hairlines, the flat mark. No gradients, glows, blooms, grain, 3D or textures. |
| Frames | One idea per frame, on the grid, with generous space. 1920 × 1080 (or 1280 × 720) at 30 fps; a small lockup at the top left, except on title and end cards. |
| Easing | One curve for everything: cubic-bezier(0.4, 0, 0.2, 1). No bounce, overshoot or elastic. |
| Timing | Type and cards move in 300–700 ms, a transition takes about a second, a chart sweep two to two and a half. Hold each frame long enough to read twice. |
| Type | Headlines arrive word by word, rising about 20 px as they fade in; an orange italic word is unveiled left to right. Figures count up in Lora’s tabular figures, so the digits never shift. |
| Transitions | A hairline wipe, a card sliding in, or a plain cut. Never whooshes, flashes, zooms, spins, blur or glows. |
| Charts | Drawn in one continuous sweep, in the app’s chart style: ink line, faint ink area, hairline grid, muted labels. The last value lands as a dot; nothing stops and starts. |
| Product UI | The real light app, as it is: captured from the running app, framed on paper as a card with a hairline and the overlay shadow, driven by a plain pointer. Nothing mocked up. |
| Captions | Burned in, because X plays video muted: one line at a time, Inter 500 on an ink box with 6px corners, bottom centre, in step with the voice. |
| Narration | Optional. About 0.3 s between lines; the voice never reads a name or ticker already on screen. |
| Music | The Monolith track, cut on its bars to the film; see Sound. Mixed at −14 LUFS with true peaks under −1.5 dBTP, about 8 dB under a voice. |
| Ending | Every film ends on the flat lockup, one line and the address. |
| X delivery | Up to 2:20, 1920 × 1200 and 512 MB, H.264 and AAC in MP4, exported around 31 MB so it can be posted from a phone. |
| In the product | Fades and small rises, 150–350 ms, the same easing. A card that opens something rises 2px on hover; no glows or bounces. Reduced motion turns them off. |

- [Title card (MP4)](https://app.monolith.market/brand/motion/title-card.mp4): Sample, 5 s
- [Transition (MP4)](https://app.monolith.market/brand/motion/transition-hairline.mp4): Sample, 5 s
- [Screencast (MP4)](https://app.monolith.market/brand/motion/screencast-stake.mp4): Sample, 7 s
- [Chart in one sweep (MP4)](https://app.monolith.market/brand/motion/chart-sweep.mp4): Sample, 6 s
- [Count-up (MP4)](https://app.monolith.market/brand/motion/count-up.mp4): Sample, 5 s
- [Captions (MP4)](https://app.monolith.market/brand/motion/captions.mp4): Sample, 7 s
- [End card (MP4)](https://app.monolith.market/brand/motion/end-card.mp4): Sample, 4.5 s

## Sound

One track under every film, one voice to tell the story, and a few real sounds.

- **The Monolith track** (44.5 s): The redesign film’s cut: the intro, the drop at 11 s, the final chord ringing out. [M4A](https://app.monolith.market/brand/sound/monolith-track.m4a)
- **With its sounds** (44.5 s): The same cut with the clicks and hits over it, as the film plays it. The reference for levels. [M4A](https://app.monolith.market/brand/sound/monolith-track-with-sounds.m4a)
- **Short cut** (22.5 s): Straight into the lead-in, the drop at 5.5 s. Bars 12-15, 16-23, 24-27. [M4A](https://app.monolith.market/brand/sound/monolith-track-22s.m4a)
- **Medium cut** (28 s): The drop at 11 s. Bars 0-3, 12-15, 16-23, 24-27. [M4A](https://app.monolith.market/brand/sound/monolith-track-28s.m4a)
- **Long cut** (55.6 s): The drop at 11 s, with more of its phrase. Bars 0-3, 12-15, 16-23, 16-23, 16-23, 16-19, 24-27. [M4A](https://app.monolith.market/brand/sound/monolith-track-55s.m4a)
- **Original take** (39 s): Untouched, and the source of every cut. −13.7 LUFS with peaks at 0 dBTP, so use a cut in a film. [MP3](https://app.monolith.market/brand/sound/monolith-track-original.mp3)

| Topic | Detail |
| --- | --- |
| What | An original instrumental in liquid drum and bass. One stereo mix, no stems: these files are the track. |
| Where | Under every film and video post. Another track only when a film calls for it: real and produced, never sad, never synthesized from oscillators. |
| Tempo | 174 BPM. A bar is 1.379 s, a beat 0.345 s. |
| Key | G minor. The drop goes Gm, Cm, Gm, Bb, two bars each. |
| Snares | Beats 2 and 4. |
| Level | The cuts sit at −14 LUFS with true peaks under −1.5 dBTP. Under a voice, about 8 dB below it. |
| Files | Cuts: M4A, AAC at 256 kbps, 48 kHz. Original take: MP3, 192 kbps, 48 kHz. Sounds: MP3, 128 kbps, 44.1 kHz. |
| Rights | For Monolith’s own films and posts. Don’t pass these files on for other people’s content. |

### In a film

**Do**
- Cut the track to the film on its bars, or use a ready-made cut.
- Put the drop, bar 16, on the film’s biggest cut.
- End on bars 24–27, so the final chord rings out under the end card.
- Land hits on the snares, and a click a sixteenth (86 ms) before its snare, in the gap the drums leave. On the snare it gets masked.
- Dip the music under each sound, hardest in that sound’s own band.
- Use real, dry sounds, played as they came.

**Don’t**
- Bells, chimes, tings, mallets or anything high-pitched.
- Whooshes or risers.
- Tuning or pitch-shifting a sound.
- A sound on every small event. If nothing real would make a noise, leave it silent.
- A run of the same tap: it reads as someone at a door.

### Sounds

- **Click** (0.5 s): Every click of the pointer, with a little Block under it. A deep mechanical key: it reads as a real click over the drums. [MP3](https://app.monolith.market/brand/sound/click.mp3)
- **Key** (0.5 s): One key as a caret appears, not one per word. [MP3](https://app.monolith.market/brand/sound/key.mp3)
- **Tick** (0.5 s): As a chart’s sweep passes a mark. [MP3](https://app.monolith.market/brand/sound/tick.mp3)
- **Block** (0.5 s): Alone when a part lifts off a page, and quietly under each Click. [MP3](https://app.monolith.market/brand/sound/block.mp3)
- **Boom** (1.5 s): The big hits: one word that lands, and the mark at the end. [MP3](https://app.monolith.market/brand/sound/boom.mp3)
- **Punch** (1 s): Over each Boom, which is nearly all sub-bass: a phone can’t play it alone. [MP3](https://app.monolith.market/brand/sound/punch.mp3)
- **Thump** (1 s): Under the last Boom, as the mark lands. [MP3](https://app.monolith.market/brand/sound/thump.mp3)

| Sound | Peak | Filter | The music under it |
| --- | --- | --- | --- |
| Click | +3 dB | 180 Hz to 9.5 kHz, limited | Down 5 dB for 0.09 s, and 12 dB at 800 Hz to 5 kHz for 0.14 s |
| Key | −1 dB | 180 Hz to 8 kHz | Down 2 dB for 0.06 s, and 7 dB at 800 Hz to 5 kHz for 0.08 s |
| Tick | −1 dB | 300 Hz to 6 kHz | Down 2 dB for 0.05 s, and 8 dB at 800 Hz to 5 kHz for 0.06 s |
| Block, alone | 0 dB | 150 Hz to 6 kHz, limited | Down 4 dB for 0.1 s, and 5 dB at 800 Hz to 5 kHz for 0.1 s |
| Block, under a Click | −7.5 dB | 150 Hz to 1.4 kHz | No further dip |
| Boom | −1 dB, or 0 dB as the mark lands | Limited, for density | Under 140 Hz down 24 dB for 0.6 s. The rest down 1 dB for 0.1 s; as the mark lands, 4 dB in the 0.12 s before it and 9 dB for 0.3 s |
| Punch | −4 dB, or −1 dB as the mark lands | Above 60 Hz, limited, for density | No dip of its own |
| Thump | 0 dB | Under 400 Hz, +4 dB at 110 Hz, limited, for density | No dip of its own |

The redesign film’s mix. Peaks are in dBFS, over the cut at the original take’s level and before the limiter that brings the whole to −14 LUFS.

### Voice

- **Opening** (7.5 s): “Most stablecoins are built for good days. Monolith is built for the worst one. Here’s what that looks like, hour by hour.” [MP3](https://app.monolith.market/brand/sound/voice-opening.mp3)
- **Story** (6.2 s): “Midnight. The worst day is over. Your stablecoin is still backed, still redeemable, still yours.” [MP3](https://app.monolith.market/brand/sound/voice-midnight.mp3)
- **End line** (3 s): “Monolith. Stablecoins built for the worst day.” [MP3](https://app.monolith.market/brand/sound/voice-end.mp3)

| Topic | Detail |
| --- | --- |
| Voice | Evan – Calm, Grounded & Reflective, from the ElevenLabs voice library: a warm, calm, mid-low American voice with a natural cadence. |
| Voice ID | TWutjvRaJqAX89preB4e |
| Model | eleven_multilingual_v2, at the voice’s default settings. |
| Where | Every narrated film. One narrator, so the films sound like one brand. |
| Level | The narration alone at −17 LUFS before the mix. The track sits about 8 dB under it. |
| Files | The takes as the voice read them: MP3, 128 kbps, 44.1 kHz, mono. |

**Do**
- Record one take per line, and keep the take whose own pauses are short.
- Write words as they’re said: DAO is “dow”.
- Add a 0.45 s break tag after “a.m.” and “p.m.”, or the next sentence runs on.
- Leave 0.3 s between lines and about 0.6 s before a new part.
- Listen to every take for names said wrong (“Monoloth”) and stalls inside a sentence. Record the line again until it’s right.

**Don’t**
- A sentence that starts with “A” after an abbreviation: it’s read as the letter. Rephrase it (“One loan goes bad”).
- Reading out a name the screen already shows.
- Cutting pauses out of a take: it’s heard as an edit.
- Dropping a line that doesn’t work and leaving the gap: write a better line.

### A new length

| Bars | In the original take | What happens |
| --- | --- | --- |
| 0–13 | 0:00.0–0:19.3 | Intro: breakbeat and pads, at one level throughout. |
| 14 | 0:19.3–0:20.7 | The drums thin. |
| 15 | 0:20.7–0:22.1 | The bass leaves. |
| 16–23 | 0:22.1–0:33.1 | The drop’s eight-bar phrase, about 6 dB louder than the intro, with a crash on bar 16. |
| 24–25 | 0:33.1–0:35.8 | Two more bars of the drop. |
| 26 | 0:35.8–0:37.2 | The final chord. |
| 27 | 0:37.2–0:39.0 | The chord rings out. |

```bash
# recut.mjs and the original take in one folder; it needs Node and ffmpeg
node recut.mjs new-cut.wav 12-15,16-23,24-27
```

- Give it the bars to play, in order. Each splice falls on a bar line, with a 12 ms crossfade.
- Keep to the joins already proved: bar 3 into 12, 23 into 16 and 19 into 24, plus the take’s own order.
- A cut ending on bars 24–27 runs bars × 1.379 + 0.4 s and keeps the final chord ringing. Ending on any other bar stops dead on the bar line.
- Bar n starts at −0.017 + n × 1.3793 s in the original take.
- It writes a 24-bit, 48 kHz WAV at about −14 LUFS.

- [recut.mjs](https://app.monolith.market/brand/sound/recut.mjs): The cutter
- [monolith-track-original.mp3](https://app.monolith.market/brand/sound/monolith-track-original.mp3): What it cuts

## Profiles

One avatar everywhere, and a header that stays clear of it.

*Shown live on the page: The three avatars cropped to circles, as X, Discord and Telegram show them: orange on paper, paper on ink, ink on orange.*

*Shown live on the page: A mock X profile on a desktop and on a phone: the header with the avatar overlapping its lower left, showing that nothing important sits under it.*

| Avatar | Use |
| --- | --- |
| Orange on paper | The default: @MonolithMarket on X, the Discord server, Telegram, Farcaster, Safe. |
| Paper on ink | Secondary official accounts (a bot, the docs) and dark surfaces. |
| Ink on orange | Campaign weeks, and small icon slots where paper vanishes on white. |

- Sizes: upload the 800 × 800 file; X shows it at up to 400 × 400, Discord and Telegram at 512 or less. A 400 × 400 copy is there for tools that want one.
- Circle-safe: the mark is centred and at most 55% of the diameter (it is 52%), so every circle crop keeps it whole.
- Flat colour only: no blooms, texture or shadow in an avatar; it has to read at 32 px.
- DAOs and partners use their own stablecoin’s logo, never the Monolith mark, and say “Built on Monolith” in the bio.
- X header (1500 × 500): the avatar covers the lower left from about two thirds of the height down (y 330 on a 500 px header), and phones crop the top and bottom. Set the lockup and one line left-aligned at the 96 px margin, in the upper middle band (y 110–300), so they end above the avatar’s top edge.
- Every other header or cover (LinkedIn, YouTube, Discord) follows the same rule: find where the platform puts the profile picture and its crop, keep both clear.

- [Avatar, orange on paper (PNG)](https://app.monolith.market/brand/social/avatar.png): 800 × 800
- [Avatar, orange on paper, small (PNG)](https://app.monolith.market/brand/social/avatar-400.png): 400 × 400
- [Avatar, paper on ink (PNG)](https://app.monolith.market/brand/social/avatar-ink.png): 800 × 800
- [Avatar, paper on ink, small (PNG)](https://app.monolith.market/brand/social/avatar-ink-400.png): 400 × 400
- [Avatar, ink on orange (PNG)](https://app.monolith.market/brand/social/avatar-orange.png): 800 × 800
- [Avatar, ink on orange, small (PNG)](https://app.monolith.market/brand/social/avatar-orange-400.png): 400 × 400
- [X header (PNG)](https://app.monolith.market/brand/social/banner.png): 1500 × 500, clear of the avatar

## Social media

Picture first: one graphic, a two-to-five-word headline, one-or-two-word labels. The detail goes in the post.

- **Launch** (1600 × 900): The stablecoin’s header from the app, between hairlines, under “<Name> is live.” ![Post image: “SwanUSD is live.” over the app’s SwanUSD header with its collateral, DAO and four figures](https://app.monolith.market/brand/social/post-launch.jpg)
- **Thread diagram** (1600 × 900): Three numbered steps: real coins, ink arrows, one verb each. ![Thread image: steps 1 Deposit wstETH, 2 Borrow SwanUSD and 3 Stake sSwanUSD, as coins joined by arrows, under “From collateral to yield.”](https://app.monolith.market/brand/social/post-diagram.jpg)
- **Area chart** (1600 × 900): The app’s chart card: ink line, faint area, hairline grid; the figure is the headline. ![Chart image: “$982K locked” over a chart card of locked value rising from July to October](https://app.monolith.market/brand/social/chart-locked.jpg)
- **Comparison** (1600 × 900): The Stats page’s split bar and rows, with real token icons. ![Chart image: “Locked, by stablecoin” over a card with a split bar, SwanUSD $640K 65% and invUSD $343K 35%](https://app.monolith.market/brand/social/chart-split.jpg)
- **Backing donut** (1080 × 1080): The app’s donut around the coin; the loans and the PSM in chart order. ![Square chart: a donut of 58% variable-rate loans, 30% interest-free loans and 12% PSM around the SwanUSD coin](https://app.monolith.market/brand/social/chart-backing.jpg)
- **Peg chart** (1600 × 900): The price in ink inside a green ±0.3% band, with an “On peg” chip. ![Chart image: “Steady at $1.00” over a chart card of the price inside a pale green band from $0.997 to $1.003](https://app.monolith.market/brand/social/chart-peg.jpg)
- **Feature** (1600 × 900): The headline left, the real form as a product shot. ![Post image: “Borrow at 0%, interest-free.” beside the app’s Borrow form with the interest-free loan type selected](https://app.monolith.market/brand/social/post-feature.jpg)
- **Governance** (1600 × 900): The real proposal card, with its vote bars and its state. ![Post image: “Holders decide.” over the app’s card of an active Swan DAO proposal and its votes](https://app.monolith.market/brand/social/post-vote.jpg)
- **One number** (1600 × 900): One figure in Lora, a label above, one line of context below. ![Post image: $982K in large Lora, “Locked on Monolith” above and “2 stablecoins · 1 DAO” below](https://app.monolith.market/brand/social/post-figure.jpg)
- **Milestone** (1080 × 1350): A thousand dots, one for each staker, over the figure and one italic word. ![Portrait post: a grid of a thousand dots, the last one ink, over “1,000 stakers”](https://app.monolith.market/brand/social/post-milestone.jpg)
- **Thread cover** (1600 × 900): The topic, “A thread” and the app’s coin tab bar with the section open. ![Thread cover: “How DAOs work” and “A thread” over the app’s coin tab bar with the DAO tab open](https://app.monolith.market/brand/social/thread-cover.jpg)
- **Thread end** (1600 × 900): “Launch yours.” beside the real Deploy form; the link goes in the post. ![Thread end card: “Launch yours.” beside the app’s Deploy form](https://app.monolith.market/brand/social/thread-end.jpg)
- **Quote** (1080 × 1080): The mark, one sentence with its second half in orange italic, a hairline. ![Square post: “Launch with flexibility. Transition to immutability.” in Lora on paper](https://app.monolith.market/brand/social/post-quote.jpg)
- **Link preview** (1200 × 630): Served for every page without its own; coin pages use the coin’s logo. ![Link preview: the Monolith lockup and “Launch a stablecoin built to last.” on paper, with a hairline over the subline](https://app.monolith.market/brand/social/og-default.png)

| Post | Picture | Words |
| --- | --- | --- |
| Launch | The stablecoin’s header as the app shows it (coin, collateral, DAO, four figures), between hairlines. | “<Name> is live.” |
| Thread diagram | Numbered steps: real token coins joined by ink arrows. | One verb per step, the token under it in muted. |
| Charts | The app’s chart card: ink line, faint ink area, hairline grid, muted labels, the last value as a dot. Comparisons use the Stats page’s split bar; donuts keep the chart order (ink, orange, faint). | The headline is the figure (“$982K locked”); labels are months or names. |
| Feature | The real form from the app as a product shot. | What people get, in a few words (“Borrow at 0%”). |
| Governance | The real proposal card, with its vote bars and its state. | “Holders decide.” |
| One number, milestone | The figure in Lora, very large. A milestone goes portrait and counts what it celebrates, one dot each. | A label above, or one italic word below. |
| Thread cover and end | Cover: the topic, “A thread” and the app’s coin tab bar. End: “Launch yours.” beside the Deploy form. | No URL in the image; the link goes in the post. |
| Quote | The mark and one sentence, square. | The sentence’s second half in orange italic. |

- Flat paper (#F0EEE6), ink type, hairlines (#DFDCD1) and one orange accent: an italic word, or the second series of a chart. No gradients, glows, blooms, grain or textures; the only shadow is the overlay shadow under a product shot.
- A masthead on every post: the lockup at the top left, one word or the thread’s place (2/6) at the top right, a hairline under both.
- Posts are drawn at twice the app’s size: hairlines 2 px, corners 8 px for chips, 12 px for controls and 16 px for cards.
- Lora 500 for headlines and figures, with one orange italic word at most; figures stay ink. Inter for labels at 24–36 px, so they still read when X shows the image about 506 px wide.
- Real UI only: screens are captured from the running light app (scripts/brand/render-assets.mjs --capture), never drawn or mocked up.
- Token icons are flat circles; a stablecoin’s collateral sits at its lower right in a paper ring.
- Numbers in the templates are illustrative; posts use real, rounded figures from the app.

| Format | Size | Notes |
| --- | --- | --- |
| X / LinkedIn post | 1600 × 900 | X shows it about 506 px wide in the feed. |
| Square post | 1080 × 1080 | Donuts, quotes, single figures. |
| Portrait post | 1080 × 1350 | Milestones and announcements; fills a phone screen. |
| Link preview (Open Graph) | 1200 × 630 | Served by the app for every page; coin pages use the coin’s logo. |
| Story / vertical video | 1080 × 1920 | Safe area 1080 × 1420 in the middle. |
| Avatar and X header | 800 × 800 · 1500 × 500 | See Profiles. The header’s lockup and line sit left-aligned in its upper middle band, above the avatar. |
| Video for X | up to 1920 × 1200, 2:20, 512 MB | Captions burned in; export around 31 MB so it can be sent from a phone. |

**Do**
- One graphic per image: a real screen, a chart, a coin or a figure
- Real numbers from the app, rounded
- Flat paper, ink type, hairlines, one orange accent
- The handle @MonolithMarket and app.monolith.market as the only URLs, in the post

**Don’t**
- Paragraphs, footnotes or links on images
- Gradients, glows, blooms, grain, textures or 3D
- Screens the app doesn’t have, or mocked-up UI
- Price predictions or yield promises
- Emoji in headlines

- [Launch (JPG)](https://app.monolith.market/brand/social/post-launch.jpg): 1600 × 900
- [Thread diagram (JPG)](https://app.monolith.market/brand/social/post-diagram.jpg): 1600 × 900
- [Area chart (JPG)](https://app.monolith.market/brand/social/chart-locked.jpg): 1600 × 900
- [Comparison (JPG)](https://app.monolith.market/brand/social/chart-split.jpg): 1600 × 900
- [Backing donut (JPG)](https://app.monolith.market/brand/social/chart-backing.jpg): 1080 × 1080
- [Peg chart (JPG)](https://app.monolith.market/brand/social/chart-peg.jpg): 1600 × 900
- [Feature (JPG)](https://app.monolith.market/brand/social/post-feature.jpg): 1600 × 900
- [Governance (JPG)](https://app.monolith.market/brand/social/post-vote.jpg): 1600 × 900
- [One number (JPG)](https://app.monolith.market/brand/social/post-figure.jpg): 1600 × 900
- [Milestone (JPG)](https://app.monolith.market/brand/social/post-milestone.jpg): 1080 × 1350
- [Thread cover (JPG)](https://app.monolith.market/brand/social/thread-cover.jpg): 1600 × 900
- [Thread end (JPG)](https://app.monolith.market/brand/social/thread-end.jpg): 1600 × 900
- [Quote (JPG)](https://app.monolith.market/brand/social/post-quote.jpg): 1080 × 1080
- [Link preview (PNG)](https://app.monolith.market/brand/social/og-default.png): 1200 × 630

## Accessibility

Readable by everyone, with any input, in any light.

- Text meets WCAG AA: 4.5:1 or more, measured on paper and on surface (see Color).
- Nothing under 12px; body copy 14px or more.
- Color never carries meaning alone: every state has a word.
- Focus is a 2px ink outline, offset 2px, on every interactive element.
- Tooltips open on hover, focus and tap; their content is also reachable without a mouse.
- Motion respects “reduce motion”.
- Images carry alt text that says what they show.

## Tokens in code

The app reads these tokens; this page and /brand.json mirror them.

```css
@theme {
  --color-paper: #f0eee6;
  --color-paper-deep: #e8e5db;
  --color-surface: #faf9f5;
  --color-rule: #dfdcd1;
  --color-rule-strong: #c9c6bb;
  --color-ink: #1a1a1a;
  --color-ink-soft: #3d3d3d;
  --color-muted: #696760;
  --color-faint: #a9a69b;
  --color-on-ink: #faf9f5;
  --color-brand: #ff7230;
  --color-brand-strong: #d45a20;
  --color-brand-text: #b04a17;
  --color-brand-tint: #f8e2d3;
  --color-positive: #2e7550;
  --color-positive-tint: #e2ede4;
  --color-caution: #8a5d0e;
  --color-caution-tint: #f3e8cf;
  --color-negative: #b03a2a;
  --color-negative-tint: #f5e1db;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Lora", Georgia, serif;
}
```

- Tailwind classes follow the names: bg-paper, bg-surface, text-ink, text-muted, border-rule, bg-positive-tint text-positive.
- Components: import { Button, Card, Chip, Stat, Segmented, TabBar } from "@/components/ui".
- Tokens source: src/styles/globals.css. Brand content source: shared/brand.ts.
- Machine-readable: /brand.json (tokens and rules) and /brand.md (this page as Markdown).