website_designs

Kid Science Design Reference

Kid Science is an aesthetic surrounding educational efforts to make science appealing to children through presenting the field as fun, accessible, and wonder-filled, using kooky characters, bright colors, highly stylized images, and doable experiments. It draws heavily from the visual language of 1990s and 2000s children’s educational television, science museums, and picture books. The design philosophy centers on transforming complex scientific concepts into approachable, exciting visual experiences – making microscopes feel like treasure hunts and chemistry sets feel like magic kits.

---

Visual Characteristics

Core Motifs and Patterns

• Bright block lettering – large, bold, chunky display type in vivid colors, often outlined, shadowed, or dimensionally extruded for maximum impact and child readability
• Kooky cartoon characters – exaggerated, friendly scientist figures in lab coats and safety goggles with oversized expressions and quirky personalities
• Personified organisms – animals, cells, and molecules given faces and personalities, “introducing themselves” to the viewer directly
• Dinosaurs and fossils – T-Rex, triceratops, and complete fossil skeletons displayed prominently as gateway subjects for young curiosity
• Butterfly and frog life cycles – transformation diagrams showing egg-to-adult metamorphosis with numbered stages and arrows
• Baking soda volcanoes – the quintessential DIY experiment icon; erupting paper-mache mountains with overflowing “lava” foam
• Chemistry sets with colorful liquids – beakers, flasks, and test tubes filled with bright green, purple, blue, and orange liquids, often bubbling
• Rocket ships and space imagery – cartoonish rockets with flame trails, planets with rings, star fields, and astronaut helmets
• Telescopes and microscopes – scientific instruments rendered in a friendly, slightly oversized cartoon style
• Geodes and mineral specimens – cross-sectioned rocks revealing sparkly crystal interiors
• Safety goggles and lab coats – the “uniform” of kid science, often oversized on child characters for comic effect
• Food science and rock candy – sugar crystals growing on strings, kitchen-based experiments bridging cooking and chemistry
• Roller coasters and racing – physics concepts visualized through exciting, kinetic subjects kids already love
• Picture books and educational materials – illustrated pages with callouts, labeled diagrams, and “Did you know?” sidebars
• Nature tours and field trips – outdoor exploration imagery with magnifying glasses, binoculars, and specimen jars
• Science museum interiors – interactive exhibit halls with large-scale models, touchable displays, and discovery stations

Design Principles

• Accessibility over accuracy – simplify complex concepts into bold, clear visuals; stylization is preferred over photorealism
• Curiosity and wonder – every design element should provoke a “Wow!” or “How does that work?” reaction
• Hands-on engagement – layouts should feel interactive and inviting, as if the viewer could reach in and participate
• Enthusiastic energy – nothing is subdued; colors are bright, type is bold, characters are animated with excitement
• Respect for the natural world – nature is presented as fascinating and worthy of study, not scary or clinical
• Direct address – content speaks directly to the child viewer with warmth and encouragement
• Organized chaos – designs are busy and packed with information but structured enough to navigate (grids of facts, numbered steps, labeled diagrams)
• Experiential learning – visual emphasis on doing, observing, and discovering rather than passive reading

---

Color Palette

Primary Scheme

Role	Colors
Primary / Science	Bright green, leaf green, lime
Secondary / Energy	Vivid orange, tangerine, amber
Tertiary / Earth	Warm brown, chocolate, tan
Accent / Water	Turquoise, teal, cyan
Background / Sky	Bright white, cream, light yellow
Highlight / Chemistry	Purple, magenta, hot pink (for “chemical” accents)
Alert / Volcano	Bright red, coral (sparingly, for explosive emphasis)

Detailed Palette

