Effortel

Overview

Effortel is a B2B SaaS platform serving telecom infrastructure providers (MVNE/MVNO operators) who need to accelerate revenue growth through sophisticated yet intuitive business support systems. The design system embodies 'Technical Minimalism'—a philosophy that strips away unnecessary ornamentation while preserving the precision and clarity required by enterprise users managing complex telecom operations. The aesthetic combines a cool, professional dark palette (surface #22282a, on-surface #d5e1e7) with vibrant cyan accents (#66e8fa primary, #3898ec inverse-primary) that signal interactivity and forward momentum. The UI evokes confidence and control: users feel they are operating a powerful, well-engineered system, not a generic dashboard.

The brand voice is direct, authoritative, and outcome-focused. Effortel speaks in the language of business impact—'Skyrocket Revenue,' 'Streamline Operations,' 'Delight Customers'—without hyperbole or marketing fluff. Vocabulary favors concrete nouns (BSS, OSS, MVNO, eSIM, IoT enablement) over abstract adjectives. Tone is calm and assured, never breathless. Example sentence in brand voice: 'Launch your MVNO in weeks, not months—our platform handles provisioning, billing, and customer self-service from day one.'

Colors

The color system is anchored in a dark, professional foundation that reduces cognitive load during long work sessions. Surface colors progress from #171818 (surface-dim, used for recessed backgrounds) through #22282a (surface, the primary canvas) to #5f6f77 (surface-container-highest, for elevated UI layers). On-surface text is #d5e1e7 (light blue-grey), providing 11.2:1 contrast ratio for WCAG AAA compliance. The on-surface-variant color #92a6b0 (a muted blue-grey) is used for secondary text, helper text, and disabled states, maintaining visual hierarchy without introducing competing hues.

Primary accent #66e8fa (a bright, saturated cyan) is reserved exclusively for call-to-action buttons, active navigation states, focus indicators, and key interactive elements. This color appears in the

Typography

The typography system uses Satoshi Variable as the sole typeface family, a modern geometric sans-serif that conveys both technical precision and approachability. The type scale is built on a 1.4x multiplier: display (58px, 800 weight) for hero headlines, headline-lg (40px, 700) for section titles, headline-md (28px, 700) for subsections, and body-md (16px, 400) for body copy. Letter-spacing is tightened on display and headline levels (-0.02em to -0.01em) to create visual density and authority, while body copy uses +0.01em spacing to improve readability at smaller sizes. All headline text uses 700–800 font-weight to command attention; body copy defaults to 400 weight for neutral tone. Labels and UI text use 600 weight with +0.05em to +0.08em letter-spacing, creating a crisp, technical appea

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining consistent horizontal rhythm across desktop, tablet, and mobile breakpoints. The gutter width is 24px (md spacing), creating breathing room between grid columns without excessive whitespace. Container padding follows the spacing scale: 40px (lg) on desktop, 24px (md) on tablet, and 12px (sm) on mobile, ensuring content never touches the viewport edge. Sections are separated by 64px (xl spacing) vertically, creating a clear visual rhythm that guides users through the page. The hero section uses full-width background imagery with centered content constrained to the 1280px container, allowing the dark background (#22282a) to extend edge-to-edge while keeping text readable. Cards and modals use 24px internal paddin

Elevation & Depth

Depth is achieved through a restrained shadow system that avoids the heavy, diffuse shadows common in older design systems. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.12)) for subtle UI elements like disabled buttons and secondary cards; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, dropdowns, and modals; lg (0 8px 24px rgba(0, 0, 0, 0.2)) for floating elements like tooltips and elevated modals. Shadows are always pure black with alpha transparency, never tinted, to maintain visual consistency across color modes. Interactive elements (buttons, inputs) do not

Shapes

The shape system follows 'Technical Precision'—rounded corners are used strategically to soften hard edges without introducing organic, playful curves. Buttons use 1rem (16px) border-radius, creating a modern, approachable appearance while maintaining a geometric aesthetic. Cards and containers use 1.5rem (24px) border-radius for a slightly softer, more inviting feel. Input fields and smaller UI elements use 0.5rem (8px) border-radius, preserving a technical, grid-aligned appearance. The full-radius token (9999px) is reserved for badges and pill-shaped elements (e.g., status indicators, tags).

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use background {colors.primary} (#66e8fa) with text color {colors.on-primary} (#0f3d4a), 1px border in primary color, 12px horizontal padding, and 48px height. On hover, the background transitions to {colors.primary-fixed-dim} (#97d1ef) with a 0.25s ease-in-out transition. Secondary buttons use transparent background with 1px border in {colors.outline} (#5f6f77) and text color {colors.on-surface} (#d5e1e7). On hover, the background becomes {colors.surface-container-high} (#394247) and the border shifts to {colors.primary} (#66e8fa), creating a visual 'activation' effect. Both button variants use {typography.label-md} (14px, 600 weight, 0.05em letter-spacing) for crisp, scannable text. Focus states apply a 3p

Do's and Don'ts

**Do**

• Do use {colors.primary} (#66e8fa) exclusively for CTAs and active states—never use it for passive UI elements or backgrounds.
• Do apply 24px (md spacing) as the default margin between sections; use 40px (lg) only for major section breaks.
• Do maintain the 12-column grid and 1280px max-width on desktop; never allow content to exceed this width.
• Do use Satoshi Variable at 700–800 weight for all headlines; never use lighter weights for headings.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and dropdowns; reserve {elevation.lg} for modals and floating elements only.
• Do use 0.25s ease-in-out for all interactive transitions (button hover, focus states, dropdown animations).
• Do ensure all text meets WCAG AAA contrast ratios: on-surface (#d5e1e7) on surface (#22282a) = 11.2:1.

**Don't**

• Don't use colors outside the defined palette—no custom hex values or RGB values not in the token system.
• Don't apply shadows to buttons; use border and background color changes for state feedback instead.
• Don't use border-radius values smaller than 0.35rem (sm) or larger than 1.5rem (xl) outside the defined scale.
• Don't mix typefaces; Satoshi Variable is the only approved font family for all UI text.
• Don't apply letter-spacing greater than 0.1em on body copy; tighter spacing (-0.02em) is reserved for display text only.
• Don't use the primary accent color (#66e8fa) for more than 15% of the visible UI; it should feel special and actionable.
• Don't create custom color modes; use only the three predefined modes: dark (default), grey, and blue via [color-mode] attribute.