# How cavalry.scenegroup.co is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/cavalry.scenegroup.co-design)

Last updated: 2026-07-28

## Design character

Cavalry’s web marketing is **bold creative-tool branding**: electric purple panels (`#6437ff` family), stark black/white type, neon lime geometric line art, and pill-shaped CTAs. Teams and pricing pages feel confident and graphic—closer to a design studio poster than soft SaaS pastels.

What should survive adaptation:
- Purple as a full panel color, not only a tiny link accent
- High-contrast white type on purple; black type on white
- Lime geometry as signature illustration language
- Pill buttons and clean FAQ rule lists

## Foundations

### Color
Measured: `#ffffff`, `#000000`, `#6437ff`.
Lime greens appear in graphics (not always in role table). Use purple fields, white fields, black footers; lime for diagrams/marks.

### Typography
Weights 300–800. Sizes 11–20 UI/body, display **28–50px**, heavy titles on purple. FAQ questions medium/bold with simple chevrons.

### Spacing and layout
3–60px scale with steady 10/15/20/25/30 steps. Split layouts (purple column + white content), pricing tables, FAQ stacks, dark footer promos.

## Visual language
- Pill-dominant corners (~20px and full pills)
- Flat fills; border rules between FAQ rows
- Geometric lime stroke illustrations
- Light mode with vivid chroma panels

## Components and states
- Pill CTA (“Create your Team”)
- FAQ accordion rows with icons
- Pricing feature comparison
- Dark “Explore Cavalry” promo band
- Floating help/chat affordance in corner on some views

## Responsive behavior
Many teams/pricing crops from ~1200–1712. Purple split may stack above content on narrow views; pills remain.

## Practical guidance
**Preserve** purple panel bravery, lime geometry, pill CTAs, stark type.
**Avoid** diluting into generic gray SaaS; don’t replace lime diagrams with stock photos.

## Scope note
`/teams/` and `/pricing/` across eight captures. Main product marketing home may extend the system.

## Captured pages

[![Teams — FAQ split purple](https://pin.fontofweb.com/7157?format=jpg)](https://design.withfudge.com/share/pin-7157)

[Teams — FAQ split purple](https://design.withfudge.com/share/pin-7157)

[![Teams — full desktop](https://pin.fontofweb.com/7153?format=jpg)](https://design.withfudge.com/share/pin-7153)

[Teams — full desktop](https://design.withfudge.com/share/pin-7153)

[![Pricing](https://pin.fontofweb.com/7151?format=jpg)](https://design.withfudge.com/share/pin-7151)

[Pricing](https://design.withfudge.com/share/pin-7151)

[![Pricing — crop](https://pin.fontofweb.com/7152?format=jpg)](https://design.withfudge.com/share/pin-7152)

[Pricing — crop](https://design.withfudge.com/share/pin-7152)

## Colors

- `#6437ff`
- `#ffffff`
- `#000000`
- `#39ff14`
- `#111111`