Color	Hex (suggested)	Usage
Science Green	#4CAF50, #66BB6A	Primary accent, nature sections, biology motifs
Lime Bright	#8BC34A, #CDDC39	Energetic highlights, slime/experiment imagery
Leaf Dark	#388E3C, #2E7D32	Deep foliage, headers on light backgrounds
Tangerine Orange	#FF9800, #FFA726	Secondary accent, call-to-action, dinosaur/energy
Amber Warm	#FFB300, #FFC107	Warm highlights, sunshine, achievement badges
Volcano Red	#F44336, #EF5350	Sparingly – volcanic eruptions, “hot” experiment accents
Earthy Brown	#795548, #8D6E63	Fossil/geology sections, natural texture, earth tones
Chocolate Dark	#5D4037, #4E342E	Text on light backgrounds, grounding dark accents
Tan Sand	#D7CCC8, #BCAAA4	Subtle backgrounds, fossil/dig-site areas
Turquoise	#00BCD4, #26C6DA	Water/ocean sections, chemistry, cool experiment accents
Teal Deep	#00897B, #00796B	Deeper water, microscope/biology accent
Sky Blue	#03A9F4, #29B6F6	Sky areas, space themes, trust/learning
Chemistry Purple	#9C27B0, #AB47BC	Chemical reactions, “magic” experiment moments
Lab Pink	#E91E63, #EC407A	Litmus/pH accents, biology highlights
Cream White	#FFFDE7, #FFF9C4	Light backgrounds, page canvas
Clean White	#FFFFFF, #FAFAFA	Card surfaces, lab-coat white areas
Chalkboard Dark	#263238, #37474F	Dark text, chalkboard-style backgrounds
Notebook Blue	#E3F2FD, #BBDEFB	Lined-paper backgrounds, subtle info sections

Suggested CSS Custom Properties

:root {
  /* Greens -- primary science palette */
  --kid-green: #4caf50;
  --kid-green-light: #66bb6a;
  --kid-green-bright: #8bc34a;
  --kid-lime: #cddc39;
  --kid-green-dark: #388e3c;

  /* Oranges -- energy and excitement */
  --kid-orange: #ff9800;
  --kid-orange-light: #ffa726;
  --kid-amber: #ffb300;
  --kid-yellow: #ffc107;

  /* Browns -- earth and fossils */
  --kid-brown: #795548;
  --kid-brown-dark: #5d4037;
  --kid-brown-deep: #4e342e;
  --kid-tan: #d7ccc8;
  --kid-sand: #bcaaa4;

  /* Cool accents -- water and chemistry */
  --kid-turquoise: #00bcd4;
  --kid-turquoise-light: #26c6da;
  --kid-teal: #00897b;
  --kid-sky: #03a9f4;
  --kid-sky-light: #29b6f6;
  --kid-purple: #9c27b0;
  --kid-pink: #e91e63;

  /* Warm accent */
  --kid-red: #f44336;
  --kid-coral: #ef5350;

  /* Neutrals */
  --kid-white: #ffffff;
  --kid-cream: #fffde7;
  --kid-cream-warm: #fff9c4;
  --kid-notebook: #e3f2fd;
  --kid-gray-light: #fafafa;
  --kid-gray: #eceff1;
  --kid-chalkboard: #263238;
  --kid-chalkboard-light: #37474f;

  /* Functional mappings */
  --kid-bg-primary: var(--kid-cream);
  --kid-bg-secondary: var(--kid-white);
  --kid-bg-accent: var(--kid-notebook);
  --kid-text-primary: var(--kid-chalkboard);
  --kid-text-secondary: var(--kid-brown-dark);
  --kid-accent-primary: var(--kid-green);
  --kid-accent-secondary: var(--kid-orange);
  --kid-accent-cool: var(--kid-turquoise);
  --kid-border: rgba(0, 0, 0, 0.1);
  --kid-shadow: rgba(0, 0, 0, 0.12);
  --kid-shadow-colored: rgba(76, 175, 80, 0.25);
}

Approaches

