{ "brand": { "name": "Monolith", "tagline": "Launch a stablecoin built to last.", "taglineAccent": "built to last.", "subline": "Launch with flexibility. Transition to immutability.", "oneLiner": "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.", "owner": "Owned by Inverse Finance DAO.", "links": [ { "label": "App", "href": "https://app.monolith.market" }, { "label": "Website", "href": "https://www.monolith.market" }, { "label": "Docs", "href": "https://docs.monolith.market" }, { "label": "X", "href": "https://x.com/MonolithMarket" }, { "label": "Newsletter", "href": "https://monolithmarkets.substack.com" }, { "label": "Discord", "href": "https://discord.gg/wz2JYmA93" } ] }, "version": "2.2", "updated": "2026-11-03", "colors": [ { "name": "Paper", "token": "paper", "hex": "#F0EEE6", "role": "Surface", "use": "The page. Every screen and asset starts on paper." }, { "name": "Paper deep", "token": "paper-deep", "hex": "#E8E5DB", "role": "Surface", "use": "Recessed tracks (the coin tab bar, segmented controls, meters), skeletons, quiet tiles." }, { "name": "Surface", "token": "surface", "hex": "#FAF9F5", "role": "Surface", "use": "Cards, panels, inputs on surfaces, menus, modals, the open tab." }, { "name": "Rule", "token": "rule", "hex": "#DFDCD1", "role": "Line", "use": "Hairlines: card borders, row dividers, the top bar." }, { "name": "Rule strong", "token": "rule-strong", "hex": "#C9C6BB", "role": "Line", "use": "Input borders, secondary buttons, emphasized dividers." }, { "name": "Ink", "token": "ink", "hex": "#1A1A1A", "role": "Text", "onPaper": 14.98, "use": "Text, figures, primary buttons, the open tab’s label." }, { "name": "Ink soft", "token": "ink-soft", "hex": "#3D3D3D", "role": "Text", "onPaper": 9.35, "use": "Secondary text, field labels, unselected tabs." }, { "name": "Muted", "token": "muted", "hex": "#696760", "role": "Text", "onPaper": 4.87, "use": "Labels, captions, meta lines. The lightest color allowed for text." }, { "name": "Faint", "token": "faint", "hex": "#A9A69B", "role": "Decoration", "onPaper": 2.1, "use": "Placeholders and decorative marks only, never information." }, { "name": "On ink", "token": "on-ink", "hex": "#FAF9F5", "role": "Text", "use": "Text on ink (16.5:1)." }, { "name": "Orange", "token": "brand", "hex": "#FF7230", "role": "Brand", "onPaper": 2.35, "use": "The mark, the active tab icon, the brand moment. Never text, never data." }, { "name": "Orange strong", "token": "brand-strong", "hex": "#D45A20", "role": "Brand", "onPaper": 3.42, "use": "The active nav underline; the italic accent in large display type; yields and earnings at 24px and up." }, { "name": "Orange text", "token": "brand-text", "hex": "#B04A17", "role": "Brand", "onPaper": 4.71, "use": "Orange when it has to be small text, e.g. a brand link; yields and earnings below 24px." }, { "name": "Orange tint", "token": "brand-tint", "hex": "#F8E2D3", "role": "Brand", "use": "Brand banners and the \"live\" chip, with ink text." }, { "name": "Positive", "token": "positive", "hex": "#2E7550", "role": "State", "onPaper": 4.79, "use": "Healthy, on peg, done, executed. Always with a word." }, { "name": "Positive tint", "token": "positive-tint", "hex": "#E2EDE4", "role": "State", "use": "Background of positive chips and notices." }, { "name": "Caution", "token": "caution", "hex": "#8A5D0E", "role": "State", "onPaper": 4.95, "use": "Watch, pending action, not delegated. Always with a word." }, { "name": "Caution tint", "token": "caution-tint", "hex": "#F3E8CF", "role": "State", "use": "Background of caution chips and notices." }, { "name": "Negative", "token": "negative", "hex": "#B03A2A", "role": "State", "onPaper": 5.19, "use": "At risk, failed, defeated, errors. Always with a word." }, { "name": "Negative tint", "token": "negative-tint", "hex": "#F5E1DB", "role": "State", "use": "Background of negative chips and notices." } ], "chartSeries": [ "#1A1A1A", "#FF7230", "#A9A69B", "#2E7550", "#8A5D0E" ], "typeScale": [ { "role": "Display", "family": "Lora", "size": "52px (36px on phones)", "weight": "500", "tracking": "-0.025em", "use": "Page titles: Stablecoins, Earn, Deploy a stablecoin." }, { "role": "Title", "family": "Lora", "size": "44px (34px)", "weight": "500", "tracking": "-0.02em", "use": "A coin’s name in its header." }, { "role": "Figure", "family": "Lora", "size": "28px (24px)", "weight": "500", "tracking": "-0.01em", "use": "Key figures: $638K, 1.19%, 150%. Three or four per view." }, { "role": "Section", "family": "Lora", "size": "24px (22px)", "weight": "500", "tracking": "-0.01em", "use": "Section titles: Market, Activity, Your position." }, { "role": "Heading", "family": "Lora", "size": "20–22px", "weight": "500", "tracking": "0", "use": "Card and modal titles." }, { "role": "Body", "family": "Inter", "size": "14–16px", "weight": "400–500", "tracking": "0", "use": "Interface text, rows, buttons (14px), tab labels (16px)." }, { "role": "Label", "family": "Inter", "size": "13px", "weight": "400–600", "tracking": "0", "use": "Stat and field labels, meta lines." }, { "role": "Small", "family": "Inter", "size": "12px", "weight": "400–600", "tracking": "0", "use": "Chips, notes, helper lines. Nothing is ever smaller." } ], "fonts": { "serif": { "family": "Lora", "weights": [ 400, 500, 600, 700 ], "italic": true, "source": "https://fonts.google.com/specimen/Lora" }, "sans": { "family": "Inter", "weights": [ 300, 400, 500, 600, 700, 800 ], "source": "https://fonts.google.com/specimen/Inter" } }, "logo": { "markPath": "M14.0131 56L0 41.8272V2.97284L2.93932 0L16.9524 14.1728V53.0272L14.0131 56Z", "markViewBox": "0 0 17 56", "files": [ { "label": "Mark, orange (SVG)", "href": "https://app.monolith.market/brand/logo/monolith-mark.svg", "note": "Primary" }, { "label": "Mark, ink (SVG)", "href": "https://app.monolith.market/brand/logo/monolith-mark-ink.svg", "note": "One-color print and stamps" }, { "label": "Mark, paper (SVG)", "href": "https://app.monolith.market/brand/logo/monolith-mark-paper.svg", "note": "On ink or photos with a band" }, { "label": "Lockup on paper (PNG)", "href": "https://app.monolith.market/brand/logo/monolith-lockup.png", "note": "1600 px wide, transparent" }, { "label": "Lockup on ink (PNG)", "href": "https://app.monolith.market/brand/logo/monolith-lockup-on-ink.png", "note": "1600 px wide, transparent" } ] }, "features": [ { "id": "stablecoins", "name": "Stablecoins", "icons": [ "Coins" ], "place": "Top bar · /coins", "line": "Every stablecoin on Monolith in one list: what is locked, what borrowing costs, what stakers earn.", "figure": "$982K", "figureLabel": "locked", "say": [ "stablecoin", "locked" ], "avoid": [ "coin", "Markets", "TVL" ], "example": { "src": "https://app.monolith.market/brand/social/chart-split.jpg", "label": "Comparison post" } }, { "id": "deploy", "name": "Deploy", "icons": [ "Rocket" ], "place": "Top bar · /deploy, titled “Deploy a stablecoin”", "line": "Launch your own stablecoin, with its own DAO if you want one, in a single transaction.", "figure": "1", "figureLabel": "transaction, about two minutes", "say": [ "launch a stablecoin", "Deploy (the page)" ], "avoid": [ "create a token", "fork", "mint a coin" ], "example": { "src": "https://app.monolith.market/brand/social/post-launch.jpg", "label": "Launch post" } }, { "id": "borrow", "name": "Borrow", "icons": [ "HandCoins" ], "place": "A stablecoin’s first tab", "line": "Borrow the stablecoin against your collateral, at a variable rate or interest-free.", "figure": "1.19%", "figureLabel": "APR, variable; or 0% interest-free", "say": [ "borrow", "collateral", "variable rate", "interest-free loan" ], "avoid": [ "free debt", "CDP", "vault" ], "example": { "src": "https://app.monolith.market/brand/social/post-feature.jpg", "label": "Feature post" } }, { "id": "earn", "name": "Stake and Earn", "icons": [ "Sparkles", "TrendingUp" ], "place": "A stablecoin’s Stake tab · top bar “Earn” (/earn)", "line": "Earn what borrowers pay, plus governance tokens, by staking the stablecoin; stake those to share the revenue.", "figure": "150%", "figureLabel": "APY", "isEarnFigure": true, "say": [ "stake", "Savings", "staked SwanUSD (sSwanUSD)", "governance tokens" ], "avoid": [ "vault share", "farm", "GOV" ], "example": { "src": "https://app.monolith.market/brand/social/post-milestone.jpg", "label": "Milestone post" } }, { "id": "redeem", "name": "Redeem", "icons": [ "ArrowDownUp" ], "place": "A stablecoin’s Redeem tab", "line": "Turn the stablecoin into $1 of its collateral, straight from the protocol, without a buyer.", "figure": "$1.00", "figureLabel": "of collateral each, less a fee", "say": [ "redeem", "collateral", "redemption fee" ], "avoid": [ "burn", "cash out", "withdraw" ], "example": { "src": "https://app.monolith.market/brand/motion/captions.jpg", "label": "Captions sample" } }, { "id": "trade", "name": "Trade", "icons": [ "Repeat" ], "place": "A stablecoin’s Trade tab, with two sub-tabs: the stablecoin and its governance token", "line": "Buy or sell the stablecoin through its PSM or a DEX route, whichever pays more, and its governance token beside it.", "figure": "1:1", "figureLabel": "through the PSM", "say": [ "trade", "buy", "sell", "PSM (peg stability module)" ], "avoid": [ "a separate “Buy SWAN” tab", "arbitrage" ], "example": { "src": "https://app.monolith.market/brand/social/chart-peg.jpg", "label": "Peg chart" } }, { "id": "daos", "name": "DAOs", "icons": [ "Landmark" ], "place": "A stablecoin’s DAO tab (Overview, Proposals, Technical) · /daos", "line": "Holders run the stablecoin: governance tokens with a fixed supply, staking rewards, a revenue share, a treasury and on-chain votes.", "figure": "10,000,000", "figureLabel": "governance tokens, fixed", "say": [ "DAO", "governance token", "proposal", "vote", "treasury" ], "avoid": [ "CoinDAO", "GOV", "governor" ], "example": { "src": "https://app.monolith.market/brand/social/post-vote.jpg", "label": "Governance post" } }, { "id": "dashboard", "name": "Dashboard", "icons": [ "LayoutDashboard" ], "place": "Top bar · /dashboard", "line": "Everything you borrow, stake and earn, across every stablecoin, in one place.", "figure": "$12,480", "figureLabel": "net value", "say": [ "your positions", "net value", "earning" ], "avoid": [ "portfolio", "PnL" ], "example": { "src": "https://app.monolith.market/brand/motion/count-up.jpg", "label": "Count-up sample" } } ], "motion": { "examples": [ { "title": "Title card", "caption": "The words rise one by one, the orange italic is unveiled left to right, a hairline settles under it.", "src": "https://app.monolith.market/brand/motion/title-card.mp4", "poster": "https://app.monolith.market/brand/motion/title-card.jpg", "source": "Sample", "at": "5 s" }, { "title": "Transition", "caption": "A hairline crosses the frame in one eased second and leaves the next figure behind it.", "src": "https://app.monolith.market/brand/motion/transition-hairline.mp4", "poster": "https://app.monolith.market/brand/motion/transition-hairline.jpg", "source": "Sample", "at": "5 s" }, { "title": "Screencast", "caption": "The real Stake tab on paper: the pointer picks each way to earn, and the app answers as it does.", "src": "https://app.monolith.market/brand/motion/screencast-stake.mp4", "poster": "https://app.monolith.market/brand/motion/screencast-stake.jpg", "source": "Sample", "at": "7 s" }, { "title": "Chart in one sweep", "caption": "The grid settles, the line draws in one stroke with its area behind it, the last value lands.", "src": "https://app.monolith.market/brand/motion/chart-sweep.mp4", "poster": "https://app.monolith.market/brand/motion/chart-sweep.jpg", "source": "Sample", "at": "6 s" }, { "title": "Count-up", "caption": "Locked value counts up in Lora’s tabular figures, so the digits never shift.", "src": "https://app.monolith.market/brand/motion/count-up.mp4", "poster": "https://app.monolith.market/brand/motion/count-up.jpg", "source": "Sample", "at": "5 s" }, { "title": "Captions", "caption": "One line at a time on an ink box, in step with the voice; the picture changes with the words.", "src": "https://app.monolith.market/brand/motion/captions.mp4", "poster": "https://app.monolith.market/brand/motion/captions.jpg", "source": "Sample", "at": "7 s" }, { "title": "End card", "caption": "The flat mark rises, the wordmark joins it, then one line and the address.", "src": "https://app.monolith.market/brand/motion/end-card.mp4", "poster": "https://app.monolith.market/brand/motion/end-card.jpg", "source": "Sample", "at": "4.5 s" } ] }, "sound": { "track": { "bpm": 174, "key": "G minor", "barSeconds": 1.3793, "firstDownbeatSeconds": -0.017, "snareBeats": [ 2, 4 ], "dropBar": 16, "lastBar": 27 }, "cuts": [ { "title": "The Monolith track", "caption": "The redesign film’s cut: the intro, the drop at 11 s, the final chord ringing out.", "src": "https://app.monolith.market/brand/sound/monolith-track.m4a", "at": "44.5 s" }, { "title": "With its sounds", "caption": "The same cut with the clicks and hits over it, as the film plays it. The reference for levels.", "src": "https://app.monolith.market/brand/sound/monolith-track-with-sounds.m4a", "at": "44.5 s" }, { "title": "Short cut", "caption": "Straight into the lead-in, the drop at 5.5 s. Bars 12-15, 16-23, 24-27.", "src": "https://app.monolith.market/brand/sound/monolith-track-22s.m4a", "at": "22.5 s" }, { "title": "Medium cut", "caption": "The drop at 11 s. Bars 0-3, 12-15, 16-23, 24-27.", "src": "https://app.monolith.market/brand/sound/monolith-track-28s.m4a", "at": "28 s" }, { "title": "Long cut", "caption": "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.", "src": "https://app.monolith.market/brand/sound/monolith-track-55s.m4a", "at": "55.6 s" }, { "title": "Original take", "caption": "Untouched, and the source of every cut. −13.7 LUFS with peaks at 0 dBTP, so use a cut in a film.", "src": "https://app.monolith.market/brand/sound/monolith-track-original.mp3", "at": "39 s" } ], "effects": [ { "title": "Click", "caption": "Every click of the pointer, with a little Block under it. A deep mechanical key: it reads as a real click over the drums.", "src": "https://app.monolith.market/brand/sound/click.mp3", "at": "0.5 s" }, { "title": "Key", "caption": "One key as a caret appears, not one per word.", "src": "https://app.monolith.market/brand/sound/key.mp3", "at": "0.5 s" }, { "title": "Tick", "caption": "As a chart’s sweep passes a mark.", "src": "https://app.monolith.market/brand/sound/tick.mp3", "at": "0.5 s" }, { "title": "Block", "caption": "Alone when a part lifts off a page, and quietly under each Click.", "src": "https://app.monolith.market/brand/sound/block.mp3", "at": "0.5 s" }, { "title": "Boom", "caption": "The big hits: one word that lands, and the mark at the end.", "src": "https://app.monolith.market/brand/sound/boom.mp3", "at": "1.5 s" }, { "title": "Punch", "caption": "Over each Boom, which is nearly all sub-bass: a phone can’t play it alone.", "src": "https://app.monolith.market/brand/sound/punch.mp3", "at": "1 s" }, { "title": "Thump", "caption": "Under the last Boom, as the mark lands.", "src": "https://app.monolith.market/brand/sound/thump.mp3", "at": "1 s" } ], "recut": "https://app.monolith.market/brand/sound/recut.mjs", "voice": { "name": "Evan – Calm, Grounded & Reflective", "provider": "ElevenLabs", "voiceId": "TWutjvRaJqAX89preB4e", "model": "eleven_multilingual_v2", "levelLufs": -17, "samples": [ { "title": "Opening", "caption": "“Most stablecoins are built for good days. Monolith is built for the worst one. Here’s what that looks like, hour by hour.”", "src": "https://app.monolith.market/brand/sound/voice-opening.mp3", "at": "7.5 s" }, { "title": "Story", "caption": "“Midnight. The worst day is over. Your stablecoin is still backed, still redeemable, still yours.”", "src": "https://app.monolith.market/brand/sound/voice-midnight.mp3", "at": "6.2 s" }, { "title": "End line", "caption": "“Monolith. Stablecoins built for the worst day.”", "src": "https://app.monolith.market/brand/sound/voice-end.mp3", "at": "3 s" } ] } }, "profiles": { "avatars": [ { "file": "https://app.monolith.market/brand/social/avatar.png", "name": "Orange on paper", "use": "The default: @MonolithMarket on X, the Discord server, Telegram, Farcaster, Safe.", "small": "https://app.monolith.market/brand/social/avatar-400.png", "sizes": [ "800 × 800", "400 × 400" ] }, { "file": "https://app.monolith.market/brand/social/avatar-ink.png", "name": "Paper on ink", "use": "Secondary official accounts (a bot, the docs) and dark surfaces.", "small": "https://app.monolith.market/brand/social/avatar-ink-400.png", "sizes": [ "800 × 800", "400 × 400" ] }, { "file": "https://app.monolith.market/brand/social/avatar-orange.png", "name": "Ink on orange", "use": "Campaign weeks, and small icon slots where paper vanishes on white.", "small": "https://app.monolith.market/brand/social/avatar-orange-400.png", "sizes": [ "800 × 800", "400 × 400" ] } ], "xHeader": { "file": "https://app.monolith.market/brand/social/banner.png", "size": "1500 × 500", "safeArea": "The avatar covers the lower left from about y 330 down, and phones crop the top and bottom: set the lockup and one line left-aligned at x 96, between y 110 and 300." } }, "social": { "posts": [ { "src": "https://app.monolith.market/brand/social/post-launch.jpg", "caption": "Launch", "size": "1600 × 900", "note": "The stablecoin’s header from the app, between hairlines, under “ is live.”", "alt": "Post image: “SwanUSD is live.” over the app’s SwanUSD header with its collateral, DAO and four figures" }, { "src": "https://app.monolith.market/brand/social/post-diagram.jpg", "caption": "Thread diagram", "size": "1600 × 900", "note": "Three numbered steps: real coins, ink arrows, one verb each.", "alt": "Thread image: steps 1 Deposit wstETH, 2 Borrow SwanUSD and 3 Stake sSwanUSD, as coins joined by arrows, under “From collateral to yield.”" }, { "src": "https://app.monolith.market/brand/social/chart-locked.jpg", "caption": "Area chart", "size": "1600 × 900", "note": "The app’s chart card: ink line, faint area, hairline grid; the figure is the headline.", "alt": "Chart image: “$982K locked” over a chart card of locked value rising from July to October" }, { "src": "https://app.monolith.market/brand/social/chart-split.jpg", "caption": "Comparison", "size": "1600 × 900", "note": "The Stats page’s split bar and rows, with real token icons.", "alt": "Chart image: “Locked, by stablecoin” over a card with a split bar, SwanUSD $640K 65% and invUSD $343K 35%" }, { "src": "https://app.monolith.market/brand/social/chart-backing.jpg", "caption": "Backing donut", "size": "1080 × 1080", "note": "The app’s donut around the coin; the loans and the PSM in chart order.", "alt": "Square chart: a donut of 58% variable-rate loans, 30% interest-free loans and 12% PSM around the SwanUSD coin" }, { "src": "https://app.monolith.market/brand/social/chart-peg.jpg", "caption": "Peg chart", "size": "1600 × 900", "note": "The price in ink inside a green ±0.3% band, with an “On peg” chip.", "alt": "Chart image: “Steady at $1.00” over a chart card of the price inside a pale green band from $0.997 to $1.003" }, { "src": "https://app.monolith.market/brand/social/post-feature.jpg", "caption": "Feature", "size": "1600 × 900", "note": "The headline left, the real form as a product shot.", "alt": "Post image: “Borrow at 0%, interest-free.” beside the app’s Borrow form with the interest-free loan type selected" }, { "src": "https://app.monolith.market/brand/social/post-vote.jpg", "caption": "Governance", "size": "1600 × 900", "note": "The real proposal card, with its vote bars and its state.", "alt": "Post image: “Holders decide.” over the app’s card of an active Swan DAO proposal and its votes" }, { "src": "https://app.monolith.market/brand/social/post-figure.jpg", "caption": "One number", "size": "1600 × 900", "note": "One figure in Lora, a label above, one line of context below.", "alt": "Post image: $982K in large Lora, “Locked on Monolith” above and “2 stablecoins · 1 DAO” below" }, { "src": "https://app.monolith.market/brand/social/post-milestone.jpg", "caption": "Milestone", "size": "1080 × 1350", "note": "A thousand dots, one for each staker, over the figure and one italic word.", "alt": "Portrait post: a grid of a thousand dots, the last one ink, over “1,000 stakers”" }, { "src": "https://app.monolith.market/brand/social/thread-cover.jpg", "caption": "Thread cover", "size": "1600 × 900", "note": "The topic, “A thread” and the app’s coin tab bar with the section open.", "alt": "Thread cover: “How DAOs work” and “A thread” over the app’s coin tab bar with the DAO tab open" }, { "src": "https://app.monolith.market/brand/social/thread-end.jpg", "caption": "Thread end", "size": "1600 × 900", "note": "“Launch yours.” beside the real Deploy form; the link goes in the post.", "alt": "Thread end card: “Launch yours.” beside the app’s Deploy form" }, { "src": "https://app.monolith.market/brand/social/post-quote.jpg", "caption": "Quote", "size": "1080 × 1080", "note": "The mark, one sentence with its second half in orange italic, a hairline.", "alt": "Square post: “Launch with flexibility. Transition to immutability.” in Lora on paper" }, { "src": "https://app.monolith.market/brand/social/og-default.png", "caption": "Link preview", "size": "1200 × 630", "note": "Served for every page without its own; coin pages use the coin’s logo.", "alt": "Link preview: the Monolith lockup and “Launch a stablecoin built to last.” on paper, with a hairline over the subline" } ], "screens": [ "https://app.monolith.market/brand/ui/coin-header.png", "https://app.monolith.market/brand/ui/loan-type.png", "https://app.monolith.market/brand/ui/tab-bar.png", "https://app.monolith.market/brand/ui/proposal.png", "https://app.monolith.market/brand/ui/deploy-form.png", "https://app.monolith.market/brand/ui/stake-1.png", "https://app.monolith.market/brand/ui/stake-2.png", "https://app.monolith.market/brand/ui/stake-3.png" ] }, "sections": [ { "id": "essence", "title": "Essence", "lead": "A stablecoin factory that people can trust for decades. The brand says so by being calm.", "blocks": [ { "kind": "p", "text": "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." }, { "kind": "p", "text": "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." }, { "kind": "table", "head": [ "We are", "We are not" ], "rows": [ [ "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" ] ] }, { "kind": "list", "items": [ "Tagline: “Launch a stablecoin built to last.”", "Subline: “Launch with flexibility. Transition to immutability.”", "Ownership: Owned by Inverse Finance DAO." ] } ] }, { "id": "principles", "title": "Principles", "lead": "Five rules every screen, post and asset follows.", "blocks": [ { "kind": "table", "head": [ "Rule", "What it means" ], "rows": [ [ "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." ] ] } ] }, { "id": "logo", "title": "Logo", "lead": "The mark is a standing slab, cut on two corners. Orange on paper, always flat.", "blocks": [ { "kind": "specimen", "id": "logo-lockups", "description": "The lockup: the orange mark beside the word Monolith in Lora SemiBold, on paper and on ink, and the mark alone." }, { "kind": "table", "head": [ "Part", "Spec" ], "rows": [ [ "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." ] ] }, { "kind": "dodont", "dos": [ "Keep the mark flat orange, or ink when color is unavailable", "Give it clear space", "Use the supplied files" ], "donts": [ "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" ] }, { "kind": "downloads", "items": [ { "label": "Mark, orange (SVG)", "href": "/brand/logo/monolith-mark.svg", "note": "Primary" }, { "label": "Mark, ink (SVG)", "href": "/brand/logo/monolith-mark-ink.svg", "note": "One-color print and stamps" }, { "label": "Mark, paper (SVG)", "href": "/brand/logo/monolith-mark-paper.svg", "note": "On ink or photos with a band" }, { "label": "Lockup on paper (PNG)", "href": "/brand/logo/monolith-lockup.png", "note": "1600 px wide, transparent" }, { "label": "Lockup on ink (PNG)", "href": "/brand/logo/monolith-lockup-on-ink.png", "note": "1600 px wide, transparent" } ] } ] }, { "id": "color", "title": "Color", "lead": "Paper, ink and one orange. Light only: one theme to build, test and keep consistent.", "blocks": [ { "kind": "swatches", "tokens": [ { "name": "Paper", "token": "paper", "hex": "#F0EEE6", "role": "Surface", "use": "The page. Every screen and asset starts on paper." }, { "name": "Paper deep", "token": "paper-deep", "hex": "#E8E5DB", "role": "Surface", "use": "Recessed tracks (the coin tab bar, segmented controls, meters), skeletons, quiet tiles." }, { "name": "Surface", "token": "surface", "hex": "#FAF9F5", "role": "Surface", "use": "Cards, panels, inputs on surfaces, menus, modals, the open tab." }, { "name": "Rule", "token": "rule", "hex": "#DFDCD1", "role": "Line", "use": "Hairlines: card borders, row dividers, the top bar." }, { "name": "Rule strong", "token": "rule-strong", "hex": "#C9C6BB", "role": "Line", "use": "Input borders, secondary buttons, emphasized dividers." }, { "name": "Ink", "token": "ink", "hex": "#1A1A1A", "role": "Text", "onPaper": 14.98, "use": "Text, figures, primary buttons, the open tab’s label." }, { "name": "Ink soft", "token": "ink-soft", "hex": "#3D3D3D", "role": "Text", "onPaper": 9.35, "use": "Secondary text, field labels, unselected tabs." }, { "name": "Muted", "token": "muted", "hex": "#696760", "role": "Text", "onPaper": 4.87, "use": "Labels, captions, meta lines. The lightest color allowed for text." }, { "name": "Faint", "token": "faint", "hex": "#A9A69B", "role": "Decoration", "onPaper": 2.1, "use": "Placeholders and decorative marks only, never information." }, { "name": "On ink", "token": "on-ink", "hex": "#FAF9F5", "role": "Text", "use": "Text on ink (16.5:1)." }, { "name": "Orange", "token": "brand", "hex": "#FF7230", "role": "Brand", "onPaper": 2.35, "use": "The mark, the active tab icon, the brand moment. Never text, never data." }, { "name": "Orange strong", "token": "brand-strong", "hex": "#D45A20", "role": "Brand", "onPaper": 3.42, "use": "The active nav underline; the italic accent in large display type; yields and earnings at 24px and up." }, { "name": "Orange text", "token": "brand-text", "hex": "#B04A17", "role": "Brand", "onPaper": 4.71, "use": "Orange when it has to be small text, e.g. a brand link; yields and earnings below 24px." }, { "name": "Orange tint", "token": "brand-tint", "hex": "#F8E2D3", "role": "Brand", "use": "Brand banners and the \"live\" chip, with ink text." }, { "name": "Positive", "token": "positive", "hex": "#2E7550", "role": "State", "onPaper": 4.79, "use": "Healthy, on peg, done, executed. Always with a word." }, { "name": "Positive tint", "token": "positive-tint", "hex": "#E2EDE4", "role": "State", "use": "Background of positive chips and notices." }, { "name": "Caution", "token": "caution", "hex": "#8A5D0E", "role": "State", "onPaper": 4.95, "use": "Watch, pending action, not delegated. Always with a word." }, { "name": "Caution tint", "token": "caution-tint", "hex": "#F3E8CF", "role": "State", "use": "Background of caution chips and notices." }, { "name": "Negative", "token": "negative", "hex": "#B03A2A", "role": "State", "onPaper": 5.19, "use": "At risk, failed, defeated, errors. Always with a word." }, { "name": "Negative tint", "token": "negative-tint", "hex": "#F5E1DB", "role": "State", "use": "Background of negative chips and notices." } ] }, { "kind": "list", "items": [ "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." ] } ] }, { "id": "typography", "title": "Typography", "lead": "Lora for titles and the figures that matter; Inter for everything else.", "blocks": [ { "kind": "specimen", "id": "type-specimen", "description": "Lora and Inter specimens at each step of the scale." }, { "kind": "table", "head": [ "Role", "Family", "Size", "Weight", "Tracking", "Use" ], "rows": [ [ "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." ] ] }, { "kind": "list", "items": [ "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." ] } ] }, { "id": "voice", "title": "Voice and naming", "lead": "Plain words, short sentences, exact numbers. Say what happens, then stop.", "blocks": [ { "kind": "table", "head": [ "Say", "Don’t say", "Why" ], "rows": [ [ "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." ] ] }, { "kind": "list", "items": [ "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." ] } ] }, { "id": "features", "title": "Features", "lead": "Eight product areas. Each has one name, one icon, one line and one figure it leads with.", "blocks": [ { "kind": "features", "items": [ { "id": "stablecoins", "name": "Stablecoins", "icons": [ "Coins" ], "place": "Top bar · /coins", "line": "Every stablecoin on Monolith in one list: what is locked, what borrowing costs, what stakers earn.", "figure": "$982K", "figureLabel": "locked", "say": [ "stablecoin", "locked" ], "avoid": [ "coin", "Markets", "TVL" ], "example": { "src": "/brand/social/chart-split.jpg", "label": "Comparison post" } }, { "id": "deploy", "name": "Deploy", "icons": [ "Rocket" ], "place": "Top bar · /deploy, titled “Deploy a stablecoin”", "line": "Launch your own stablecoin, with its own DAO if you want one, in a single transaction.", "figure": "1", "figureLabel": "transaction, about two minutes", "say": [ "launch a stablecoin", "Deploy (the page)" ], "avoid": [ "create a token", "fork", "mint a coin" ], "example": { "src": "/brand/social/post-launch.jpg", "label": "Launch post" } }, { "id": "borrow", "name": "Borrow", "icons": [ "HandCoins" ], "place": "A stablecoin’s first tab", "line": "Borrow the stablecoin against your collateral, at a variable rate or interest-free.", "figure": "1.19%", "figureLabel": "APR, variable; or 0% interest-free", "say": [ "borrow", "collateral", "variable rate", "interest-free loan" ], "avoid": [ "free debt", "CDP", "vault" ], "example": { "src": "/brand/social/post-feature.jpg", "label": "Feature post" } }, { "id": "earn", "name": "Stake and Earn", "icons": [ "Sparkles", "TrendingUp" ], "place": "A stablecoin’s Stake tab · top bar “Earn” (/earn)", "line": "Earn what borrowers pay, plus governance tokens, by staking the stablecoin; stake those to share the revenue.", "figure": "150%", "figureLabel": "APY", "isEarnFigure": true, "say": [ "stake", "Savings", "staked SwanUSD (sSwanUSD)", "governance tokens" ], "avoid": [ "vault share", "farm", "GOV" ], "example": { "src": "/brand/social/post-milestone.jpg", "label": "Milestone post" } }, { "id": "redeem", "name": "Redeem", "icons": [ "ArrowDownUp" ], "place": "A stablecoin’s Redeem tab", "line": "Turn the stablecoin into $1 of its collateral, straight from the protocol, without a buyer.", "figure": "$1.00", "figureLabel": "of collateral each, less a fee", "say": [ "redeem", "collateral", "redemption fee" ], "avoid": [ "burn", "cash out", "withdraw" ], "example": { "src": "/brand/motion/captions.jpg", "label": "Captions sample" } }, { "id": "trade", "name": "Trade", "icons": [ "Repeat" ], "place": "A stablecoin’s Trade tab, with two sub-tabs: the stablecoin and its governance token", "line": "Buy or sell the stablecoin through its PSM or a DEX route, whichever pays more, and its governance token beside it.", "figure": "1:1", "figureLabel": "through the PSM", "say": [ "trade", "buy", "sell", "PSM (peg stability module)" ], "avoid": [ "a separate “Buy SWAN” tab", "arbitrage" ], "example": { "src": "/brand/social/chart-peg.jpg", "label": "Peg chart" } }, { "id": "daos", "name": "DAOs", "icons": [ "Landmark" ], "place": "A stablecoin’s DAO tab (Overview, Proposals, Technical) · /daos", "line": "Holders run the stablecoin: governance tokens with a fixed supply, staking rewards, a revenue share, a treasury and on-chain votes.", "figure": "10,000,000", "figureLabel": "governance tokens, fixed", "say": [ "DAO", "governance token", "proposal", "vote", "treasury" ], "avoid": [ "CoinDAO", "GOV", "governor" ], "example": { "src": "/brand/social/post-vote.jpg", "label": "Governance post" } }, { "id": "dashboard", "name": "Dashboard", "icons": [ "LayoutDashboard" ], "place": "Top bar · /dashboard", "line": "Everything you borrow, stake and earn, across every stablecoin, in one place.", "figure": "$12,480", "figureLabel": "net value", "say": [ "your positions", "net value", "earning" ], "avoid": [ "portfolio", "PnL" ], "example": { "src": "/brand/motion/count-up.jpg", "label": "Count-up sample" } } ] }, { "kind": "list", "items": [ "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." ] } ] }, { "id": "numbers", "title": "Numbers and data", "lead": "Fewer, plainer numbers: three or four per view, rounded, in ink. Details on demand.", "blocks": [ { "kind": "table", "head": [ "Kind", "Format", "Example" ], "rows": [ [ "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%" ] ] }, { "kind": "p", "text": "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." } ] }, { "id": "layout", "title": "Layout and spacing", "lead": "An 8-point grid, a 1280px container, one card level and hairlines.", "blocks": [ { "kind": "table", "head": [ "Element", "Spec" ], "rows": [ [ "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." ] ] } ] }, { "id": "components", "title": "Components", "lead": "One set of parts for every screen. In code: src/components/ui.", "blocks": [ { "kind": "specimen", "id": "components", "description": "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." }, { "kind": "table", "head": [ "Component", "Rule" ], "rows": [ [ "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." ] ] } ] }, { "id": "iconography", "title": "Icons and imagery", "lead": "Lucide line icons in muted ink. Black-and-white stone photography in the shape of the mark.", "blocks": [ { "kind": "list", "items": [ "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." ] } ] }, { "id": "motion", "title": "Motion and video", "lead": "Calm, precise, editorial. Motion shows what changed, then gets out of the way.", "blocks": [ { "kind": "videos", "items": [ { "title": "Title card", "caption": "The words rise one by one, the orange italic is unveiled left to right, a hairline settles under it.", "src": "/brand/motion/title-card.mp4", "poster": "/brand/motion/title-card.jpg", "source": "Sample", "at": "5 s" }, { "title": "Transition", "caption": "A hairline crosses the frame in one eased second and leaves the next figure behind it.", "src": "/brand/motion/transition-hairline.mp4", "poster": "/brand/motion/transition-hairline.jpg", "source": "Sample", "at": "5 s" }, { "title": "Screencast", "caption": "The real Stake tab on paper: the pointer picks each way to earn, and the app answers as it does.", "src": "/brand/motion/screencast-stake.mp4", "poster": "/brand/motion/screencast-stake.jpg", "source": "Sample", "at": "7 s" }, { "title": "Chart in one sweep", "caption": "The grid settles, the line draws in one stroke with its area behind it, the last value lands.", "src": "/brand/motion/chart-sweep.mp4", "poster": "/brand/motion/chart-sweep.jpg", "source": "Sample", "at": "6 s" }, { "title": "Count-up", "caption": "Locked value counts up in Lora’s tabular figures, so the digits never shift.", "src": "/brand/motion/count-up.mp4", "poster": "/brand/motion/count-up.jpg", "source": "Sample", "at": "5 s" }, { "title": "Captions", "caption": "One line at a time on an ink box, in step with the voice; the picture changes with the words.", "src": "/brand/motion/captions.mp4", "poster": "/brand/motion/captions.jpg", "source": "Sample", "at": "7 s" }, { "title": "End card", "caption": "The flat mark rises, the wordmark joins it, then one line and the address.", "src": "/brand/motion/end-card.mp4", "poster": "/brand/motion/end-card.jpg", "source": "Sample", "at": "4.5 s" } ] }, { "kind": "table", "head": [ "Topic", "Rule" ], "rows": [ [ "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." ] ] }, { "kind": "downloads", "items": [ { "label": "Title card (MP4)", "href": "/brand/motion/title-card.mp4", "note": "Sample, 5 s" }, { "label": "Transition (MP4)", "href": "/brand/motion/transition-hairline.mp4", "note": "Sample, 5 s" }, { "label": "Screencast (MP4)", "href": "/brand/motion/screencast-stake.mp4", "note": "Sample, 7 s" }, { "label": "Chart in one sweep (MP4)", "href": "/brand/motion/chart-sweep.mp4", "note": "Sample, 6 s" }, { "label": "Count-up (MP4)", "href": "/brand/motion/count-up.mp4", "note": "Sample, 5 s" }, { "label": "Captions (MP4)", "href": "/brand/motion/captions.mp4", "note": "Sample, 7 s" }, { "label": "End card (MP4)", "href": "/brand/motion/end-card.mp4", "note": "Sample, 4.5 s" } ] } ] }, { "id": "sound", "title": "Sound", "lead": "One track under every film, one voice to tell the story, and a few real sounds.", "blocks": [ { "kind": "audio", "items": [ { "title": "The Monolith track", "caption": "The redesign film’s cut: the intro, the drop at 11 s, the final chord ringing out.", "src": "/brand/sound/monolith-track.m4a", "at": "44.5 s" }, { "title": "With its sounds", "caption": "The same cut with the clicks and hits over it, as the film plays it. The reference for levels.", "src": "/brand/sound/monolith-track-with-sounds.m4a", "at": "44.5 s" }, { "title": "Short cut", "caption": "Straight into the lead-in, the drop at 5.5 s. Bars 12-15, 16-23, 24-27.", "src": "/brand/sound/monolith-track-22s.m4a", "at": "22.5 s" }, { "title": "Medium cut", "caption": "The drop at 11 s. Bars 0-3, 12-15, 16-23, 24-27.", "src": "/brand/sound/monolith-track-28s.m4a", "at": "28 s" }, { "title": "Long cut", "caption": "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.", "src": "/brand/sound/monolith-track-55s.m4a", "at": "55.6 s" }, { "title": "Original take", "caption": "Untouched, and the source of every cut. −13.7 LUFS with peaks at 0 dBTP, so use a cut in a film.", "src": "/brand/sound/monolith-track-original.mp3", "at": "39 s" } ] }, { "kind": "table", "head": [ "Topic", "Detail" ], "rows": [ [ "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." ] ] }, { "kind": "h3", "text": "In a film" }, { "kind": "dodont", "dos": [ "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." ], "donts": [ "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." ] }, { "kind": "h3", "text": "Sounds" }, { "kind": "audio", "items": [ { "title": "Click", "caption": "Every click of the pointer, with a little Block under it. A deep mechanical key: it reads as a real click over the drums.", "src": "/brand/sound/click.mp3", "at": "0.5 s" }, { "title": "Key", "caption": "One key as a caret appears, not one per word.", "src": "/brand/sound/key.mp3", "at": "0.5 s" }, { "title": "Tick", "caption": "As a chart’s sweep passes a mark.", "src": "/brand/sound/tick.mp3", "at": "0.5 s" }, { "title": "Block", "caption": "Alone when a part lifts off a page, and quietly under each Click.", "src": "/brand/sound/block.mp3", "at": "0.5 s" }, { "title": "Boom", "caption": "The big hits: one word that lands, and the mark at the end.", "src": "/brand/sound/boom.mp3", "at": "1.5 s" }, { "title": "Punch", "caption": "Over each Boom, which is nearly all sub-bass: a phone can’t play it alone.", "src": "/brand/sound/punch.mp3", "at": "1 s" }, { "title": "Thump", "caption": "Under the last Boom, as the mark lands.", "src": "/brand/sound/thump.mp3", "at": "1 s" } ] }, { "kind": "table", "head": [ "Sound", "Peak", "Filter", "The music under it" ], "rows": [ [ "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" ] ] }, { "kind": "p", "text": "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." }, { "kind": "h3", "text": "Voice" }, { "kind": "audio", "items": [ { "title": "Opening", "caption": "“Most stablecoins are built for good days. Monolith is built for the worst one. Here’s what that looks like, hour by hour.”", "src": "/brand/sound/voice-opening.mp3", "at": "7.5 s" }, { "title": "Story", "caption": "“Midnight. The worst day is over. Your stablecoin is still backed, still redeemable, still yours.”", "src": "/brand/sound/voice-midnight.mp3", "at": "6.2 s" }, { "title": "End line", "caption": "“Monolith. Stablecoins built for the worst day.”", "src": "/brand/sound/voice-end.mp3", "at": "3 s" } ] }, { "kind": "table", "head": [ "Topic", "Detail" ], "rows": [ [ "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." ] ] }, { "kind": "dodont", "dos": [ "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." ], "donts": [ "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." ] }, { "kind": "h3", "text": "A new length" }, { "kind": "table", "head": [ "Bars", "In the original take", "What happens" ], "rows": [ [ "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." ] ] }, { "kind": "code", "lang": "bash", "text": "# recut.mjs and the original take in one folder; it needs Node and ffmpeg\nnode recut.mjs new-cut.wav 12-15,16-23,24-27" }, { "kind": "list", "items": [ "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." ] }, { "kind": "downloads", "items": [ { "label": "recut.mjs", "href": "/brand/sound/recut.mjs", "note": "The cutter" }, { "label": "monolith-track-original.mp3", "href": "/brand/sound/monolith-track-original.mp3", "note": "What it cuts" } ] } ] }, { "id": "profiles", "title": "Profiles", "lead": "One avatar everywhere, and a header that stays clear of it.", "blocks": [ { "kind": "specimen", "id": "avatars", "description": "The three avatars cropped to circles, as X, Discord and Telegram show them: orange on paper, paper on ink, ink on orange." }, { "kind": "specimen", "id": "x-profile", "description": "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." }, { "kind": "table", "head": [ "Avatar", "Use" ], "rows": [ [ "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." ] ] }, { "kind": "list", "items": [ "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." ] }, { "kind": "downloads", "items": [ { "label": "Avatar, orange on paper (PNG)", "href": "/brand/social/avatar.png", "note": "800 × 800" }, { "label": "Avatar, orange on paper, small (PNG)", "href": "/brand/social/avatar-400.png", "note": "400 × 400" }, { "label": "Avatar, paper on ink (PNG)", "href": "/brand/social/avatar-ink.png", "note": "800 × 800" }, { "label": "Avatar, paper on ink, small (PNG)", "href": "/brand/social/avatar-ink-400.png", "note": "400 × 400" }, { "label": "Avatar, ink on orange (PNG)", "href": "/brand/social/avatar-orange.png", "note": "800 × 800" }, { "label": "Avatar, ink on orange, small (PNG)", "href": "/brand/social/avatar-orange-400.png", "note": "400 × 400" }, { "label": "X header (PNG)", "href": "/brand/social/banner.png", "note": "1500 × 500, clear of the avatar" } ] } ] }, { "id": "social", "title": "Social media", "lead": "Picture first: one graphic, a two-to-five-word headline, one-or-two-word labels. The detail goes in the post.", "blocks": [ { "kind": "gallery", "items": [ { "src": "/brand/social/post-launch.jpg", "caption": "Launch", "size": "1600 × 900", "note": "The stablecoin’s header from the app, between hairlines, under “ is live.”", "alt": "Post image: “SwanUSD is live.” over the app’s SwanUSD header with its collateral, DAO and four figures" }, { "src": "/brand/social/post-diagram.jpg", "caption": "Thread diagram", "size": "1600 × 900", "note": "Three numbered steps: real coins, ink arrows, one verb each.", "alt": "Thread image: steps 1 Deposit wstETH, 2 Borrow SwanUSD and 3 Stake sSwanUSD, as coins joined by arrows, under “From collateral to yield.”" }, { "src": "/brand/social/chart-locked.jpg", "caption": "Area chart", "size": "1600 × 900", "note": "The app’s chart card: ink line, faint area, hairline grid; the figure is the headline.", "alt": "Chart image: “$982K locked” over a chart card of locked value rising from July to October" }, { "src": "/brand/social/chart-split.jpg", "caption": "Comparison", "size": "1600 × 900", "note": "The Stats page’s split bar and rows, with real token icons.", "alt": "Chart image: “Locked, by stablecoin” over a card with a split bar, SwanUSD $640K 65% and invUSD $343K 35%" }, { "src": "/brand/social/chart-backing.jpg", "caption": "Backing donut", "size": "1080 × 1080", "note": "The app’s donut around the coin; the loans and the PSM in chart order.", "alt": "Square chart: a donut of 58% variable-rate loans, 30% interest-free loans and 12% PSM around the SwanUSD coin" }, { "src": "/brand/social/chart-peg.jpg", "caption": "Peg chart", "size": "1600 × 900", "note": "The price in ink inside a green ±0.3% band, with an “On peg” chip.", "alt": "Chart image: “Steady at $1.00” over a chart card of the price inside a pale green band from $0.997 to $1.003" }, { "src": "/brand/social/post-feature.jpg", "caption": "Feature", "size": "1600 × 900", "note": "The headline left, the real form as a product shot.", "alt": "Post image: “Borrow at 0%, interest-free.” beside the app’s Borrow form with the interest-free loan type selected" }, { "src": "/brand/social/post-vote.jpg", "caption": "Governance", "size": "1600 × 900", "note": "The real proposal card, with its vote bars and its state.", "alt": "Post image: “Holders decide.” over the app’s card of an active Swan DAO proposal and its votes" }, { "src": "/brand/social/post-figure.jpg", "caption": "One number", "size": "1600 × 900", "note": "One figure in Lora, a label above, one line of context below.", "alt": "Post image: $982K in large Lora, “Locked on Monolith” above and “2 stablecoins · 1 DAO” below" }, { "src": "/brand/social/post-milestone.jpg", "caption": "Milestone", "size": "1080 × 1350", "note": "A thousand dots, one for each staker, over the figure and one italic word.", "alt": "Portrait post: a grid of a thousand dots, the last one ink, over “1,000 stakers”" }, { "src": "/brand/social/thread-cover.jpg", "caption": "Thread cover", "size": "1600 × 900", "note": "The topic, “A thread” and the app’s coin tab bar with the section open.", "alt": "Thread cover: “How DAOs work” and “A thread” over the app’s coin tab bar with the DAO tab open" }, { "src": "/brand/social/thread-end.jpg", "caption": "Thread end", "size": "1600 × 900", "note": "“Launch yours.” beside the real Deploy form; the link goes in the post.", "alt": "Thread end card: “Launch yours.” beside the app’s Deploy form" }, { "src": "/brand/social/post-quote.jpg", "caption": "Quote", "size": "1080 × 1080", "note": "The mark, one sentence with its second half in orange italic, a hairline.", "alt": "Square post: “Launch with flexibility. Transition to immutability.” in Lora on paper" }, { "src": "/brand/social/og-default.png", "caption": "Link preview", "size": "1200 × 630", "note": "Served for every page without its own; coin pages use the coin’s logo.", "alt": "Link preview: the Monolith lockup and “Launch a stablecoin built to last.” on paper, with a hairline over the subline" } ] }, { "kind": "table", "head": [ "Post", "Picture", "Words" ], "rows": [ [ "Launch", "The stablecoin’s header as the app shows it (coin, collateral, DAO, four figures), between hairlines.", "“ 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." ] ] }, { "kind": "list", "items": [ "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." ] }, { "kind": "table", "head": [ "Format", "Size", "Notes" ], "rows": [ [ "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." ] ] }, { "kind": "dodont", "dos": [ "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" ], "donts": [ "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" ] }, { "kind": "downloads", "items": [ { "label": "Launch (JPG)", "href": "/brand/social/post-launch.jpg", "note": "1600 × 900" }, { "label": "Thread diagram (JPG)", "href": "/brand/social/post-diagram.jpg", "note": "1600 × 900" }, { "label": "Area chart (JPG)", "href": "/brand/social/chart-locked.jpg", "note": "1600 × 900" }, { "label": "Comparison (JPG)", "href": "/brand/social/chart-split.jpg", "note": "1600 × 900" }, { "label": "Backing donut (JPG)", "href": "/brand/social/chart-backing.jpg", "note": "1080 × 1080" }, { "label": "Peg chart (JPG)", "href": "/brand/social/chart-peg.jpg", "note": "1600 × 900" }, { "label": "Feature (JPG)", "href": "/brand/social/post-feature.jpg", "note": "1600 × 900" }, { "label": "Governance (JPG)", "href": "/brand/social/post-vote.jpg", "note": "1600 × 900" }, { "label": "One number (JPG)", "href": "/brand/social/post-figure.jpg", "note": "1600 × 900" }, { "label": "Milestone (JPG)", "href": "/brand/social/post-milestone.jpg", "note": "1080 × 1350" }, { "label": "Thread cover (JPG)", "href": "/brand/social/thread-cover.jpg", "note": "1600 × 900" }, { "label": "Thread end (JPG)", "href": "/brand/social/thread-end.jpg", "note": "1600 × 900" }, { "label": "Quote (JPG)", "href": "/brand/social/post-quote.jpg", "note": "1080 × 1080" }, { "label": "Link preview (PNG)", "href": "/brand/social/og-default.png", "note": "1200 × 630" } ] } ] }, { "id": "accessibility", "title": "Accessibility", "lead": "Readable by everyone, with any input, in any light.", "blocks": [ { "kind": "list", "items": [ "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." ] } ] }, { "id": "code", "title": "Tokens in code", "lead": "The app reads these tokens; this page and /brand.json mirror them.", "blocks": [ { "kind": "code", "lang": "css", "text": "@theme {\n --color-paper: #f0eee6;\n --color-paper-deep: #e8e5db;\n --color-surface: #faf9f5;\n --color-rule: #dfdcd1;\n --color-rule-strong: #c9c6bb;\n --color-ink: #1a1a1a;\n --color-ink-soft: #3d3d3d;\n --color-muted: #696760;\n --color-faint: #a9a69b;\n --color-on-ink: #faf9f5;\n --color-brand: #ff7230;\n --color-brand-strong: #d45a20;\n --color-brand-text: #b04a17;\n --color-brand-tint: #f8e2d3;\n --color-positive: #2e7550;\n --color-positive-tint: #e2ede4;\n --color-caution: #8a5d0e;\n --color-caution-tint: #f3e8cf;\n --color-negative: #b03a2a;\n --color-negative-tint: #f5e1db;\n --font-sans: \"Inter\", ui-sans-serif, system-ui, sans-serif;\n --font-serif: \"Lora\", Georgia, serif;\n}" }, { "kind": "list", "items": [ "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)." ] } ] } ] }