Internal · Design system
CKSTEM Styleguide
Single visual reference for every UI primitive. If something on a real page diverges from this guide, that's a bug — file via /ckw-create-defect.
Color tokens
#F0901C
#8CC63F
#EF4437
#1EBCD4
#8B5CF6
#1A2332
#F8F9FA
#0F172A
CIC contest tints
art
computing
math
speaking
science
writing
Typography
Display 72 / Fraunces 800
H1 60 / extrabold
H2 48 / extrabold
H3 30 / bold
Body 18 / Inter 400 — used for paragraphs by default. Generous line-height for parents reading on phones in low light.
JetBrains Mono · for stats, contest IDs, and dev numbers
Buttons
Contest Badges
Cards
Default card
Simple container with rounded corners and subtle shadow.
Interactive card
Lifts on hover; whole surface is the link.
Tinted card
Top border carries the contest/program tint.
Program Cards
Testimonials
Sample data only — for design reference. The homepage shows real Google Reviews (build-time fetch), not these placeholders.
Sample parent testimonial — replaced at build time by real Google Reviews via scripts/fetch-google-reviews.mjs.
Sample student testimonial — for design system reference only. Never rendered on user-facing pages.
Sample hero
A spec moves; a token does not.
The styleguide is the visual contract. If a real page diverges, file a defect.
Buttons — ghost-light (on dark)
Used on dark/navy backgrounds. Must always be paired with a primary button.
DarkHero
Used on contest pages (TIMO, BBB, HKIMO). Two variants: with image (split layout) and without (full-width text).
Contest name
BE A WINNER
Participate to show your talent on a global platform.
No image variant
Full-width hero title
Use this when there is no contest logo image available.
FaqSection
Labeled dark section with expandable accordion. Used for Heat Round and Global Final blocks. Change bg and accentColor to differentiate sections.
One of the Most Popular Math Olympiads
What grades can participate?
Grade 2–12 Canadian students are eligible. We will not ship awards outside Canada.
What is the contest format?
Duration: 90 minutes | Format: Online Proctored | Number of Questions: 25 | Score per question: 4 | Total score: 100
Exam Areas cover Logical Thinking, Arithmetic/Algebra, Number Theory, Geometry, and Combinatorics.
What is the cancellation policy?
The contest fees students pay to Competitive Kids STEM for hosting competitions are non-refundable. Our organization pays a cost to various external organizations that own these competitions.
World International Mathematical Olympiad (WIMO)
What grades can participate?
Grade 2–12 Canadian students are eligible. We will not ship awards outside Canada.
What is the contest format?
Duration: 90 minutes | Format: Online Proctored | Number of Questions: 25 | Score per question: 4 | Total score: 100
Exam Areas cover Logical Thinking, Arithmetic/Algebra, Number Theory, Geometry, and Combinatorics.
DarkBanner
Callout strip for awards, winners, and highlight sections. Change bg for different contexts (teal = award ceremony, dark = other).
PageCta
Closing CTA for every content page. Consistent across all pages — change heading/sub text only.
Ready to compete?
Contest entry is included with most CKSTEM Math Problem Solving courses. Standalone registration is also available.
TwoColSection
Two-column image + text layout. Use reverse to flip the order. Used on Family Challenge, Fun, and editorial pages.
Section heading in gold
Body text goes here. This is the slotted content — any valid HTML including headings, paragraphs, lists, and CTAs.
A second paragraph. Note consistent spacing and line-height from the component's global slot styles.
Subscribe to challenges
Reversed layout
Text appears on the left, image on the right. Works on all screen sizes.