• High-saturation, high-contrast palette – colors are vivid and fully saturated for maximum visual impact and child engagement
• Green-orange dualism – green represents nature/biology/growth, orange represents energy/excitement/discovery; they are the dominant pair
• Brown as grounding neutral – instead of gray, brown anchors the palette with warmth and earthiness (fossils, soil, natural materials)
• White and cream backgrounds – clean, bright canvases that let the vivid accent colors pop without overwhelming
• Turquoise as the cool counterpoint – balances the warm green-orange-brown core with aquatic freshness
• Purple and pink for “chemistry magic” – reserved for chemical reaction moments, creating a sense of wonder and surprise
• No pastels – colors should be bold and confident, not muted or soft; the aesthetic favors full-strength hues

---

Typography

Typeface Characteristics

Kid Science typography is bold, chunky, playful, and highly legible, designed to be read easily by children and to convey excitement:

• Thick, block-style display type – headlines use extra-bold or black weights with visible stroke width
• Rounded or soft-cornered letterforms – friendly and approachable, never sharp or angular
• High x-height – letters are tall relative to their cap height, improving readability for young readers
• Wide letter-spacing in headlines – letters have room to breathe, making words easy to parse
• Tighter spacing in body text – comfortable, natural reading flow for longer explanations
• Mixed-case or all-caps headlines – all-caps for short exclamatory labels (“FUN FACT!”), mixed-case for longer titles
• Occasional hand-drawn or chalkboard styles – for “experiment notes” or “field journal” sections
• Color in type – headlines frequently use colored text or multi-colored letters, not just black or white
• Outline and shadow effects – letters may have colored outlines, drop shadows, or 3D extrusion for dimensionality

Recommended Web Fonts (Google Fonts)

Font	Style	Usage
Fredoka	Rounded, bold, playful	Primary headlines – the quintessential kid-science display font, chunky and friendly
Baloo 2	Rounded, thick, bubbly	Headlines, section titles – warm and inviting with excellent bold weights
Nunito	Rounded, humanist	Secondary headlines, subheadings – slightly more restrained but still rounded and warm
Quicksand	Rounded, geometric	Labels, captions, UI elements – clean and readable with playful softness
Patrick Hand	Handwritten, casual	“Experiment notes,” journal entries, annotations – authentic hand-drawn feel
Comic Neue	Comic-style, clean	Body text alternative, speech bubbles, character dialogue – fun without being Comic Sans
Lexend	High readability, designed for reading ease	Body text – specifically optimized for reading comfort and accessibility
Nunito Sans	Clean, rounded humanist sans	Body text, paragraphs – legible and warm for longer content
Bangers	Bold, comic-book block	Impact headlines, “POW!” labels, experiment titles – maximum energy and excitement
Permanent Marker	Marker-drawn, bold	Chalkboard headers, “written by kids” feel, informal labels
Boogaloo	Retro, rounded, fun	Display text, decorative headlines – groovy and attention-grabbing
Bubblegum Sans	Bubbly, informal	Playful labels, fun fact callouts – light and whimsical

Pairing recommendation: Use Fredoka or Baloo 2 for headlines with Nunito Sans or Lexend for body text. Add Patrick Hand for handwritten annotation elements.

Typography CSS Example

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Baloo+2:wght@400;500;600;700;800&family=Nunito+Sans:wght@400;600;700&family=Patrick+Hand&family=Bangers&family=Lexend:wght@300;400;500;600&display=swap');

/* Headlines -- big, bold, colorful */
h1, h2, h3 {
  font-family: 'Fredoka', 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--kid-chalkboard);
  line-height: 1.2;
}

/* Hero / Display text -- maximum impact */
.kid-display {
  font-family: 'Fredoka', 'Baloo 2', sans-serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: var(--kid-white);
  text-shadow:
    3px 3px 0 var(--kid-green-dark),
    0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Colored block text -- for section headers */
.kid-block-text {
  font-family: 'Fredoka', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--kid-orange);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

/* Body text -- clear and readable */
body {
  font-family: 'Nunito Sans', 'Lexend', sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  line-height: 1.7;
  color: var(--kid-text-secondary);
  -webkit-font-smoothing: antialiased;
}

/* Experiment notes / handwritten */
.kid-handwritten {
  font-family: 'Patrick Hand', cursive;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--kid-chalkboard-light);
  transform: rotate(-0.5deg);
}

