Sablier brand guidelines including color palette (primary orange/blue gradients, dark theme, gray text colors), logo variations (square/wide, SVG/PNG formats), typography, icon assets, NFT designs, usage rules, and asset paths. Use when working with branding, design, colors, logos, icons, visual identity, or Sablier brand materials.
Comprehensive reference for Sablier brand identity including color system, logo variations, typography, and usage guidelines. Auto-activated when working with brand assets or asking about design specifications.
The signature Sablier gradient from vibrant orange to golden yellow:
#ff7300#ffb800 - Golden yellow (gradient end)#ff9C00 - Median orange (gradient middle)Usage: Main branding, CTAs, highlights, logo gradient
Complementary blue gradient for accents and variety:
#003dff - Deep blue (gradient start)#00b7ff - Cyan blue (gradient end)#0063ff - Medium blue (gradient middle)#266cd9 - Muted blue (alternative)Usage: Secondary CTAs, links, accents, alternative gradient
11-shade system for backgrounds, borders, and UI elements (primary theme):
| Color | HEX | Usage |
|---|---|---|
| Dark 000 | #14161f | Background - landing pages |
| Dark 050 | #1a1d28 | Background - deeper layers |
| Dark 100 | #1e212f | Background - app default |
| Dark 150 | #212433 | Background - elevated |
| Dark 200 | #242838 | Background - higher elevation |
| Dark 250 | #262a3b | Background - highest elevation |
| Dark 300 | #2a2e41 | Borders - cards, boxes |
| Dark 400 | #30354a | Borders - inputs, interactive |
| Dark 500 | #363b54 | Borders - focus states |
| Dark 600 | #3c425d | Subtle highlights |
| Dark 700 | #424966 | Mid-tone highlights |
| Dark 800 | #484f70 | Light highlights |
| Dark 900 | #4e5679 | Lighter highlights |
| Dark 1000 | #545c82 | Lightest highlights |
Notes:
#000000)5-shade system for typography and labels:
#e1e4ea - Primary text color#c3c9d5 - Secondary text color#a5aec0 - Tertiary text#8792ab - Labels, subtle text#6a7795 - Muted labelsUsage:
#e52e52 - Errors, warnings, alerts, destructive actions✅ Do:
❌ Don't:
Location: /logo/wide/
| Variation | Format | Use Case |
|---|---|---|
all-gradient | SVG, PNG | Light backgrounds, full color |
all-black | SVG, PNG | Light backgrounds, monochrome |
all-white | SVG, PNG | Dark backgrounds, monochrome |
all-dark | SVG, PNG | Light backgrounds, dark variant |
gradient-black | SVG, PNG | Primary brand (orange gradient + black text) |
gradient-white | SVG, PNG | Dark backgrounds (orange gradient + white text) |
solid-wide-orange-black | PNG | Solid orange + black text |
Location: /logo/square/
| Variation | Format | Use Case |
|---|---|---|
gradient | SVG, PNG | Full color icon |
black | SVG, PNG | Light backgrounds |
black-solid | PNG | Light backgrounds, solid treatment |
solid | PNG | Solid color icon |
dark | SVG | Dark variant |
Location: /icon/
Standard Sizes: 192px, 250px, 256px, 1024px, 1500px Special Variants:
icon-padding-*.png - With spacing for tight layoutsicon-white-background.png - For print/light contextsicon-black.png - Monochrome varianticon-solid.png - Solid color treatmentfavicon/favicon.ico - Browser faviconContextual Icons (/other/):
stream-circle-streaming.png - Active stream indicatorstream-circle-ended.png - Ended stream indicatoricon-subgraph-primary.png - Subgraph branding (primary)icon-subgraph-secondary.png - Subgraph branding (secondary)Location: /print/
Professional print files with Pantone specifications:
✅ Do:
❌ Don't:
Wordmark Font: Custom sans-serif embedded in logo files
Status: No separate typography documentation exists yet
Recommendation: For body text/UI, use standard system fonts or web-safe alternatives:
Location: /nft/
Variations:
nft-green.png - Green themenft-purple.png - Purple themenft-red.png - Red themenft-white.png - White/light themenft-hourglass.png - Standard hourglass designnft-hourglass-art.png - Artistic variantDesign Elements:
Location: /template/
Banner Templates:
banner.png - Standard promotional bannerbanner-branding.png - Brand showcase bannerbanner-colors.png - Color palette showcasebanner-nft.png - NFT-focused bannerPartnership Materials:
partnership.png - Partnership templatepartnership-example.png - Example applicationVideo:
youtube-cover.png - Video thumbnail templateDark Theme App (Default):
Background: #1e212f (Dark 100)
Borders: #2a2e41 (Dark 300) for cards, #30354a (Dark 400) for inputs
Text: #e1e4ea (Gray 100) primary, #c3c9d5 (Gray 200) secondary
Labels: #8792ab (Gray 400)
Primary CTA: Linear gradient from #ff7300 to #ffb800
Logo Integration:
<!-- Light background -->
<img src="/logo/wide/all-gradient.svg" alt="Sablier" />
<!-- Dark background -->
<img src="/logo/wide/gradient-white.svg" alt="Sablier" />
<!-- Icon only -->
<img src="/icon/svg/icon.svg" alt="Sablier" width="256" />
Primary Gradient CSS: