Version: 25.07

Style Guide & Component Reference

Development Only

This page is for development reference only and will be removed before publishing. It demonstrates all available styling components and layouts inspired by the Codehooks design system.

Color Palette

Primary Colors

Primary Green: #22c55e - Main brand color
Primary Dark: #16a34a - Darker variant for emphasis
Primary Light: #4ade80 - Lighter variant for accents

Typography Colors

Headings (Light): #1a1a1a - Dark anthracite for main headings
Subheadings (Light): #2a2a2a - Slightly lighter for subheadings
Body Text (Light): #4a4a4a - Readable grey for body text
Secondary Text (Light): #666 - Muted text for descriptions

Background Colors

Page Background: #fafafa - Light grey page background
Panel Background: #f8f9fa - Light grey panels (Codehooks style)
Card Background: #f8f9fa - Light grey cards (unified system)
Code Highlight: #eff6ff - Light blue for code sections
Feature Section: #f8f9fa - Background for feature sections

Card System Colors

Card Background (All Modes): #f8f9fa - Consistent light grey
Card Text (Light Mode): Theme default colors
Card Text (Dark Mode): #212529 (titles), #495057 (body)
Card Icons (Light Mode): #007bff - Primary blue
Card Icons (Dark Mode): #25c2a0 - Primary teal
Card Borders: var(--ifm-table-border-color) - Theme-aware borders

Typography Examples

Heading 1 - Main Page Title

Large, bold heading in dark anthracite color for maximum impact.

Heading 2 - Section Title

Section headings in dark color for clear hierarchy.

Heading 3 - Subsection Title

Subsection headings for organizing content within sections.

Heading 4 - Component Title

Smaller headings for component titles and detailed sections.

Bold text for emphasis and italic text for subtle emphasis.

Regular paragraph text with good readability and proper line height. This demonstrates the standard body text styling used throughout the documentation.

Panels

Panel Grid Layout

🚀

API Development

REST, CRUD or custom APIs with automatic documentation and testing capabilities.

💾

Data Storage

NoSQL & Key-Value storage with built-in querying and indexing for fast data access.

⚡

Background Jobs

Code triggered by CRON schedules for automated tasks and data processing.

📊

Analytics

Built-in analytics and monitoring for tracking performance and usage patterns.

Single Panel Example

🔧

Configuration Management

Centralized configuration management with environment-specific settings and secure credential storage.

Text + Code Sections

API Development Example

Consider a Cyberhaven project, for example cyberhaven-api. Under the hood, Cyberhaven deploys an automatic REST API which is made up of the following really short - but complete application code:

CYBERHAVEN API SETUP
import { app } from 'cyberhaven-js'
// Use crudlify to create a REST API for any database collection
app.crudlify()
// bind to serverless runtime
export default app.init();

It's just 3 lines of code 🔥, and it delivers a fully secure CRUD REST API with a NoSQL database for JSON queries and updates. Client apps can instantly connect to your data API, for example from a JavaScript app like the example code snippet shown below:

const URL = 'https://cyberhaven-api.api.cyberhaven.io/dev/sensors';
const response = await fetch(URL, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Endpoint Sensor', status: 'active' })
});

Card System

The card grid system provides navigation cards for homepages and section overviews. All cards use a unified light grey background with built-in icons.

import Card from '@site/src/components/Card';

<div className="card-grid">
  <Card 
    title="Admin Guide" 
    description="Configure and manage your deployment" 
    link="/25.07/Admin" 
    headerType="auth" 
  />
  <Card 
    title="API Documentation" 
    description="REST API endpoints and integration guides" 
    link="/api" 
    headerType="api" 
  />
  <Card 
    title="User Guide" 
    description="End-user documentation and tutorials" 
    link="/25.07/Users" 
    headerType="files" 
  />
  <Card 
    title="Analytics" 
    description="Reports and data visualization" 
    link="/25.07/analytics" 
    headerType="analytics" 
  />