/* Impact labels ("FUN FACT!", "DID YOU KNOW?") */
.kid-impact-label {
  font-family: 'Bangers', 'Fredoka', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kid-red);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

/* Captions and small labels */
.kid-caption {
  font-family: 'Quicksand', 'Nunito Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--kid-brown);
}

---

Layout Principles

Grid and Structure

• Bright, clean backgrounds – white or cream canvases with subtle textures (notebook lines, graph paper, chalkboard) that evoke educational environments
• Packed but organized layouts – content-dense like a science poster or museum exhibit panel, but structured with clear visual hierarchy
• Bold, rounded containers – cards and panels with generous border-radius (12-20px), thick colored borders, and slight shadows
• Grid-based fact layouts – 2x2 or 3-column grids of “fact cards” or “specimen cards,” each with an icon, title, and short description
• Generous padding inside elements – content within cards and panels breathes, even if the overall page is busy
• Numbered step sequences – experimental procedures laid out as numbered steps with large circled numbers
• Sidebar callouts and “Did You Know?” boxes – floating info panels with colored backgrounds that break out of the main content flow
• Full-width color-band sections – sections separated by bold colored bands (green, orange, turquoise) rather than subtle gradients

Section Organization

• Use bold colored dividers between sections – thick horizontal bars or zigzag/wave-cut edges in accent colors
• Apply experiment card containers – white or cream cards with thick colored left borders or top borders for categorization
• Create hierarchy through color and weight – the most important element gets the boldest color and heaviest type
• Employ icon-led content blocks – each section or fact begins with a large, colorful icon (beaker, dinosaur, rocket, magnifying glass)
• Use step-by-step experiment layouts – numbered sequences with large step indicators, clear ingredient/material lists, and expected-result callouts
• Add interactive-feeling elements – tabs, flip-card metaphors, “pull here” labels, magnifying glass zoom areas
• Group content in topic clusters – biology (green), chemistry (purple/turquoise), physics (orange), earth science (brown), space (blue)

---

CSS/Design Techniques

Science Poster Background

/* Clean bright background with subtle graph-paper texture */
.kid-bg-paper {
  background-color: var(--kid-cream);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  min-height: 100vh;
}

/* Chalkboard background for contrast sections */
.kid-bg-chalkboard {
  background-color: var(--kid-chalkboard);
  background-image:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(55, 71, 79, 1) 0%,
      rgba(38, 50, 56, 1) 100%
    );
  color: var(--kid-cream);
}

/* Notebook-lined background */
.kid-bg-notebook {
  background-color: var(--kid-white);
  background-image:
    repeating-linear-gradient(
      transparent,
      transparent 27px,
      #e8e8e8 27px,
      #e8e8e8 28px
    );
  background-position: 0 40px;
}

