# Sibme Design System

> A professional educational workspace defined by deep plum and sky blue accents against clean, structured white canvases.

**Source:** [https://sibme.com](https://sibme.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Sibme utilizes a "Plum and Sky" dual-primary palette to distinguish between platform segments and pricing tiers. The system is anchored by **Roboto** across all hierarchies, favoring a bold 700 weight for display and 500 for interactive elements. Layouts are structured with a 10px base unit for controls and a generous 160px rhythm for major section transitions. Components feature a signature 25px to 30px border radius on primary CTAs, creating a soft but professional educational atmosphere.

## Signature DNA
1. **The Plum/Sky Pivot** (The system alternates between `{--plum}` #564376 and `{--sky}` #1688c2 to differentiate product solutions and pricing categories, observed on Homepage and Pricing pages).
2. **Soft-Pill Interaction** (Primary actions use a `{radius.panel}` of 25px-30px, contrasting with the sharp 0px edges of the main page containers).
3. **Roboto-Heavy Hierarchy** (The system relies exclusively on Roboto, using weight 700 for display sizes up to 50px to establish clear instructional authority).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.ink}` | `#2d2d2d` | Primary body text | 57 | 1.0 | `--ink` |
| `{colors.chalk}` | `#ffffff` | Page background, button text | 54 | 1.0 | `--chalk` |
| `{colors.charcoal}` | `#1a1b1f` | Navigation and heading text | 133 | 0.8 | Computed |
| `{colors.surface-soft}` | `#eeecf1` | Secondary backgrounds, cards | 8 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.plum}` | `#564376` | Primary CTA background (Tier 1) | 4 | 1.0 | `--plum` |
| `{colors.sky}` | `#1688c2` | Primary CTA background (Tier 2) | 3 | 1.0 | `--sky` |
| `{colors.ocean}` | `#0d5274` | Decorative text (decorative_only) | 2 | 1.0 | `--ocean` |
| `{colors.sky-border}` | `#5cacd4` | Card and section borders | 5 | 0.6 | Computed |
| `{colors.plum-border}` | `#bbb4c8` | Pricing card borders | 3 | 0.6 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Roboto | 300, 400, 500, 700 | Heading, Body, UI | Roboto (Google Fonts) | Apache 2.0 |
| system-ui | 500 | Table headers | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 50px | 50px | 1px | 700 | Hero Headlines | `h2#home-discover` |
| `{type.h2}` | 32px | 50px | normal | 700 | Section Headers | `h2.h2-software-feature` |
| `{type.h3}` | 27px | 27px | normal | 500 | Feature Titles | `h3.h3-ai-solution` |
| `{type.h4}` | 24px | 30px | normal | 500 | Accordion Heads | `h4.accordion-heading` |
| `{type.button-lg}` | 22px | 28px | normal | 500 | Hero CTA | `a.hero-book-btn` |
| `{type.body-lg}` | 18px | 34px | normal | 400 | Intro Paragraphs | `p.p-software-slider-info` |
| `{type.body}` | 16px | 28px | normal | 400 | Default Text | `div.main-nav-sms24` |
| `{type.ui-sm}` | 14px | 28px | normal | 500 | Nav / Small Links | `a#top_head_pricing_link` |

### Principles
1. **Bold Authority**: Display text always uses weight 700 with a 1px letter spacing to anchor the page.
2. **Interactive Medium**: Buttons and navigation links use weight 500 to distinguish from static body text (400).
3. **Tight Display**: Line heights for large headings (50px) are set to 1:1 ratio (50px) for compact impact.

