Design System v1.0
Brand Kit
The complete visual identity and design system for Intski. Colors, typography, components, and guidelines for building consistent ski resort experiences.
Color Palette
Our palette evokes the alpine atmosphere: sophisticated indigo for energy and elegance, deep navy for trust, and warm orange for calls to action. Click any swatch to copy the hex value.
Brand Colors
Primary
Indigo
#4F46E5
intski-primary
Dark
Navy
#0F172A
intski-dark
Light
Lavender
#EEF2FF
intski-light
Accent
Orange
#F97316
intski-accent
Surface
Snow White
#F8FAFC
intski-surface
Extended Palette
Indigo 500
#6366F1
Indigo 700
#4338CA
Indigo 900
#312E81
Slate 50
#F8FAFC
Slate 100
#F1F5F9
Slate 400
#94A3B8
Slate 500
#64748B
Slate 700
#334155
Color Usage
Primary Indigo
Used for primary actions, links, focus states, interactive elements, and the scrollbar. This is the hero color of the brand — sophisticated and bold.
Accent Orange
Reserved for badges, alerts, highlights, the penguin mascot details, and special promotional elements. Use sparingly for maximum impact.
Dark Navy
Used for headings, the header/footer, dark sections, and text. Provides contrast and establishes authority and trust.
Typography
Two carefully paired typefaces create hierarchy and readability. Plus Jakarta Sans commands attention in headings while Inter ensures comfortable reading for body text.
Plus Jakarta Sans
Display Font · font-display
Adventure
Where Snow
Section Heading
Card Title Style
Navigation Link
Inter
Body Font · font-sans
Bold body text for emphasis
Semibold used for labels and sub-headings
Regular body text for paragraphs and descriptions. This weight is the default for all running text across the site.
Medium small text for metadata, captions, and secondary information throughout the interface.
Extra small text used for helper text, timestamps, and fine print details.
Type Scale
| Element | Font | Weight | Size | Class |
|---|---|---|---|---|
| Hero Title | Plus Jakarta Sans | 800 | 5xl-8xl |
font-display font-extrabold text-5xl md:text-7xl lg:text-8xl |
| Page Title | Plus Jakarta Sans | 800 | 5xl-7xl |
font-display font-extrabold text-5xl md:text-7xl |
| Section Head | Plus Jakarta Sans | 800 | 3xl |
section-heading |
| Card Title | Plus Jakarta Sans | 700 | xl |
font-display font-bold text-xl |
| Nav Link | Plus Jakarta Sans | 600 | sm |
font-display font-semibold text-sm |
| Body | Inter | 400 | base |
font-sans text-base |
| Body Bold | Inter | 700 | lg |
font-sans font-bold text-lg |
| Small / Meta | Inter | 500 | sm |
font-sans font-medium text-sm |
| Extra Small | Inter | 400 | xs |
font-sans text-xs |
Logo & Mascot
Pingo the penguin is the heart of our brand. A playful yet professional mascot that represents the fun and adventure of skiing. The logo pairs with bold typography for a memorable mark.
Where Adventure Meets Snow
Logo + Tagline on Light
Where Adventure Meets Snow
Logo + Tagline on Dark
96 x 96
64 x 64
48 x 48
32 x 32
Icon Only - Size Variations
Intski
Intski
Logo + Text - Inline
Intski
Intski
Reversed Logo - Gradient Background / White Mono Version
Minimum Size
The logo should never appear smaller than 32px in height for digital or 12mm in print to maintain legibility.
Intski
Too small
Intski
Minimum (32px)
Clear Space
Maintain a minimum clear space equal to the height of the penguin's beak around the logo at all times.
Intski
Labels & Badges
Badges and labels provide context and status at a glance. From resort badges to country counts, each style serves a specific communicative purpose.
Resort Badges
Used on hero sections and card overlays. Always uppercase, xs size, bold weight with tracking-wider.
Count Badges
Used in the stats bar and hero badges. Number in brand color with display font, label in body font.
Tags & Pills
Used for resort highlight tags. Pill-shaped, neutral slate background, semibold text.
Popular Search Tags
Used in the hero search bar. Hover transitions to intski-light background with primary text color.
Glass Badges (Dark Backgrounds)
35 resorts across 8 countries
Mayrhofen
Austria
Resort Feature Icons
Hexagonal icons represent key resort features. Each feature has a distinct color and Lucide icon, rendered inside a filled hexagon SVG shape.
beer
snow
lift
cabin
ski
view
Icon Specification
0 0 100 100
Color Mapping
text-orange-400
text-sky-500
text-sky-600
text-amber-700
text-slate-700
text-emerald-500
General Icon Library (Lucide)
We use Lucide Icons (v0.344.0) throughout the interface. Icons are rendered at consistent sizes and always match the text weight of their context.
Spacing & Grid
A consistent spatial system ensures visual harmony across all layouts. Our grid is built on Tailwind's container system with responsive breakpoints.
Container Widths
sm
md
lg
xl
Container padding: 1.5rem (24px) on all sides. Center-aligned with mx-auto.
Grid Layouts
Country Cards: grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6
Features: grid-cols-1 md:grid-cols-3 gap-8
Footer: grid-cols-12 gap-12
Section Spacing
py-20 (80px)
mb-10 (40px)
gap-6 (24px)
px-6 (24px)
rounded-2xl (16px)
Card Styles
Cards are the primary content containers across the site. Two main card variants serve different content types: country overview cards and resort detail cards.
Country Card .card-country
Austria
12 Resorts
Height: h-80 (320px)
Border radius: rounded-3xl
Overlay: bg-black/30, hover to bg-black/50
Image: Full cover with scale transition on hover
Resort Card .card
Mayrhofen
Aspect: 4:3 image ratio
Border radius: rounded-2xl
Shadow: shadow-sm, hover to shadow-xl
Hover: -translate-y-1 lift effect
Card CSS Classes
.card
White background, rounded-2xl, shadow-sm, border, hover shadow-xl with -translate-y-1 lift.
.card-country
Relative positioning, h-80, rounded-3xl, overflow-hidden, cursor-pointer, shadow-lg.
.hero-overlay
Absolute inset-0 with gradient: from-black/80 via-black/20 to-transparent.
Photography & Imagery
Photography style guidelines ensure visual consistency across all resort imagery, hero sections, and promotional materials.
Mountain Landscapes
Wide-angle mountain and ski slope imagery. Preferred for hero sections and country cards. Natural lighting with vivid blues and whites.
Action Shots
Dynamic skiing and snowboarding photography. Motion blur is acceptable. Used for featured content and promotional sections.
Village & Atmosphere
Cozy village scenes, chalets, and apres-ski atmosphere. Warm tones for evening shots. Used for traditional charm features.
Dark Gradient Overlays
All hero and card images use dark gradient overlays to ensure text readability on top of imagery.
hero-overlay
from-black/80 via-black/20 to-transparent
Hero full
from-intski-dark/60 via-intski-dark/40 to-intski-dark/80
Card simple
bg-black/30, hover to bg-black/50
Aspect Ratios
Consistent aspect ratios across all image contexts ensure visual harmony in grid layouts.
Hero Images
intski-hero: 1920 x 1080
Resort Cards
intski-card: 800 x 600
Thumbnails
intski-thumbnail: 400 x 300
Do
- Use high-resolution mountain and ski imagery
- Apply dark gradient overlays for text readability
- Use object-cover to fill containers
- Include scale transitions on hover (scale-110)
- Prefer natural daylight photography
Don't
- Use low-resolution or pixelated images
- Place white text on images without overlays
- Distort aspect ratios or stretch images
- Use heavily filtered or oversaturated photos
- Mix photography styles within the same section
Build with Intski
Use these guidelines to maintain visual consistency across all Intski touchpoints. When in doubt, refer back to this brand kit.