/* Bright color-band hero */
.kid-hero {
  background: linear-gradient(
    135deg,
    var(--kid-green) 0%,
    var(--kid-green-bright) 30%,
    var(--kid-turquoise) 70%,
    var(--kid-sky) 100%
  );
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

Experiment Card

/* Science experiment / fact card */
.kid-card {
  background: var(--kid-white);
  border: 3px solid var(--kid-green);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  position: relative;
  box-shadow:
    0 4px 12px var(--kid-shadow),
    0 2px 4px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kid-card:hover {
  transform: translateY(-4px) rotate(0.5deg);
  box-shadow:
    0 8px 24px var(--kid-shadow),
    0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Colored top-border variant (categorization by subject) */
.kid-card--biology { border-top: 6px solid var(--kid-green); }
.kid-card--chemistry { border-top: 6px solid var(--kid-purple); }
.kid-card--physics { border-top: 6px solid var(--kid-orange); }
.kid-card--earth { border-top: 6px solid var(--kid-brown); }
.kid-card--space { border-top: 6px solid var(--kid-sky); }

/* Card icon container */
.kid-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.kid-card__icon--green {
  background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
  color: var(--kid-green-dark);
}

.kid-card__icon--orange {
  background: linear-gradient(135deg, #ffe0b2, #ffcc80);
  color: #e65100;
}

.kid-card__icon--turquoise {
  background: linear-gradient(135deg, #b2ebf2, #80deea);
  color: var(--kid-teal);
}

“Fun Fact” Callout Box

/* Fun Fact / Did You Know callout */
.kid-callout {
  background: var(--kid-cream-warm);
  border: 2px dashed var(--kid-orange);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  position: relative;
}

.kid-callout::before {
  content: 'FUN FACT!';
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--kid-orange);
  color: var(--kid-white);
  font-family: 'Bangers', 'Fredoka', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  padding: 2px 12px;
  border-radius: 6px;
  text-transform: uppercase;
}

/* "Did You Know?" variant */
.kid-callout--question {
  border-color: var(--kid-turquoise);
  background: #e0f7fa;
}

.kid-callout--question::before {
  content: 'DID YOU KNOW?';
  background: var(--kid-turquoise);
}

/* "Warning!" variant for safety notes */
.kid-callout--warning {
  border-color: var(--kid-red);
  background: #fce4ec;
}

.kid-callout--warning::before {
  content: 'SAFETY FIRST!';
  background: var(--kid-red);
}

Step-by-Step Experiment Layout

/* Numbered experiment step */
.kid-step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--kid-white);
  border-radius: 12px;
  border-left: 4px solid var(--kid-green);
}

/* Step number circle */
.kid-step__number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--kid-green);
  color: var(--kid-white);
  font-family: 'Fredoka', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px var(--kid-shadow-colored);
}

/* Active/current step highlight */
.kid-step--active {
  border-left-color: var(--kid-orange);
  background: var(--kid-cream-warm);
}

.kid-step--active .kid-step__number {
  background: var(--kid-orange);
  box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
  animation: step-pulse 1.5s ease-in-out infinite;
}

@keyframes step-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

Bold Section Divider

/* Zigzag / wave divider between sections */
.kid-divider-wave {
  height: 40px;
  background: var(--kid-green);
  clip-path: polygon(
    0% 0%, 5% 100%, 10% 0%, 15% 100%, 20% 0%,
    25% 100%, 30% 0%, 35% 100%, 40% 0%, 45% 100%,
    50% 0%, 55% 100%, 60% 0%, 65% 100%, 70% 0%,
    75% 100%, 80% 0%, 85% 100%, 90% 0%, 95% 100%,
    100% 0%, 100% 100%, 0% 100%
  );
  margin: 0;
}

/* Color band divider */
.kid-divider-band {
  height: 8px;
  background: linear-gradient(
    90deg,
    var(--kid-green) 0%,
    var(--kid-turquoise) 25%,
    var(--kid-orange) 50%,
    var(--kid-purple) 75%,
    var(--kid-red) 100%
  );
  border: none;
  margin: 0;
}

/* Thick colored bar with label */
.kid-section-header {
  background: var(--kid-green);
  color: var(--kid-white);
  padding: 0.75rem 2rem;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0;
}

.kid-section-header--orange { background: var(--kid-orange); }
.kid-section-header--turquoise { background: var(--kid-turquoise); }
.kid-section-header--brown { background: var(--kid-brown); }

Playful Button

/* Kid-science styled button -- chunky, bold, colorful */
.kid-button {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  border-radius: 50px;
  border: 3px solid var(--kid-green-dark);
  background: var(--kid-green);
  color: var(--kid-white);
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  box-shadow:
    0 4px 0 var(--kid-green-dark),
    0 6px 12px var(--kid-shadow);
  transition: all 0.15s ease;
  text-decoration: none;
}

.kid-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 var(--kid-green-dark),
    0 8px 16px var(--kid-shadow);
}