</div>

Feature Cards (Content Sections)

Feature cards are used for highlighting content sections within pages. They support optional copy functionality and all heading levels.

Basic Feature Card

<div className="feature-card-container">
  <div className="feature-card-header feature-card-auth">
    <h3>Configuration Steps</h3>
  </div>
  <div className="feature-card-body">
    Your content here with proper formatting.
    
    1. Step one
    2. Step two
    3. Step three
  </div>
</div>

Feature Card with Copy Button

<div className="feature-card-container" data-copy="true">
  <div className="feature-card-header feature-card-database">
    <h2>Database Setup</h2>
  </div>
  <div className="feature-card-body">
    This content can be copied to clipboard.
    
    **Prerequisites:**
    - Database backup
    - Migration tool installed
    - Downtime window scheduled
  </div>
</div>

Available Header Types

Both card grid and feature cards support the same header types with built-in icons:

`auth` - Authentication & Security

Icon: Security shield with checkmark
Use for: Authentication, security, SSO, login configurations
Examples: Okta setup, SAML configuration, user authentication

`api` - API Development

Icon: API development symbol
Use for: API development, REST endpoints, integrations
Examples: API documentation, endpoint guides, development tutorials

`database` - Data Storage

Icon: Database cylinder
Use for: Database operations, data storage, NoSQL
Examples: Database setup, data migration, storage configuration

`jobs` - Background Tasks

Icon: Clock/timer
Use for: Background jobs, scheduled tasks, CRON jobs
Examples: Job scheduling, automated tasks, background processes

`files` - File Operations

Icon: Folder
Use for: File operations, storage, document management
Examples: File uploads, document handling, storage configuration

`analytics` - Data & Reports

Icon: Bar chart
Use for: Analytics, reporting, data visualization
Examples: Reports setup, analytics configuration, data insights

`search` - Search & Discovery

Icon: Magnifying glass
Use for: Search functionality, content discovery, filtering
Examples: Search configuration, content indexing, discovery features

`config` - Configuration & Settings

Icon: Settings gear with center circle
Use for: Configuration management, settings, system setup
Examples: System configuration, user preferences, deployment settings

Card System Features

Unified Styling

Background: Light grey (#f8f9fa) in both light and dark modes
Text Contrast: Automatic dark text in dark mode for readability
Icons: Blue in light mode (#007bff), teal in dark mode (#25c2a0)
Responsive: Adapts to all screen sizes

Copy Functionality

Configurable: Add data-copy="true" to enable
Preserves Formatting: Line breaks and structure maintained
Visual Feedback: Clipboard icon → checkmark → clipboard icon
Accessibility: Proper ARIA labels and keyboard support

Pagination Cards: Previous/Next buttons use same styling
Table of Contents: Consistent text colors
Breadcrumbs: Unified color scheme

Standard Components

Alerts

Information

This is an informational alert with the primary green accent color.

Warning

This is a warning alert for important notices.

Danger

This is a danger alert for critical information.

Pro Tip

This is a tip alert for helpful suggestions.

Buttons

Tables

Feature	Description	Status
Dark Headings	Anthracite colored headings	✅ Implemented
Grey Panels	Codehooks-style panels	✅ Implemented
Text + Code	Combined text and code layouts	✅ Implemented
Green Accents	Primary green color scheme	✅ Implemented

Code Blocks

Example API Call
// Cyberhaven API example
const response = await fetch('/api/sensors', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer your-token',
    'Content-Type': 'application/json'
  }
});

const sensors = await response.json();
console.log('Active sensors:', sensors.filter(s => s.status === 'active'));

Installation Command
npm install @cyberhaven/sdk
# or
yarn add @cyberhaven/sdk

Tabs

JavaScript
Python
cURL

import { CyberhavenSDK } from '@cyberhaven/sdk';

const client = new CyberhavenSDK({
  apiKey: 'your-api-key'
});

