# skale.solutions — Design System

## 1. Visual Theme & Atmosphere

Skale.solutions presents as a bold, no-nonsense digital agency. Against a near-white canvas (`#f9f9f9`), it delivers its message with minimal decoration — then punctuates with a single aggressive accent: a vibrant tomato red. The overall atmosphere is functional and purposeful, suggesting a team that solves problems rather than decorates portfolios. Built in Framer, it carries a certain raw directness — the monospaced body type doubles down on the technical, systematic character.

## 2. Color Palette & Roles

| Role | Value | Usage |
|---|---|---|
| Canvas | `rgb(249,249,249)` | Page background — slightly warm off-white |
| White surface | `rgb(255,255,255)` | Raised panels and cards |
| Secondary surface | `rgb(242,242,242)` | Button/link default backgrounds |
| Red accent | `rgb(228,52,32)` | Signature CTA, brand marker |
| Red hover | `rgb(213,49,30)` | Hover state on primary CTA |
| Dark CTA | `rgb(5,5,5)` | "Book a call" button — near-black default |
| Dark hover text | `rgb(93,93,93)` | Link hover background shift |

Red is used precisely — for the primary action. Everything else is neutral grays. This restraint makes the red hit harder.

## 3. Typography Rules

The distinctive choice here is **Roboto Mono** for paragraph text — a monospaced font signals technical precision and sets an unconventional tone. Body copy at 12px / 14.4px line-height with −0.48px tracking feels dense and data-like.

- `p`: Roboto Mono, 12px, weight 500, −0.48px tracking
- `body/a`: system sans-serif at 12px (fallback)
- No heading typefaces explicitly captured — headings likely share the mono stack

The mono font is the primary personality signal of this site.

## 4. Component Stylings

Buttons and links use 4px border radius — the only radius value found, giving CTAs a subtle but not-too-round feel. The "See portfolio" CTA starts at `rgb(242,242,242)` and shifts to dark gray `rgb(93,93,93)` on hover. The primary "Book a call" CTA inverts dramatically: near-black default to vivid red on hover — a high-impact, high-contrast transition.

## 5. Layout Principles

No explicit grid system captured, but Framer's layout engine handles composition. The minimal spacing data suggests a dense, above-the-fold design with content concentrated rather than spread. No section gaps defined — the layout relies on Framer's visual stacking.

## 6. Depth & Elevation

No shadows detected. No elevation system. This is deliberately flat — the red accent carries all the visual weight when needed. The distinction between surfaces (white vs. off-white) creates a very subtle layer without shadow.

## 7. Do's and Don'ts

**Do:** Use Roboto Mono for body text to maintain the technical personality. Reserve red exclusively for the single most important CTA. Use flat, shadow-free layouts with clean white and near-white surfaces.

**Don't:** Add multiple accent colors — the whole system rests on one red. Don't round corners heavily; 4px is the ceiling. Don't use regular (non-mono) text for body copy — it breaks the character.

## 8. Responsive Behavior

Breakpoints at 820, 1200, 1440, and 1920px — a standard four-tier Framer layout. Mobile-first adaptation expected at 820px with single-column stacking.

## 9. Agent Prompt Guide

> "Design in the style of skale.solutions: near-white canvas, Roboto Mono body text at weight 500, a single tomato-red accent used only on the primary CTA, near-black secondary action button with red hover, no shadows, flat surfaces, 4px border radius, direct and agency-confident."

*Generated by Sparkbites — extracted from live CSS analysis*