.kid-button:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 var(--kid-green-dark),
    0 3px 8px var(--kid-shadow);
}

/* Orange variant */
.kid-button--orange {
  background: var(--kid-orange);
  border-color: #e65100;
  box-shadow: 0 4px 0 #e65100, 0 6px 12px var(--kid-shadow);
}

/* Turquoise variant */
.kid-button--turquoise {
  background: var(--kid-turquoise);
  border-color: var(--kid-teal);
  box-shadow: 0 4px 0 var(--kid-teal), 0 6px 12px var(--kid-shadow);
}

Bubbling Test Tube Animation

/* Decorative bubbling test tube effect */
.kid-bubble {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
  animation: kid-bubble-rise 3s ease-in infinite;
}

@keyframes kid-bubble-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-40px) scale(1.2) translateX(5px);
    opacity: 0.6;
  }
  100% {
    transform: translateY(-80px) scale(0.6) translateX(-3px);
    opacity: 0;
  }
}

.kid-bubble:nth-child(2) { animation-delay: 0.5s; animation-duration: 3.5s; left: 20%; }
.kid-bubble:nth-child(3) { animation-delay: 1.2s; animation-duration: 2.8s; left: 60%; }
.kid-bubble:nth-child(4) { animation-delay: 0.8s; animation-duration: 4s; left: 40%; }
.kid-bubble:nth-child(5) { animation-delay: 1.8s; animation-duration: 3.2s; left: 75%; }

/* Colorful liquid in a container */
.kid-liquid {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}

.kid-liquid::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(
    180deg,
    rgba(76, 175, 80, 0.3) 0%,
    rgba(76, 175, 80, 0.7) 100%
  );
  animation: kid-liquid-wobble 3s ease-in-out infinite;
}

@keyframes kid-liquid-wobble {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Purple variant */
.kid-liquid--purple::after {
  background: linear-gradient(
    180deg,
    rgba(156, 39, 176, 0.3) 0%,
    rgba(156, 39, 176, 0.7) 100%
  );
}

Badge / Achievement Sticker

/* Achievement / science badge sticker */
.kid-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2px solid;
}

.kid-badge--biology {
  background: #e8f5e9;
  color: var(--kid-green-dark);
  border-color: var(--kid-green);
}

.kid-badge--chemistry {
  background: #f3e5f5;
  color: #7b1fa2;
  border-color: var(--kid-purple);
}

.kid-badge--physics {
  background: #fff3e0;
  color: #e65100;
  border-color: var(--kid-orange);
}

.kid-badge--earth {
  background: #efebe9;
  color: var(--kid-brown-dark);
  border-color: var(--kid-brown);
}

.kid-badge--space {
  background: #e1f5fe;
  color: #01579b;
  border-color: var(--kid-sky);
}

---

Materials and Textures (Visual Metaphors for Web)

Physical Kid Science materials and their web equivalents:

Physical Material	Web Equivalent
Graph paper / notebook	Subtle grid or lined background-image using repeating-linear-gradient on cream/white
Chalkboard	Dark #263238 background with slight radial gradient for chalk-dust texture; white/cream text
Lab coat (white fabric)	Clean #ffffff card backgrounds with soft shadow, no texture
Test tube liquid	Colored gradient fills in containers with subtle wobble animation
Fossil in rock	Earthy brown border with tan/sand interior, embossed text shadow
Sticker / badge	Rounded pill shape with colored border, light tinted background
Safety goggles	Circular or oval frame motif, often used as icon containers
Magnifying glass	Circular crop/zoom effect using border-radius: 50% with thick border, suggesting close inspection
Science poster board	Bold background-color bands, thick borders, large chunky text – the tri-fold display board feel
Slime / goo	Bright green with border-radius distortion and slight transparency
Volcanic lava	Red-to-orange gradient with animated translateY drip effect
Crystal / geode	Purple-to-pink gradient with sparkle accents (animated white dots)

---

Media References

Television (Core Visual Influences)

