kymera-brand

Files (3)

• SKILL.md
• kymera-dark.html · demos/
• kymera-light.html · demos/

SKILL.md (first lines)

# Kymera Brand System

You are a systems designer creating interfaces for **Kymera Systems LLC** - a quantitative trading and AI research platform. Every artifact should feel like a sophisticated command interface from a near-future trading terminal.

## Design Philosophy

**Jarvis meets Bloomberg Terminal**: Clean, technical precision with atmospheric depth. Not generic corporate design—engineered excellence with character.

**Core Principles**:
1. **Data is the hero** - UI exists to present information clearly
2. **Layered depth** - Never flat; always atmospheric
3. **Technical sophistication** - Monospace for precision, display fonts for impact
4. **Intentional motion** - Every animation serves a purpose

## Color System

### Dark Mode (Primary)
```css
:root {
  /* Foundation */
  --ky-dark-deep: #0A0E1A;
  --ky-dark-surface: #121826;
  --ky-dark-elevated: #1A2332;
  --ky-dark-border: rgba(0, 217, 255, 0.15);

  /* Signature Cyan (Jarvis Blue) */
  --ky-cyan-primary: #00D9FF;
  --ky-cyan-glow: #00FFFF;
  --ky-cyan-dim: #0099AA;

  /* Status Colors */
  --ky-success: #00FF88;
  --ky-warning: #FFB800;
  --ky-critical: #FF3366;

  /* Text */
  --ky-text-primary: #FFFFFF;
  --ky-text-secondary: rgba(255, 255, 255, 0.7);
  --ky-text-muted: rgba(255, 255, 255, 0.4);

  /* Glow Effects */
  --ky-glow-cyan: 0 0 20px rgba(0, 217, 255, 0.3), 0 0 40px rgba(0, 217, 255, 0.15);
  --ky-glow-intense: 0 0 10px var(--ky-cyan-glow), 0 0 30px var(--ky-cyan-primary), 0 0 50px rgba(0, 217, 255, 0.5);
}
```

### Light Mode (Professional/Print)
```css
:root.light {
  /* Foundation */
  --ky-light-bg: #F8FAFC;
  --ky-light-surface: #FFFFFF;
  --ky-light-elevated: #F1F5F9;
  --ky-light-border: rgba(10, 14, 26, 0.1);

  /* Signature Blue (Deeper for contrast) */
  --ky-blue-primary: #0066CC;
  --ky-blue-dark: #004499;
  --ky-blue-light: #E6F2FF;

  /* Status Colors (Adjusted for light bg) */
  --ky-success: #059669;
  --ky-warning: #D97706;
  --ky-critical: #DC2626;

  /* Text */
  --ky-text-primary: #0A0E1A;
  --ky-text-secondary: rgba(10, 14, 26, 0.7);
  --ky-text-muted: rgba(10, 14, 26, 0.5);

  /* Subtle Accents (no glow on light) */
  --ky-accent-border: 2px solid var(--ky-blue-primary);
  --ky-accent-bg: var(--ky-blue-light);
}
```

## Typography

### Font Stack
```css
/* Technical/Data - Primary */
--ky-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

/* Display/Headers */
--ky-font-display: 'Orbitron', 'Exo 2', 'Rajdhani', sans-serif;

/* Body (when mono inappropriate) */
--ky-font-body: 'Inter Tight', 'IBM Plex Sans', sans-serif;
```

### Usage Rules
| Context | Font | Weight | Style |
|---------|------|--------|-------|
| Hero titles | Display | 700-900 | Uppercase, wide tracking |
| Section headers | Display | 600-700 | Title case |
| Body text | Body/Mono | 400-500 | Normal |
| Data/numbers | Mono | 400-600 | Tabular figures |
| Code/technical | Mono | 400 | Normal |

## Component Patterns

### Dark Mode Card
```css
.ky-card {
  background: var(--ky-dark-surface);
  border: 1px solid var(--ky-dark-border);
  border-radius: 8px;
  box-shadow: var(--ky-glow-cyan);
  backdrop-filter: blur(10px);
}

.ky-card:hover {
  box-shadow: var(--ky-glow-intense);
  border-color: var(--ky-cyan-primary);
}
```

### Light Mode Card
```css

From astoreyai/claude-skills, MIT.

More from astoreyai/claude-skills