from cyberhaven import CyberhavenClient

client = CyberhavenClient(api_key='your-api-key')

curl -X GET "https://api.cyberhaven.io/v1/sensors" \
  -H "Authorization: Bearer your-api-key"

Layout Guidelines

Panel Usage

Use .codehooks-panel-grid for multiple panels in a grid layout
Use .codehooks-panel for single panels or custom layouts
Include icons using .codehooks-panel-icon for visual hierarchy
Keep titles concise with .codehooks-panel-title
Use .codehooks-panel-description for explanatory text

Text + Code Sections

Use .text-code-section wrapper for combined text and code
Include .code-highlight-section for special code callouts
Use .code-highlight-title for code section labels
Maintain proper spacing between text and code blocks

Feature Sections

Use .codehooks-feature-section for highlighted feature sections with background
Include icons with .feature-icon class in headings for visual appeal
Add .learn-more sections for additional resources and links
Perfect for showcasing important features with code examples
Automatically adapts to dark mode with appropriate color adjustments

Color Usage

Headings: Always use dark colors (#1a1a1a, #2a2a2a) for maximum readability
Panels: Use light grey backgrounds (#f5f5f5) with subtle borders
Accents: Apply green colors sparingly for buttons, links, and highlights
Text: Use appropriate grey tones for hierarchy and readability

Dark Mode Support

All components automatically adapt to dark mode with:

Light text on dark backgrounds
Adjusted panel colors (#334155)
Maintained contrast ratios
Consistent green accent colors

Responsive Design

Panel grids automatically stack on mobile devices
Typography scales appropriately for different screen sizes
Spacing adjusts for optimal mobile experience
Touch-friendly interactive elements

Remember: This style guide will be removed before publishing. Use these components and guidelines to create consistent, professional documentation that matches the Codehooks design aesthetic.

Color Palette​

Primary Colors​

Typography Colors​

Background Colors​

Card System Colors​

Typography Examples​

Heading 1 - Main Page Title

Heading 2 - Section Title​

Heading 3 - Subsection Title​

Heading 4 - Component Title​

Panels​

Panel Grid Layout​

Single Panel Example​

Text + Code Sections​

API Development Example​

Card System​

Card Grid (Navigation Cards)​

Feature Cards (Content Sections)​

Basic Feature Card​

Feature Card with Copy Button​

Available Header Types​

auth - Authentication & Security​

api - API Development​

database - Data Storage​

jobs - Background Tasks​

files - File Operations​

analytics - Data & Reports​

search - Search & Discovery​

config - Configuration & Settings​

Card System Features​

Unified Styling​

Copy Functionality​

Navigation Integration​

Standard Components​

Alerts​

Buttons​

Tables​

Code Blocks​

Tabs​

Layout Guidelines​

Panel Usage​

Text + Code Sections​

Feature Sections​

Color Usage​

Dark Mode Support​

Responsive Design​

Color Palette

Primary Colors

Typography Colors

Background Colors

Card System Colors

Typography Examples

Heading 2 - Section Title

Heading 3 - Subsection Title

Heading 4 - Component Title

Panels

Panel Grid Layout

Single Panel Example

Text + Code Sections

API Development Example

Card System

Card Grid (Navigation Cards)

Feature Cards (Content Sections)

Basic Feature Card

Feature Card with Copy Button

Available Header Types

`auth` - Authentication & Security

`api` - API Development

`database` - Data Storage

`jobs` - Background Tasks

`files` - File Operations

`analytics` - Data & Reports

`search` - Search & Discovery

`config` - Configuration & Settings

Card System Features

Unified Styling

Copy Functionality

Navigation Integration

Standard Components

Alerts

Buttons

Tables

Code Blocks

Tabs

Layout Guidelines

Panel Usage

Text + Code Sections

Feature Sections

Color Usage

Dark Mode Support

Responsive Design