Skip to main content

​
Brand Guidelines

CHRT Logo
CHRT is the Stripe for Nautical Charts — a developer-first maritime API platform that transforms complex nautical data into simple, powerful tools for marine applications.

​
Brand Identity

​
Our Mission

We bridge the gap between maritime tradition and modern technology, making professional nautical chart data accessible through clean, reliable APIs.

​
Visual Philosophy

  • Professional Maritime Heritage: Clean lines inspired by nautical instruments
  • Developer-First Design: Clear hierarchy, readable typography, intuitive interfaces
  • Modern Precision: Crisp details with subtle maritime references
  • Trust & Reliability: Consistent, dependable visual language

​
Color System

Our color palette draws inspiration from deep ocean waters and maritime navigation tools, creating a sophisticated and trustworthy appearance.

​
Primary Colors

Primary Teal

#1DB5A6
hsl(174, 72%, 45%)
rgb(29, 181, 166)Our signature color representing clarity and navigation precision. Use for primary actions, links, and key interactive elements.

Primary Light

#26C4B5
hsl(174, 72%, 56%)
rgb(38, 196, 181)Lighter variant for hover states, highlights, and secondary emphasis. Perfect for gradients and glowing effects.

​
Background Colors

Deep Maritime

#000A15
hsl(210, 100%, 4%)
rgb(0, 10, 21)Primary dark background representing deep ocean depths. Creates professional contrast and maritime atmosphere.

Card Surface

#11284C
hsl(220, 39%, 6%)
rgb(17, 40, 76)Elevated surface color for cards, panels, and content areas. Provides subtle depth without losing readability.

​
Gradient System

Primary Gradient

background: linear-gradient(135deg, #1DB5A6, #26C4B5);
Our signature gradient flowing from primary to primary-light. Use for hero sections, CTAs, and premium features.

Subtle Background Gradient

background: linear-gradient(180deg, #000A15, #11284C);
Gentle depth gradient for large background areas and section transitions.

​
Typography System

​
Font Families

Interface Font

Inter
Clean, modern sans-serif for all UI text, headings, and body content. Excellent readability across all screen sizes.
font-family: 'Inter', sans-serif;

Code Font

JetBrains Mono
Monospaced font for code blocks, API keys, and technical content. Clear character distinction for developers.
font-family: 'JetBrains Mono', monospace;

​
Type Scale

​
Maritime Design Elements

​
Iconography

Our icon system draws from nautical instruments and maritime navigation tools:

Navigation

Compass roses, navigation arrows, directional indicators for user guidance and wayfinding.

Data Flow

Wave patterns, current flows, and depth contours representing data movement and processing.

Precision Tools

Crosshairs, rulers, and measurement tools for accuracy and technical precision.

​
Interactive Patterns

Hover Effects

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(29, 181, 166, 0.2);
Subtle lift with teal glow, like lighthouse beams cutting through maritime darkness.

Loading States

Smooth animations inspired by radar sweeps and sonar pulses. Use our primary teal with gentle opacity shifts.

​
Component Library

​
Button System

Primary CTA

<Button variant="default">
  Get Started
</Button>
Solid teal background with white text. Use for primary actions and conversions.

Outline Style

<Button variant="outline">
  Learn More  
</Button>
Teal border with transparent background. Perfect for secondary actions.

​
Card Components

Elevated Cards

<Card className="bg-card border border-border">
  <CardHeader>
    <CardTitle>API Feature</CardTitle>
    <CardDescription>Description text</CardDescription>
  </CardHeader>
</Card>
Use subtle shadows and our card background color for content grouping.

​
Implementation Guidelines

​
CSS Custom Properties

:root {
  /* Brand Colors */
  --primary: 174 72% 45%;          /* #1DB5A6 */
  --primary-foreground: 0 0% 100%; /* White text */
  
  /* Backgrounds */
  --background: 210 100% 4%;       /* #000A15 */
  --card: 220 63% 18%;            /* Card surfaces */
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, 
    hsl(174, 72%, 45%), hsl(174, 72%, 56%));
}

​
Usage Examples

​
Brand Assets

​
Logo Usage

Minimum Size

Never scale the CHRT logo below 24px height to maintain legibility and brand recognition.

Clear Space

Maintain clear space equal to the logo height on all sides. No other elements should encroach this area.

​
Do’s and Don’ts

​
Contact

For brand guideline questions or design system additions:

Design System Support

Email: [email protected]
Response Time: 24-48 hours
Include: Screenshots, use case context, technical requirements
Last updated: January 2025