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 trackingbody/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