• Bill Nye the Science Guy – fast-paced, colorful, experiment-driven visuals with bold title cards
• The Magic School Bus – bright cartoon palette, labeled diagrams integrated into narrative, personified science concepts
• Beakman’s World – zany, cluttered lab set design, comic-book-style graphics, exaggerated props
• Dexter’s Laboratory – stylized cartoon lab environment, contrasting bright colors, retro-futuristic equipment
• Jimmy Neutron – 3D-rendered science gadgets, inventor’s workshop aesthetic, space-adventure palette
• Phineas and Ferb – bold geometric shapes, bright primary and secondary colors, inventive contraptions
• Wild Kratts – nature/biology focus, animal coloring as design reference, field-explorer style
• Dinosaur Train – prehistoric earth tones combined with bright train/vehicle colors
• Sid the Science Kid – bright, warm, friendly color palette designed for preschool engagement
• SciGirls – STEM for girls, pink-and-turquoise palette mixed with traditional science colors

Games

• Spore – evolution/biology visualization, creature design as interactive science
• Animal Jam – nature-explorer interface, educational badges, colorful habitat design

Music and Media

• Schoolhouse Rock: Science Rock (1978) – foundational visual style for animated science education
• They Might Be Giants: Here Comes Science (2009) – playful, illustrated science-music videos

---

Related Aesthetics

Aesthetic	Relationship to Kid Science
Kidcore	Closest sibling; shares the bright colors, playful energy, and child-oriented visual language, but Kidcore is broader (toys, games, cartoons), while Kid Science focuses specifically on scientific education
Science Academia	The “grown-up” version; shares laboratory motifs and scientific iconography but with muted colors, serif fonts, and institutional formality
Utopian Scholastic	Shares the educational optimism and belief in learning as empowerment; Kid Science is its science-specific subset
Med-Tech Visions	Shares some lab/medical imagery (goggles, lab coats, microscopes) but Med-Tech is clinical and futuristic rather than playful

---

