# Feastsoftware Design System

> High-contrast industrial clarity anchored by deep navy foundations and sharp geometric precision.

**Source:** https://feastsoftware.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Feastsoftware utilizes a monochrome-first foundation where absolute black (#000000) and deep navy (#0d1b45) provide structural weight against a clean white (#ffffff) canvas. The system is characterized by a "Galano" typographic family that shifts from medium weights for headings to regular weights for dense body copy. Visual interest is introduced through high-contrast accent colors like vibrant orange (#ec6120) and soft blue (#007bff), primarily used for interactive surfaces and status indicators. The interface relies on a mix of sharp 0px corners for structural containers and generous 30px-50px radii for interactive pills and cards, creating a balance between industrial software utility and modern accessibility.

## Signature DNA
1. **The Deep Navy Anchor** (#0d1b45 is used extensively for primary text and high-contrast cards, providing a more sophisticated alternative to pure black for information-heavy sections).
2. **Geometric Hybridity** (The system intentionally mixes 0px "sharp" corners for layout sections with 50px "full" rounded pills for primary actions and 10px radii for feature cards).
3. **Galano Type Hierarchy** (The consistent use of Galano-Med for headings at 28px and Galano-Reg for body at 16px creates a distinct, clean-lined geometric sans-serif identity).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, primary surface, button text | 51 | 1.0 | `css_variable:--white` |
| `{color.navy}` | `#0d1b45` | Primary text, heading emphasis | 21 | 0.8 | `computed_style` |
| `{color.dark-gray}` | `#212529` | Default body text | 46 | 0.8 | `computed_style` |
| `{color.charcoal}` | `#1e1c24` | Secondary text | 20 | 0.8 | `computed_style` |
| `{color.border-light}` | `#e8ecf5` | Card borders, subtle dividers | 21 | 0.8 | `computed_style` |
| `{color.black}` | `#000000` | Button text, high-contrast labels | 4 | 0.6 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary-blue}` | `#007bff` | Links, primary accents | 4 | 1.0 | `css_variable:--primary` |
| `{color.orange-vibrant}` | `#ec6120` | Primary CTA backgrounds, active states | 3 | 0.6 | `computed_style` |
| `{color.orange-soft}` | `#e8846b` | Secondary surface backgrounds | 4 | 0.6 | `computed_style` |
| `{color.blue-muted}` | `#48657f` | De-emphasized text | 6 | 0.6 | `computed_style` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| galano-reg | 400, 500, 700 | Body, UI Labels | Montserrat | Proprietary |
| galano-med | 400, 600 | Headings | Montserrat Medium | Proprietary |
| galano-bold | 400, 700 | Display Headings | Montserrat Bold | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h3}` | 28px | 39.2px | normal | 600 | Section Headings | `h3.mt-3.mb-2` |
| `{type.body-lg}` | 16px | 24px | normal | 400 | Header Navigation | `header.header_area` |
| `{type.body-md}` | 16px | 24px | normal | 500 | Card Content | `div.trade-card` |
| `{type.body-spaced}` | 16px | 30px | 0.5px | 500 | Narrative Paragraphs | `p` |
| `{type.body-sm}` | 15px | 22.5px | normal | 400 | Inline Links | `a` |
| `{type.label-sm}` | 15px | 15px | 0.5px | 500 | Compact Labels | `p.my-0` |
| `{type.nav-link}` | 14px | 21px | normal | 400 | Navigation Links | `a.nav-link` |
| `{type.caption}` | 13px | 30px | 0.5px | 500 | Small Body Text | `p` |

### Principles
1. **Geometric Sans Dominance**: No serifs are used; brand authority is established through varied weights of the Galano family.
2. **Generous Line Heights**: Body text at 16px uses a 30px line height (1.875x) for maximum readability in technical contexts.
3. **Tracking for Small Caps**: Smaller labels (13px-15px) frequently use 0.5px letter spacing to maintain legibility.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 3 |
| `{space.sm}` | 12px | 7 |
| `{space.md}` | 16px | 20 |
| `{space.lg}` | 20px | 10 |
| `{space.xl}` | 48px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Main layout containers, section bands | 79 occurrences |
| `{radius.md}` | 10px | Feature cards, trade cards | 21 occurrences |
| `{radius.lg}` | 30px | Secondary buttons, ghost buttons | 13 occurrences |
| `{radius.full}` | 50px | Primary CTA pills | 16 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.06) 0px 3px 8px 0px` | Standard Feature Cards | 21 occurrences |
| `{shadow.medium}` | `rgba(0, 0, 0, 0.5) 0px 4px 10px 0px` | Hover states / Overlays | 12 occurrences |
| `{shadow.heavy}` | `rgba(0, 0, 0, 0.1) 0px 10px 30px 0px` | Floating Cards / Promos | 6 occurrences |

