Visual system
Colors
Brand palette, themes, accents and states. Tokens, contrast, RGB/CMYK and ready-to-use files.
Colour library
Loading palette…
Roles rather than arbitrary shades
The SkiMobile palette is built around deep navy #0A1B3D, mountain blue #6DB9E5 and white #FFFFFF. Navy provides structure, white provides space and blue highlights the key element. An advertising layout starts with 70% neutral space, 20% navy and 10% accent; message hierarchy matters more than literal area calculations.
The logo retains its own colours: #007DC4, #E31E24, #2B2A29 and white. Use full-colour and monochrome masters from the logo library. User themes and accents change the interface while preserving the symbol and printed identity.
Light and dark themes
A component keeps the same semantic role in both themes. Surfaces: --background, --surface, --muted and --popover. Text: --foreground, --muted-foreground and --popover-foreground. Buttons use paired background and label tokens: --accent / --accent-foreground or --primary / --primary-foreground.
Sky blue is the default interface accent: #0072AB in light mode and #70C8F3 in dark mode. Settings also offer teal, violet, green and amber. High contrast strengthens text and boundaries and darkens light-mode accents. System theme follows the device. All 20 combinations use legible text and button pairs.
The library follows website settings and shows actual CSS values. Use specimen theme, contrast and accent controls to inspect another mode. The selection is encoded in the link without changing guest preferences. Full CSS includes all modes; mode CSS includes the selected combination.
Action colour and status colour
--accent identifies the selected action and active navigation. --info marks useful information, --success a completed action and --warning a restriction or need for attention. These states retain their meaning when the accent changes: a green theme does not turn a warning green.
Red --destructive is reserved for errors, critical messages and consequential actions: #C52228 in light mode and #FF747B in dark mode. Use the accent for ordinary promotions, discounts, active tabs or counters. Red within the logo remains part of the symbol’s identity.
Status always includes text and a recognisable icon. Errors identify the problem and next step; warnings explain the restriction. An unavailable action uses --disabled / --disabled-foreground and a real disabled state. Colour never carries meaning alone.
Legibility, boundaries and focus
- W3C · text contrast, WCAG 2.2Reviewed
- W3C · non-text contrastReviewed
Body text needs at least 4.5:1. Large text of at least 24 px, or 18.67 px when bold, needs 3:1. Meaningful icons, field boundaries and custom focus indicators need at least 3:1 against adjacent surfaces. AAA body text needs 7:1. Eligibility is evaluated before rounding.
--border separates cards and decorative regions; it does not replace an identifiable field boundary. Use --control-border for that boundary and --ring for focus. Offset focus from the element so a button’s fill does not absorb its outline. Check adjacent surfaces, transparency and actual component state.
Do not use #6DB9E5 as body text on white or reduce readable text with opacity. Give text on photographs a solid backing. High contrast and system forced colours retain labels, states and focus. Palette checks verify colour combinations; product accessibility is audited separately.
Screen and production
Use sRGB for screens: HEX, RGB, CSS, JSON and RGB ASE. The SVG sheet and PDF guide help check a layout. CMYK ASE includes seven named process recipes, consistent with existing CMYK logo masters. These numbers describe DeviceCMYK; the printer’s profile is applied when preparing the run.
Specify substrate, application method, profile and printer requirements before production. Proof on the final material and compare blue, red and navy under consistent lighting. Do not relabel process recipes as Pantone or the guide as PDF/X.
White 0 / 0 / 0 / 0 means no ink on white stock. Dark substrates, embossing, embroidery and separate white ink use a single-colour vector master and a dedicated production specification. Print small lettering in one ink; do not build small black text from four process inks.
Files and implementation
- Design Tokens · format 2025.10Reviewed
Developers import full CSS and use semantic variables. Designers import RGB ASE or JSON tokens; print layouts use CMYK ASE. The vector palette sheet does not replace a logo master. The kit includes sources, RU/EN PDFs and instructions; each file has a version, size and SHA-256.
JSON uses the Design Tokens 2025.10 format: color type, srgb colour space, components from 0–1 and alpha. Identity colours are in identity, interface modes in modes. Edit shared/colors, then run colors:generate and colors:check; website CSS and the library update together.
Colour across applications
Colour logos retain their palette; Mobi and physical applications use fixed navy, sky blue and white. Five user accents change the interface, including action icons, while leaving the original logo and mascot unchanged.
Application SVGs use screen RGB. Production preparation sets the CMYK profile and paper treatment using a colour proof. Do not describe an automatic RGB conversion as a universal print standard.