Quick-Start: Minimal Kid Science Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kid Science Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito+Sans:wght@400;600;700&family=Bangers&family=Patrick+Hand&display=swap" rel="stylesheet">
  <style>
    :root {
      --kid-green: #4caf50;
      --kid-green-light: #66bb6a;
      --kid-green-bright: #8bc34a;
      --kid-green-dark: #388e3c;
      --kid-orange: #ff9800;
      --kid-amber: #ffb300;
      --kid-turquoise: #00bcd4;
      --kid-teal: #00897b;
      --kid-sky: #03a9f4;
      --kid-purple: #9c27b0;
      --kid-red: #f44336;
      --kid-brown: #795548;
      --kid-brown-dark: #5d4037;
      --kid-white: #ffffff;
      --kid-cream: #fffde7;
      --kid-cream-warm: #fff9c4;
      --kid-chalkboard: #263238;
      --kid-shadow: rgba(0, 0, 0, 0.12);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background-color: var(--kid-cream);
      background-image:
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
      background-size: 20px 20px;
      color: var(--kid-chalkboard);
      font-family: 'Nunito Sans', sans-serif;
      font-weight: 400;
      font-size: 1.05rem;
      line-height: 1.7;
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3 {
      font-family: 'Fredoka', sans-serif;
      font-weight: 700;
      line-height: 1.2;
    }

    /* Hero banner */
    .hero {
      background: linear-gradient(
        135deg,
        var(--kid-green) 0%,
        var(--kid-green-bright) 30%,
        var(--kid-turquoise) 70%,
        var(--kid-sky) 100%
      );
      text-align: center;
      padding: 5rem 2rem 4rem;
      position: relative;
      overflow: hidden;
    }

    .hero h1 {
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      color: var(--kid-white);
      text-shadow:
        3px 3px 0 var(--kid-green-dark),
        0 4px 12px rgba(0, 0, 0, 0.15);
      position: relative;
      z-index: 1;
    }

    .hero p {
      margin-top: 1rem;
      font-size: 1.2rem;
      color: rgba(255, 255, 255, 0.95);
      font-weight: 600;
      position: relative;
      z-index: 1;
    }

    /* Rainbow divider bar */
    .rainbow-bar {
      height: 8px;
      background: linear-gradient(
        90deg,
        var(--kid-green) 0%,
        var(--kid-turquoise) 25%,
        var(--kid-orange) 50%,
        var(--kid-purple) 75%,
        var(--kid-red) 100%
      );
    }

    /* Content section */
    section {
      max-width: 900px;
      margin: 0 auto;
      padding: 3rem 2rem;
    }

    /* Experiment card */
    .card {
      background: var(--kid-white);
      border: 3px solid var(--kid-green);
      border-radius: 16px;
      padding: 2rem;
      margin-bottom: 1.5rem;
      box-shadow:
        0 4px 12px var(--kid-shadow),
        0 2px 4px rgba(0, 0, 0, 0.06);
      transition: transform 0.2s ease;
    }

    .card:hover {
      transform: translateY(-3px) rotate(0.3deg);
    }

    .card h2 {
      color: var(--kid-green-dark);
      font-size: 1.5rem;
      margin-bottom: 0.75rem;
    }

    /* Fun fact callout */
    .fun-fact {
      background: var(--kid-cream-warm);
      border: 2px dashed var(--kid-orange);
      border-radius: 12px;
      padding: 1.25rem 1.5rem;
      margin: 1.5rem 0;
      position: relative;
    }

    .fun-fact::before {
      content: 'FUN FACT!';
      position: absolute;
      top: -12px;
      left: 20px;
      background: var(--kid-orange);
      color: var(--kid-white);
      font-family: 'Bangers', sans-serif;
      font-size: 0.85rem;
      letter-spacing: 0.1em;
      padding: 2px 12px;
      border-radius: 6px;
    }

    /* Chunky button */
    .btn {
      display: inline-block;
      padding: 0.85rem 2.2rem;
      border-radius: 50px;
      border: 3px solid var(--kid-green-dark);
      background: var(--kid-green);
      color: var(--kid-white);
      font-family: 'Fredoka', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      cursor: pointer;
      text-decoration: none;
      box-shadow:
        0 4px 0 var(--kid-green-dark),
        0 6px 12px var(--kid-shadow);
      transition: all 0.15s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow:
        0 6px 0 var(--kid-green-dark),
        0 8px 16px var(--kid-shadow);
    }

    .btn:active {
      transform: translateY(2px);
      box-shadow:
        0 2px 0 var(--kid-green-dark),
        0 3px 8px var(--kid-shadow);
    }

    /* Handwritten note */
    .note {
      font-family: 'Patrick Hand', cursive;
      font-size: 1.1rem;
      color: #546e7a;
      transform: rotate(-0.5deg);
      margin-top: 0.5rem;
    }

    /* Subject badge */
    .badge {
      display: inline-block;
      padding: 0.3rem 0.8rem;
      border-radius: 50px;
      font-family: 'Fredoka', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border: 2px solid var(--kid-green);
      background: #e8f5e9;
      color: var(--kid-green-dark);
    }
  </style>
</head>
<body>

  <div class="hero">
    <h1>Title Here</h1>
    <p>Science is an adventure waiting to happen</p>
  </div>
  <div class="rainbow-bar"></div>

  <section>
    <div class="card">
      <span class="badge">Biology</span>
      <h2>Section Heading</h2>
      <p>Content about an exciting scientific concept, presented with bright colors, bold typography, and the enthusiasm of a science museum exhibit. Everything is designed to make learning feel like play.</p>
      <div class="fun-fact">
        <p>A butterfly tastes with its feet! Their taste sensors are located on the bottom of their legs.</p>
      </div>
      <p class="note">* Remember to wear your safety goggles!</p>
      <a href="#" class="btn">Try the Experiment</a>
    </div>
  </section>

</body>
</html>

This site is open source. Improve this page.