## Components

### Tier 1: Foundational

#### Primary CTA Pill
**Role:** Main action trigger (e.g., "Visit EnggOnline")
**Pages observed:** 2
**Spec:** Background: `{color.orange-vibrant}` (#ec6120) | Text: `{color.white}` (#ffffff) | Radius: 50px | Padding: 15px 20px | Typography: `{type.nav-link}`
**States observed:** Default | Hover: captured

#### Ghost Pill Button
**Role:** Secondary actions
**Pages observed:** 2
**Spec:** Background: transparent | Text: `{color.orange-vibrant}` (#ec6120) | Border: 1px `{color.orange-vibrant}` | Radius: 30px | Padding: 15px 20px

### Tier 2: Patterns

#### Trade Card
**Role:** Displaying technical categories or modules
**Pages observed:** 2
**Spec:** Background: `{color.white}` (#ffffff) | Text: `{color.navy}` (#0d1b45) | Border: 1px `{color.border-light}` (#e8ecf5) | Radius: 10px | Shadow: `{shadow.subtle}`

#### Navigation Bar
**Role:** Global site header
**Pages observed:** 3
**Spec:** Background: `{color.white}` (#ffffff) | Text: `{color.dark-gray}` (#212529) | Height: ~80px | Typography: `{type.nav-link}`

### Tier 3: Surface-specific

#### Feature Promo Card
**Role:** High-visibility product highlights
**Pages observed:** 2
**Spec:** Background: `rgba(255, 255, 255, 0.3)` | Border: 1px `#dddddd` | Radius: 30px | Shadow: `{shadow.heavy}`

#### Client Logo Grid
**Role:** Social proof section
**Pages observed:** 2
**Spec:** Background: `{color.white}` (#ffffff) | Alignment: Centered | Gap: `{space.xl}` (48px)

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1140px |
| Section Padding | 80px - 100px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | <768px | Navigation collapses to hamburger; padding reduced to 15px |
| Desktop | 1440px | Standard 12-column grid layout |

## Imagery & decoration
Feastsoftware uses high-fidelity 3D renders and VR-related photography to signal technical sophistication. Decorative elements include subtle radial line patterns (concentric circles) used as background watermarks behind text sections.

## Do's
- Use `{color.navy}` (#0d1b45) for primary headings to maintain brand depth.
- Apply `{radius.full}` (50px) to all primary "Visit" or "Action" buttons.
- Ensure 30px line height on long-form body copy for readability.
- Use `{shadow.subtle}` for cards sitting on white backgrounds.
- Maintain sharp `{radius.sharp}` (0px) for full-width section backgrounds.

## Don'ts
- **Wrong:** Using `#007bff` (Sub-brand Blue) as the primary background for parent brand sections. **Right:** Use `#ffffff` or `#0d1b45`. **Reason:** Blue is an accent/sub-brand signal, not a foundational surface.
- Do not use border radii between 1px and 9px; stick to the 10px/30px/50px scale.
- Avoid using pure black (#000000) for body text; use `{color.dark-gray}` (#212529).
- Do not center-align H3 headings if they are followed by left-aligned body text.

## Quick start

```css
/* CSS Variables */
:root {
  --fs-navy: #0d1b45;
  --fs-orange: #ec6120;
  --fs-white: #ffffff;
  --fs-border: #e8ecf5;
  --fs-shadow-subtle: 0 3px 8px rgba(0, 0, 0, 0.06);
  --fs-radius-pill: 50px;
}
```

```json
{
  "tokens": {
    "colors": {
      "primary": "#0d1b45",
      "accent": "#ec6120",
      "surface": "#ffffff"
    },
    "spacing": {
      "base": "16px",
      "lg": "20px"
    }
  }
}
```

## Agent prompt examples
- "Create a feature card using #ffffff background, a 1px border of #e8ecf5, and a 10px border radius with a subtle 0 3px 8px shadow."
- "Generate a primary CTA button with a #ec6120 background, white text, and a 50px pill radius."
- "Design a section header using Galano-Med at 28px with a line height of 39.2px in color #0d1b45."

## Known gaps
- Hover states for tertiary navigation items were not fully captured.
- Specific mobile breakpoint transitions for the 3D render assets are not documented.
- Dark mode variables are not present in the current evidence.

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