## Spacing
**Base unit:** 10px (derived from control radii and common gaps)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 7px | 33 |
| `{space.sm}` | 10px | 121 |
| `{space.md}` | 20px | 40 |
| `{space.lg}` | 40px | 28 |
| `{space.section}` | 160px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Main containers, Footer | 232 occurrences |
| `{radius.control}` | 10px | Pricing cards, Inputs | 31 occurrences |
| `{radius.panel}` | 25px | Primary Buttons | 4 occurrences |
| `{radius.pill}` | 30px | Secondary Buttons | 27 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.03) 0px 3px 7px 0px` | Pricing Cards | Pricing page |
| `{shadow.heavy}` | `rgba(0, 0, 0, 0.2) 7px 7px 17px 0px` | Floating UI elements | Homepage |

## Components

### Tier 1: Foundational
#### Rounded Button (Plum)
**Role:** Primary CTA for core platform actions.
**Pages observed:** Homepage, Pricing.
**Spec:** Background `{colors.plum}` (#564376) | Text `{colors.chalk}` (#ffffff) | Radius 25px | Padding 7px 25px | Typography 13px/500.
**States observed:** Default | Hover: Not captured | Active: Captured.

#### Rounded Button (Sky)
**Role:** Primary CTA for secondary platform segments.
**Pages observed:** Homepage, Pricing.
**Spec:** Background `{colors.sky}` (#1688c2) | Text `{colors.chalk}` (#ffffff) | Radius 25px | Padding 7px 25px | Typography 13px/500.

### Tier 2: Patterns
#### Pricing Card
**Role:** Tiered plan display.
**Pages observed:** Pricing.
**Spec:** Background `{colors.chalk}` (#ffffff) | Border 1px `{colors.plum-border}` (#bbb4c8) | Radius 10px | Shadow `{shadow.subtle}`.

#### Solution Tab
**Role:** Segmented navigation for Schools/Districts.
**Pages observed:** Homepage.
**Spec:** Background `{colors.surface-soft}` (#eeecf1) | Text `{colors.ink}` (#2d2d2d) | Radius 30px | Padding 9px 15px.

### Tier 3: Surface-specific
#### Footer
**Role:** Global site navigation footer.
**Pages observed:** Homepage, Pricing.
**Spec:** Background `rgb(20, 45, 60)` | Text `{colors.chalk}` (#ffffff) | Radius 0px | Padding 60px 0px 40px.

#### AI Feature Card
**Role:** Highlighting AI-specific tools.
**Pages observed:** Homepage.
**Spec:** Background `{colors.chalk}` (#ffffff) | Border 10px `{colors.sky-border}` (#8ac3e1) | Radius 24px | Padding 20px 20px 20px 160px.

## Layout
| Property | Value |
|------|-------|
| Max-width | 1200px (approx) |
| Section Gap | 160px |
| Card Padding | 20px - 30px |

## Imagery & decoration
- **Isometric Illustrations**: Used for solution overviews (Schools, Districts) with a consistent 3D perspective.
- **Gradient Overlays**: Blue-to-transparent gradients used in hero sections to transition photographic backgrounds to white canvas.
- **Iconography**: Material Icons used for accordion and UI indicators at 32px.

## Do's
- Use `{colors.plum}` #564376 for the "Book Demo" primary action.
- Apply `{radius.panel}` 25px to all primary action buttons.
- Set display headlines to Roboto 700 with 1px letter spacing.
- Use `{space.section}` 160px for vertical rhythm between major homepage bands.
- Maintain a white background (#ffffff) for all content cards to ensure contrast.

## Don'ts
- **Wrong:** Using #1688c2 (Sky) for the main "Book Demo" button. **Right:** Use #564376 (Plum). **Reason:** Plum is the primary brand signal; Sky is reserved for sub-segments.
- Do not use border-radius on the main footer or top-level section containers.
- Avoid using weights below 400 for body text to maintain legibility in instructional contexts.
- Do not mix the Plum and Sky borders within the same feature grid.

## Quick start

### CSS Variables
```css
:root {
  --plum: #564376;
  --sky: #1688c2;
  --ink: #2d2d2d;
  --chalk: #ffffff;
  --radius-panel: 25px;
  --space-section: 160px;
  --font-main: 'Roboto', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-plum: #564376;
  --color-sky: #1688c2;
  --color-ink: #2d2d2d;
  --spacing-section: 160px;
  --radius-panel: 25px;
  --font-roboto: "Roboto";
}
```

## Known gaps
- Hover and Focus states for buttons were not explicitly captured in the static evidence.
- Mobile-specific navigation transitions (hamburger menu behavior) were not fully documented.
- The specific hex for the dark footer background was observed in rendering but not found in the declared token list.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|----------|--------------|
| Homepage | https://sibme.com | 1440px | 2026-06-06 |
| Pricing | https://sibme.com/pricing | 1440px | 2026-06-06 |