# Banyancloud Design System

> High-contrast enterprise security canvas utilizing deep obsidian foundations, sharp geometric containers, and high-voltage pink accents.

**Source:** https://banyancloud.io | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Banyancloud employs a "Dark Enterprise" aesthetic, anchoring its identity in a dominant achromatic palette of Obsidian (`#0f0d1d`) and Slate Gray (`#55585b`) against a clean white canvas. The system is punctuated by a high-contrast accent of Electric Pink (`#ff3c73`) used primarily for text-level emphasis and brand signals. Typography is strictly Poppins, leaning heavily on bold (700) and extra-bold (800) weights for display elements to project structural stability. UI components favor a mix of sharp 0px corners for layout blocks and soft 50px pill-shapes for interactive surfaces, creating a rhythmic tension between technical rigidity and modern SaaS accessibility.

## Signature DNA
1. **The Obsidian Anchor** (The use of `#0f0d1d` as the primary secondary-theme color for headings and deep-background sections, providing a high-contrast floor for white text. Observed on homepage hero and section headers.)
2. **High-Voltage Pink Punctuation** (The specific use of `#ff3c73` for small-scale text accents and sub-titles, cutting through the monochrome foundation. Observed in `tp-section-sub-title` elements.)
3. **Pill-to-Sharp Contrast** (The juxtaposition of 50px radius panels/buttons against 0px sharp layout containers. Observed in testimonial cards vs. main section wrappers.)

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--tp-theme-secondary` | `#0f0d1d` | Primary dark text, deep backgrounds | 17 | 1 | computed_style |
| `--tp-text-body` | `#55585b` | Standard body text, button labels | 74 | 1 | computed_style |
| `--tp-text-1` | `#777181` | Muted secondary text | 21 | 1 | computed_style |
| `--bs-body-bg` | `#ffffff` | Primary page background | 45 | 1 | computed_style |
| `--tp-grey-2` | `#f2f4f8` | Subtle surface backgrounds, borders | 4 | 1 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `accent-pink` | `#ff3c73` | Text emphasis, sub-titles | 14 | 0.8 | computed_style |
| `--tp-theme-primary` | `#3c72fc` | Decorative brand blue (rare) | 1 | 1 | decorative_only |
| `accent-navy` | `#0a0d81` | Component borders | 9 | 0.6 | computed_style |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `--bs-form-invalid-color` | `#dc3545` | Error states |
| `--bs-form-valid-color` | `#198754` | Success states |
| `--bs-warning-bg-subtle` | `#fff3cd` | Warning backgrounds |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Poppins | 400, 700, 800 | All roles (Heading, Body, UI) | Poppins (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `display-mega` | 50px | 55.5px | normal | 700 | Hero titles | `h2.tp-slider-title` |
| `display-count` | 40px | 48px | normal | 700 | Stats/Counters | `h3.tp-counter-3-item-count` |
| `heading-lg` | 32px | 40px | normal | 700 | Section titles | `h4.tp-section-title` |
| `subheading` | 18px | 21.6px | normal | 700 | Card titles | `h5.tp-testimonial-two-avater-title` |
| `body-bold` | 16px | 26px | normal | 700 | Section sub-titles | `span.tp-section-sub-title` |
| `body-md` | 16px | 28px | normal | 400 | Standard paragraphs | `p` |
| `body-sm` | 14px | 26px | normal | 400 | Footer/Small text | `section.slider-area` |
| `label-nav` | 14px | 46px | normal | 400 | Navigation items | `span` |

### Principles
1. **Bold-First Hierarchy:** Headings never drop below weight 700, ensuring a heavy visual "stamp" on every section.
2. **Generous Leading:** Body text utilizes a 1.75x line-height ratio (16px/28px) to maintain legibility against complex backgrounds.
3. **Achromatic Body:** All long-form reading text is strictly `#55585b`, never pure black.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `space-xs` | 4px | 18 |
| `space-sm` | 8px | 4 |
| `space-md` | 15px | 8 |
| `space-lg` | 20px | 26 |
| `space-xl` | 60px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-sharp` | 0px | Section containers, main wrappers | 95 occurrences |
| `radius-sm` | 5px | Content cards, inputs | 30 occurrences |
| `radius-pill` | 50px | Testimonial panels, primary buttons | 27 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `shadow-soft` | `rgba(16, 23, 40, 0.15) 0px 0px 40px 0px` | Feature cards, floating panels | 9 occurrences |

## Components

### Tier 1: Foundational

#### Card
**Role:** Primary content container for features and blog posts.
**Pages observed:** https://banyancloud.io
**Spec:** Background `#ffffff` | Text `#55585b` | Border `0px` | Radius `5px` | Padding `20px` | Shadow `rgba(16, 23, 40, 0.15) 0px 0px 40px 0px`
**States observed:** Default: captured | Hover: not captured

#### Surface (Pill)
**Role:** Decorative or testimonial containers.
**Pages observed:** https://banyancloud.io
**Spec:** Background `transparent` | Border `#0a0d81` (2px) | Radius `50%` (Pill-like) | Typography `14px Poppins`
**States observed:** Default: captured

### Tier 2: Patterns

#### Section Header
**Role:** Standardized title block for new page segments.
**Pages observed:** https://banyancloud.io
**Spec:** Sub-title text `#ff3c73` (16px/700) | Main title text `#0f0d1d` (32px/700) | Bottom margin `20px`
**States observed:** Default: captured

#### Counter Item
**Role:** Statistical display for social proof.
**Pages observed:** https://banyancloud.io
**Spec:** Count text `#ffffff` (40px/700) | Label text `#ffffff` (16px/400) | Alignment `Center`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Testimonial Panel
**Role:** High-trust user quotes.
**Pages observed:** https://banyancloud.io
**Spec:** Background `#ffffff` | Radius `50px` | Shadow `soft` | Typography `16px Poppins` | Border `0px`
**States observed:** Default: captured

#### Blog Preview
**Role:** News and update feed items.
**Pages observed:** https://banyancloud.io
**Spec:** Image Radius `5px` | Date text `#ff3c73` | Title text `#0f0d1d` (18px/700)
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max content width | 1200px (estimated) |
| Section Gap | 60px |
| Card Grid | 3-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; 3-column grids stack to 1-column. |

## Imagery & decoration
Banyancloud uses technical "circuitry" line art and abstract geometric overlays (diamonds, squares) in the background of hero and stat sections. It avoids organic shapes, preferring a rigid, "cloud-architecture" visual language.

## Do's
- Use `#ff3c73` strictly for sub-titles and small emphasis points.
- Maintain `700` weight for all headers to preserve brand authority.
- Apply `50px` radius only to high-level "floating" panels like testimonials.
- Use `#0f0d1d` for any section that requires a dark theme background.
- Keep body text at `#55585b` for optimal readability on white.

## Don'ts
- **Wrong:** Using `#3c72fc` (Blue) as a primary button color. 
  **Right:** Use Obsidian or White for primary actions. 
  **Reason:** Blue is a decorative-only token in the parent system.
- **Wrong:** Applying rounded corners to main section wrappers.
  **Right:** Keep section containers at `0px` radius.
  **Reason:** The brand identity relies on sharp, architectural layout blocks.
- **Wrong:** Labeling `#ff3c73` as the "Primary" brand color.
  **Right:** Label it as "Accent Pink".
  **Reason:** The primary brand foundation is monochrome/achromatic.
- Do not use weights below 400 for any UI text.
- Do not use shadows on sharp-edged section containers.

## Similar brands
- CrowdStrike (Dark enterprise, high-contrast accents)
- Snyk (Technical SaaS, bold typography, geometric)
- Cloudflare (Clean layout, structured typography, security-focused)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --tp-theme-secondary: #0f0d1d;
  --tp-text-body: #55585b;
  --tp-accent-pink: #ff3c73;
  --tp-common-white: #ffffff;
  --tp-grey-bg: #f2f4f8;
  --font-poppins: 'Poppins', sans-serif;
  --radius-pill: 50px;
  --radius-card: 5px;
  --shadow-main: 0px 0px 40px 0px rgba(16, 23, 40, 0.15);
}
```

## Agent prompt examples
- "Generate a feature card using Poppins 700 for the title, #55585b for the body text, and a 5px border radius with a soft 40px spread shadow."
- "Create a section header with a #ff3c73 sub-title in all-caps and a #0f0d1d main title at 32px weight 700."
- "Design a testimonial block with a 50px border radius, white background, and Poppins 16px body text."

## Known gaps
- Hover states for primary buttons were not explicitly captured in the computed style evidence.
- The specific mobile breakpoint for the 1200px container transition was not measured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://banyancloud.io | Desktop 1440px | 2026-06-06 |
| Homepage (Mobile) | https://banyancloud.io | Mobile 390px | 2026-06-06 |