# Techware.com.br Design System

> High-contrast enterprise HR tech anchored by deep burgundy surfaces and high-voltage amber actions.

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

## TL;DR
Techware.com.br utilizes a "monochrome-plus-accent" system where a deep burgundy (#691d33) serves as the primary brand anchor for surfaces and headings. This is contrasted against a clean white (#ffffff) foundation and punctuated by a high-visibility amber (#fb9508) used exclusively for primary conversion points. Typography is strictly Montserrat for all brand-heavy moments, utilizing a bold 700 weight for display and 500 for UI labels. The layout relies on generous vertical spacing and rounded geometry (6px for buttons, 20px-50px for panels) to soften the corporate HR aesthetic.

## Signature DNA
1. **The Burgundy Anchor** (#691d33): Used as the primary canvas for hero sections and footer backgrounds, creating a high-authority "enterprise" frame for content.
2. **Amber Conversion** (#fb9508): A strict functional color reserved for primary CTAs ("Orçamento", "Ver todos os Cases"), ensuring action points never compete with brand colors.
3. **Montserrat Bold Display**: Headlines are consistently set in Montserrat 700 with significant scale (up to 74px), creating a typographic hierarchy that dominates the white space.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, button text on dark | 53 | 1.0 | Computed Style |
| `{color.dark-grey}` | `#333333` | Primary body text | 90 | 0.8 | Computed Style |
| `{color.slate}` | `#6e7273` | Secondary text, subtle backgrounds | 22 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#691d33` | Brand anchor, hero backgrounds, headings | 78 | 0.8 | Computed Style |
| `{color.action}` | `#fb9508` | Primary CTA background | 9 | 0.6 | Computed Style |
| `{color.magenta}` | `#cc3366` | Decorative text, sub-brand accents | 24 | 0.8 | Computed Style |
| `{color.muted-blue}` | `#69727d` | Deemphasized text labels | 9 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 400, 500, 700 | Headings, UI, Buttons | Montserrat (Google Fonts) | OFL |
| -apple-system | 400 | Body copy, Navigation | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-xl}` | 74px | 81.4px | normal | 700 | Hero H1 | `h1.elementor-heading-title` |
| `{type.display-lg}` | 40px | 40px | normal | 700 | Counter numbers | `span.elementor-counter-number` |
| `{type.heading-lg}` | 32px | 32px | normal | 700 | Section titles | `h2.elementor-heading-title` |
| `{type.heading-md}` | 28px | 28px | normal | 700 | Counter prefixes | `span.elementor-counter-number-prefix` |
| `{type.subheading}` | 18px | 21.6px | normal | 700 | Post/Card titles | `h3.elementor-post__title` |
| `{type.ui-md}` | 17px | 17px | normal | 700 | Primary button text | `a.elementor-button` |
| `{type.body-md}` | 16px | 24px | normal | 500 | Running text | `p` |
| `{type.nav-link}` | 14px | 20px | normal | 500 | Main navigation | `a.elementor-item` |

### Principles
- **Montserrat for Authority**: All numerical data and headings must use Montserrat 700.
- **Tight Line Heights**: Display sizes use a 1.1x line height to maintain typographic density.
- **UI Medium Weight**: Buttons and navigation items use 500-700 weight to ensure legibility against saturated backgrounds.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 10px | 75 |
| `{space.md}` | 20px | 21 |
| `{space.lg}` | 30px | 5 |
| `{space.section}` | 193px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default sections | 224 occurrences |
| `{radius.sm}` | 6px | Buttons, Inputs | `a.elementor-button` |
| `{radius.lg}` | 20px | Content cards | `Surface component` |
| `{radius.full}` | 50px | Decorative panels | `Card component` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.soft}` | `rgba(0, 0, 0, 0.13) 0px 0px 10px 5px` | Floating surfaces | Surface component |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main conversion actions
**Pages observed:** All
**Spec:** Background `{color.action}` (#fb9508) | Text `{color.white}` (#ffffff) | Radius 6px | Padding 12px 24px | Typography `{type.ui-md}`
**States observed:** Default | Hover: captured

#### Navigation
**Role:** Global header menu
**Pages observed:** All
**Spec:** Background transparent | Text `{color.dark-grey}` (#333333) | Radius 0px | Typography `{type.nav-link}` (14px/500)
**States observed:** Default | Active: captured

### Tier 2: Patterns

#### Content Card
**Role:** Case studies and blog previews
**Pages observed:** All
**Spec:** Background `{color.primary}` (#691d33) | Text `{color.white}` (#ffffff) | Radius 30px | Padding 30px
**States observed:** Default | Hover: not captured

#### Counter Block
**Role:** Social proof metrics
**Pages observed:** Home, About
**Spec:** Text `{color.primary}` (#691d33) | Number Size 40px/700 | Label Size 16px/500
**States observed:** Default

### Tier 3: Surface-specific

#### Footer Surface
**Role:** Global site closure
**Pages observed:** All
**Spec:** Background `{color.primary}` (#691d33) | Text `{color.white}` (#ffffff) | Radius 0px | Shadow `{shadow.soft}`
**States observed:** Default

#### Newsletter Band
**Role:** Lead generation
**Pages observed:** Home
**Spec:** Background `{color.action}` (#fb9508) | Text `{color.white}` (#ffffff) | Padding 40px vertical
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1140px |
| Section Gutter | 20px |
| Vertical Rhythm | 193px (Major sections) |

## Imagery & decoration
- **Human-Centric Photography**: Large hero images featuring professionals interacting with technology.
- **Burgundy Overlays**: Used on cards and secondary hero sections to maintain brand presence.
- **Avoids**: Flat illustrations or heavy use of icons without text labels.

## Do's
- Use `#fb9508` for the "Orçamento" (Quote) button only.
- Set all section headers in Montserrat 700.
- Maintain a 6px border radius on all form inputs and buttons.
- Use `#691d33` for large background blocks to anchor white text.
- Ensure 193px vertical spacing between major homepage sections.

## Don'ts
- **Wrong:** Using `#cc3366` (Magenta) for primary buttons. **Right:** Use `#fb9508` (Amber). **Reason:** Magenta is decorative; Amber is the functional action color.
- **Wrong:** Setting body copy in Montserrat. **Right:** Use `-apple-system` or Inter. **Reason:** Montserrat is reserved for headings and UI labels.
- Do not use shadows on primary buttons; keep them flat with 6px radius.
- Do not use burgundy text on dark backgrounds; always use white (#ffffff).

## Similar brands
- ADP (Enterprise HR feel)
- Oracle (Corporate burgundy/red palettes)
- SAP (High-contrast enterprise UI)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --techware-primary: #691d33;
  --techware-action: #fb9508;
  --techware-white: #ffffff;
  --techware-text: #333333;
  --techware-radius-btn: 6px;
  --techware-font-display: 'Montserrat', sans-serif;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Techware Amber #fb9508 with 6px rounded corners and Montserrat 700 text."
- "Create a section header using Techware Burgundy #691d33 at 32px Montserrat Bold."
- "Design a content card with a #691d33 background and 30px border radius."

## Known gaps
- Hover and Active states for secondary navigation items were not fully captured in the computed style logs.
- Mobile-specific breakpoint transitions for the 74px display type were not explicitly tokenized.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://techware.com.br | 1440px | 2026-06-06 |
| Pricing | https://techware.com.br/pricing | 1440px | 2026-06-06 |
| About | https://techware.com.br/about | 390px | 2026-06-06 |