Suunnittelujärjestelmä
Coby illustrations
26 assets · PNG
Väripaletti
Napsauta väriä kopioidaksesi.
Purple – primary color
Primary brand color for call-to-action buttons and interactive elements
50
#F7F3FF
purple-50
100
#EBE0FF
purple-100
200
#D6C2FF
purple-200
300
#C2A3FF
purple-300
400
#AD85FF
purple-400
500
#9966FF
purple-500
600
#7A52CC
purple-600
700
#5C3D99
purple-700
800
#3D2966
purple-800
900
#1F1433
purple-900
Pink – secondary color
Secondary accent color for highlights and visual interest
50
#FFF2F6
pink-50
100
#FFDEEA
pink-100
200
#FFBDD5
pink-200
300
#FF9CC0
pink-300
400
#FF7AAB
pink-400
500
#FF5996
pink-500
600
#CC4778
pink-600
700
#99355A
pink-700
800
#66243C
pink-800
900
#33121E
pink-900
Deep blue – warm neutrals
Warm grey tones as the foundation of the design system
50
#FAF9F4
deep-blue-50
75
#F4F2EB
deep-blue-75
100
#EDEAE1
deep-blue-100
200
#E8E6DE
deep-blue-200
300
#D4D1C7
deep-blue-300
400
#A8A59B
deep-blue-400
500
#7C7970
deep-blue-500
600
#5C5950
deep-blue-600
700
#3D3B35
deep-blue-700
800
#2A2925
deep-blue-800
900
#1A1918
deep-blue-900
Taustat
Cream
#FAF9F4
bg-cream
Main page background
Cream dark
#F4F2EB
bg-deep-blue-75
Alternating section background
Cream footer
#E5E2D9
bg-cream-footer
Footer background
Laajennettu paletti
Ei vielä toteutettu Tailwind-luokkina.
Salvia
#7A9E75
Ruusu
#C97A8C
Sininen
#7088AA
Terrakotta
#B8907E
Sammal
#6B8B6B
Kaura
#D4C5B0
Laventeli
#9B8FA8
Koralli
#E8956F
Taivas
#A8C5DD
Tummat osiot
Otsikko tummassa osiossa
text-white
Leipäteksti tummassa osiossa.
text-deep-blue-300
border-deep-blue-800
Navbar-integraatio: data-dark-section -attribuutti vaihtaa navigointipalkin vaaleaan tilaan.
Typografia
Exposure otsikoille, ABC Oracle leipätekstille. Responsiivinen skaalaus.
Exposure – otsikot
EXPO-akseli: -100 ... +100 (negatiivinen = paksumpi, positiivinen = ohuempi)
ABC Oracle – leipäteksti
Typografia-asteikko
Display Heading
h1
clamp(2.25rem, 7vw, 5rem)
1.05
-20
Large Heading
h2
clamp(1.875rem, 4vw, 2.5rem)
1.15
-15
Medium Heading
h3
clamp(1.5rem, 3vw, 1.875rem)
1.25
-10
Section Heading
h4
1.25rem
1.3
-8
Subsection Heading
h5
1.125rem
1.4
-5
Small Heading
h6
1rem
1.2
-3
Lead paragraph text for introductions and emphasis
lead
1.125rem
1.7
400
Body text for main content and paragraphs
body
1rem
1.6
400
Small text for captions and supporting information
small
0.875rem
1.5
400
CAPTION TEXT
caption
0.75rem
1.4
600
Välit ja asettelu
Säiliöleveydet
max-w-7xlErittäin suuri (80rem / 1280px)max-w-6xlSuuri (72rem / 1152px) – oletusmax-w-5xlKeskikokoinen (64rem / 1024px)max-w-4xlPieni (56rem / 896px)max-w-2xlErittäin pieni (42rem / 672px)Osioiden täyte
py-12 md:py-24VAKIO48px mobiili → 96px työpöytä
py-16 md:py-2864px → 112px
Sisältörikkaat osiot
py-16 md:py-3264px → 128px
CTA-osiot ylimääräisellä hengitystilalla
Vaakasuora täyte
px-6 sm:px-8 lg:px-12Säiliön täyte (responsiivinen)
24px mobiili → 32px tabletti → 48px työpöytä
p-6 md:p-10Kortin täyte
24px mobiili → 40px työpöytä
Varjot
Lämpimät, hienovaraiset varjot, jotka luovat syvyyttä.
Base shadow
shadow-warm0 4px 6px -1px rgba(26, 25, 24, 0.08), 0 2px 4px -2px rgba(26, 25, 24, 0.04);
Large shadow
shadow-warm-lg0 10px 25px -5px rgba(26, 25, 24, 0.1), 0 8px 10px -6px rgba(26, 25, 24, 0.06);
Extra large shadow
shadow-warm-xl0 20px 40px -10px rgba(26, 25, 24, 0.12), 0 10px 20px -8px rgba(26, 25, 24, 0.08);
Komponentit
Painikkeet
Button
6 varianttia, 3 kokoa.
Primary
Secondary
Outline
Ghost
Primary Light
Outline Light
Animaatiot
Blob animation
animate-blobKesto: 20s
Slow rotation
animate-spin-slowKesto: 60s
Float
animate-floatKesto: 6s
Siirtymäfunktiot
transition-organic // cubic-bezier(0.16, 1, 0.3, 1)btn-scale // Hover: scale(1.03), Active: scale(0.98)