Clear over clever
Payment infrastructure demands clarity. No jargon, no wordplay that obscures meaning. Say what it does, plainly.
Brand guidelines
The visual identity behind duly.
duly is one mark, three fonts, and a single accent color. Everything you need to represent the brand, ready to download. Includes a machine-readable design system for agents and automated integrations.
Assets
30 assets. Click to download.
Icons (4)
Wordmarks (duly) (4)
Wordmarks (duly.finance) (4)
Social SVG (4)
Social PNG (6)
OG / Share (4)
Favicons (3)
Logo
Clear Space & Minimum Sizing
Maintain clear space equal to 1.5x the icon's corner radius on all sides. Never place the mark closer than this to other elements, page edges, or text.
Minimum sizes: Icon alone: 24px. Horizontal lockup: 120px wide. Below these thresholds, use icon only.
Do
- Use provided SVG files without modification
- Use icon alone when space is constrained
- Use black mark on light backgrounds, white on dark
- Use monochrome white on photography or video
- Pair with "duly" wordmark in Clash Grotesk Bold, lowercase
Don't
- Rotate, skew, stretch, or distort the mark
- Recolor the mark with off-brand colors
- Add drop shadows, glows, or other effects
- Place on low-contrast or busy backgrounds
- Outline, stroke, or add borders to the mark
- Recreate or approximate the mark manually
Visual Misuse Examples
Stretched
Rotated
Wrong Color
Low Contrast
Drop Shadow
Outlined
Colors
Lavender scale
Neutral scale
Semantic
Typography
Display / Headings
Clash Grotesk
Ship code in GitHub. Earn USDC in duly.
Weights 500-700. Used for headings, wordmark, navigation, and the lavender dot.
Body / UI
Satoshi
duly gives teams a PR-native payout engine. You fund orders upfront, assign the right contributor wallet, and release USDC only after accepted delivery.
Weights 400-700. Used for body text, buttons, inputs, labels, and descriptions.
Data / Code
JetBrains Mono
$4,291.83 USDC
4sGh...9xKm · 2 minutes ago
Weights 400-500. Used for numbers, hashes, code blocks, USDC amounts, and step indicators.
For developers
Font Import
Copy this into your HTML <head> to load all three fonts.
CSS Variables
Define these once. Reference them everywhere.
Full token file with all variables: brand-tokens.css
Type Scale
Click any row to copy the CSS shorthand.
| Role | Font | Weight | Size | Line Height | Tracking | CSS |
|---|---|---|---|---|---|---|
| Display | Clash Grotesk | 700 | 48px | 1.15 | -0.02em | font: 700 48px/1.15 var(--font-display); letter-spacing: -0.02em; |
| H1 | Clash Grotesk | 700 | 36px | 1.2 | -0.015em | font: 700 36px/1.2 var(--font-display); letter-spacing: -0.015em; |
| H2 | Clash Grotesk | 600 | 28px | 1.3 | -0.01em | font: 600 28px/1.3 var(--font-display); letter-spacing: -0.01em; |
| H3 | Clash Grotesk | 600 | 24px | 1.4 | 0 | font: 600 24px/1.4 var(--font-display); |
| Body | Satoshi | 400 | 16px | 1.6 | 0 | font: 400 16px/1.6 var(--font-body); |
| Body Small | Satoshi | 400 | 14px | 1.5 | 0 | font: 400 14px/1.5 var(--font-body); |
| UI Label | Satoshi | 500 | 14px | 1.4 | 0 | font: 500 14px/1.4 var(--font-body); |
| Caption | Satoshi | 400 | 13px | 1.5 | 0 | font: 400 13px/1.5 var(--font-body); |
| Overline | Satoshi | 600 | 11px | 1.2 | 0.1em | font: 600 11px/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; |
| Data | JetBrains Mono | 500 | 16px | 1.5 | 0 | font: 500 16px/1.5 var(--font-mono); |
| Code | JetBrains Mono | 400 | 13px | 1.7 | 0 | font: 400 13px/1.7 var(--font-mono); |
| Wordmark | Clash Grotesk | 700 | — | — | -0.02em | font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; |
Usage Examples
Copy-paste these into your project. All values reference the CSS variables above.
Tailwind Config
Add to your tailwind.config.js or @theme block.
Voice & tone
Confident, not corporate
We're builders shipping real tools, not a bank drafting disclaimers. Speak with conviction, skip the hedging.
Technical when needed
Our audience knows Solana. Don't dumb down the tech. Say "PDA" and "USDC" when appropriate.
Approved
“Deliver work, get paid. USDC hits your wallet instantly.”
“Teams, contributors, and their agents. One payment rail.”
“Non-custodial. Programmable. Built on Solana.”
Avoid
“Revolutionizing the future of decentralized payment infrastructure.”
“Leveraging blockchain technology to disrupt...”
“Web3-native AI-powered autonomous payment solutions.”
Capitalization: “duly” is always lowercase. Never “Duly”, “DULY”, or “DuLy.”
FAQ
Logo & Mark
Can I modify the logo or mark?
No. Always use the provided SVG files without modification. Do not rotate, skew, stretch, recolor, add effects, or recreate the mark manually.
What's the minimum size for the logo?
Icon alone: 24px. Horizontal lockup: 120px wide. Below these thresholds, use the icon only — never the full lockup at small sizes.
Can I use the logo on a busy or photographic background?
Use the monochrome white version on photography or video. Ensure sufficient contrast — never place the mark on low-contrast or busy backgrounds without a solid or semi-transparent backing.
Colors & Typography
Which font do I use for buttons and headings?
Clash Grotesk — Bold (700) for display headings and the wordmark, Semibold (600) for H2/H3 and button labels. Never use Satoshi or JetBrains Mono for headings.
What colors can I use on dark backgrounds?
White mark on black or dark surfaces. Lavender (#C8B6F9) for the signature dot and interactive accents. See the Colors section for the full palette.
Usage & Assets
Is the wordmark uppercase or lowercase?
Always lowercase "duly" — in the wordmark, running text, URLs, and social handles. Never "Duly", "DULY", or "DuLy". The geometric D mark is a distinct symbol and does not follow this rule.
Where do I get the latest brand assets?
Everything is in the Asset Inventory section above. Download individual SVGs or grab the full set. All assets are vector and ready to use.
How do I implement the brand tokens in code?
Copy the CSS custom properties from the Typography section, or use the Tailwind config snippet. The brand-tokens.css file contains all variables. For Next.js/Tailwind v4, use the @theme block.
Questions about using the brand?
Reach out at hello@duly.finance