DESIGN.md · Analysis

GEEK School Tlemcen

geekschool-dz.com · 17 Sept 2026 · 47 colors · Roboto

GEEK School Tlemcen

A vibrant, youth-focused language and international certification training platform that transforms academic rigor into playful, energetic visual communication. GEEK School combines bold neon accents with warm, approachable design to inspire students pursuing global opportunities.

Colors

surface#ffffff

surface-dim#f9fafb

surface-bright#ffffff

surface-container-lowest#f5f5f5

surface-container-low#f0f0f0

surface-container#ebebeb

surface-container-high#e0e0e0

surface-container-highest#d5d5d5

on-surface#475467

on-surface-variant#696868

inverse-surface#1d2939

inverse-on-surface#f9fafb

outline#abb8c3

outline-variant#c4c7c8

surface-tint#145da0

primary#145da0

on-primary#ffffff

primary-container#0c2d48

on-primary-container#ffffff

inverse-primary#00b3ff

secondary#ffb606

on-secondary#000000

secondary-container#fff7ee

on-secondary-container#ff773d

tertiary#442e66

on-tertiary#ffffff

tertiary-container#f7efff

on-tertiary-container#6d13d7

error#cf2e2e

on-error#ffffff

error-container#ffb4ab

on-error-container#8b0000

primary-fixed#145da0

primary-fixed-dim#0c2d48

on-primary-fixed#ffffff

on-primary-fixed-variant#e8f0f9

secondary-fixed#ffb606

secondary-fixed-dim#ff773d

on-secondary-fixed#000000

on-secondary-fixed-variant#fff6f3

tertiary-fixed#442e66

tertiary-fixed-dim#6d13d7

on-tertiary-fixed#ffffff

on-tertiary-fixed-variant#f7efff

background#ffffff

on-background#475467

surface-variant#abb8c3

Typography

display: fontFamily: Roboto · fontSize: 60px · fontWeight: 700 · lineHeight: 68px · letterSpacing: -0.04em
headline-lg: fontFamily: Roboto · fontSize: 43px · fontWeight: 600 · lineHeight: 52px · letterSpacing: -0.02em
headline-md: fontFamily: Roboto · fontSize: 32px · fontWeight: 600 · lineHeight: 40px · letterSpacing: -0.01em
title-lg: fontFamily: Roboto · fontSize: 24px · fontWeight: 600 · lineHeight: 32px
body-lg: fontFamily: Roboto · fontSize: 18px · fontWeight: 400 · lineHeight: 28px
body-md: fontFamily: Roboto · fontSize: 16px · fontWeight: 400 · lineHeight: 24px
label-md: fontFamily: Roboto · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: Roboto · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.05em

Design guidance

Overview

GEEK School Tlemcen is an educational technology platform designed for international language learners and certification seekers. The brand embodies 'Energetic Minimalism'—a design philosophy that pairs bold, neon-saturated accents (primary blue #145da0, secondary gold #ffb606, tertiary purple #442e66) with clean white surfaces and generous whitespace. The aesthetic evokes youthful optimism and digital-native confidence, transforming the traditionally austere world of language certification into an inviting, playful experience. The UI communicates that rigorous academic training can be both serious and joyful.

Voice and personality: GEEK School speaks with casual authority—encouraging without being patronizing, informative without being dry. The tone is conversational and direct, using active verbs and concrete outcomes. Example sentence: 'Master international certifications that open doors worldwide—start your journey today.'

Colors

The color system centers on three primary roles: Primary Blue (#145da0) anchors trust, professionalism, and call-to-action elements—used on buttons, links, active states, and key navigation. Secondary Gold (#ffb606) provides energetic contrast and highlights accents, badges, and decorative elements that draw attention without overwhelming. Tertiary Purple (#442e66) serves as a sophisticated supporting accent for secondary actions, containers, and emphasis states. The surface stack uses pure white (#ffffff) as the dominant background with a carefully calibrated gray scale (surface-container-low #f0f0f0 through surface-container-highest #d5d5d5) for layering and depth. On-surface text is set to #475467 (a warm mid-gray) for readability and reduced eye strain. Error states use #cf2e2e for cri

Typography

The typography system uses Roboto exclusively, a humanist sans-serif that balances technical clarity with approachability. Display (60px, 700 weight) and Headline-lg (43px, 600 weight) establish visual hierarchy for hero sections and major section breaks, with tight line-heights (68px and 52px respectively) and negative letter-spacing (-0.04em, -0.02em) to create compact, energetic presence. Body text (16px, 400 weight, 24px line-height) maintains legibility at standard reading distance with generous line-height for accessibility. Labels and buttons use 14px at 600 weight with 0.01em letter-spacing for crisp, scannable microcopy. All text over busy backgrounds or small labels should apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure contrast and readability.

Layout

The layout follows a 12-column grid system with a fixed container max-width of 1290px, centered on the viewport. Page rhythm is established through consistent spacing: section separation uses lg spacing (40px), component padding uses md spacing (24px), and internal element spacing uses sm spacing (12px). The design favors asymmetrical layouts with generous whitespace—never filling the entire width with content. Gutter spacing is set to 24px between grid columns. Mobile breakpoints compress to single-column layouts at 767px and below, with padding reduced to 16px. The hero section occupies 100% viewport height with a cream background (#f9fafb) and vibrant illustrated elements positioned off-center to create visual tension and guide the eye toward CTAs.

Elevation & Depth

Depth is achieved through subtle, consistent shadows rather than dramatic layering. Level 1 (Base/Surface): no shadow, white background (#ffffff). Level 2 (Cards/Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used on standard cards and input fields to lift them slightly from the surface. Level 3 (Modals/Overlays): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), reserved for modals, dropdowns, and elevated interactive states. Hover states transition to Level 3 shadow over 200ms. No blur effects or glassmorphism; the design relies on clean separation through shadow and color contrast. Borde

Shapes

The shape philosophy is 'Playful Precision'—combining sharp, technical edges with rounded, approachable corners. Buttons use rounded-md (0.75rem / 12px) for standard actions, creating a balanced, friendly appearance. Input fields use rounded-full (9999px) to emphasize their interactive nature and create visual distinction from static containers. Cards use rounded-lg (1rem / 16px) for a modern, slightly softer aesthetic. Badges and secondary elements use rounded-full for maximum approachability. The hero section's illustrated elements (language bubbles, decorative shapes) use 100% border-radius

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use #145da0 background with white text, 48px height, 12px 24px padding, and rounded-md (12px). Hover state transitions to #0c2d48 (primary-container) over 200ms. Secondary buttons (button-secondary) use transparent background with #145da0 text and a 2px solid border, rounded-full (9999px) for maximum visual distinction. Accent buttons (button-accent) use #ffb606 gold background with black text for high-energy CTAs. All buttons use Roboto 14px 600 weight for consistent labeling.

Containers & Surfaces Cards (card component) use white background (#ffffff) with 1px solid border at #d5d5d5, rounded-lg (16px), and 24px padding. Shadow is 0 3px 8px rgba(0, 0, 0, 0.15). On hover, background shi

Do's and Don'ts

**Do**

Do use Primary Blue (#145da0) exclusively for primary CTAs, active navigation states, and focus indicators—it is the brand's signature trust color.
Do apply Secondary Gold (#ffb606) sparingly on badges, highlights, and decorative accents to maintain visual energy without overwhelming the interface.
Do maintain 40px (lg spacing) between major sections and 24px (md spacing) within component groups to create breathing room and visual clarity.
Do use Roboto 600 weight for all labels, buttons, and microcopy to ensure scannable, crisp hierarchy.
Do transition all interactive states (hover, focus, active) over 200ms with ease-in-out timing to reinforce responsiveness and polish.

**Don't**

Don't use Secondary Gold (#ffb606) as a primary background or dominant surface—it is an accent only; reserve white (#ffffff) and light grays for surfaces.
Don't apply box-shadow values larger than 0 8px 24px rgba(0, 0, 0, 0.12)—excessive shadow depth contradicts the clean, modern aesthetic.
Don't mix border-radius values arbitrarily; stick to the defined scale (12px for buttons, 16px for cards, 9999px for inputs/badges) to maintain visual consistency.
Don't use Tertiary Purple (#442e66) as a primary text color on white backgrounds—it lacks sufficient contrast; use On-Surface (#475467) instead.
Don't exceed 1290px container width or compress padding below 16px on mobile—the layout must remain scannable and touch-friendly at all breakpoints.

---
version: alpha
name: GEEK School Tlemcen
description: >-
  A vibrant, youth-focused language and international certification training platform that transforms academic rigor
  into playful, energetic visual communication. GEEK School combines bold neon accents with warm, approachable design to
  inspire students pursuing global opportunities.
logo:
  src: https://geekschool-dz.com/wp-content/uploads/2023/12/Geek-school-writing-square-1373x733-px.png
colors:
  surface: '#ffffff'
  surface-dim: '#f9fafb'
  surface-bright: '#ffffff'
  surface-container-lowest: '#f5f5f5'
  surface-container-low: '#f0f0f0'
  surface-container: '#ebebeb'
  surface-container-high: '#e0e0e0'
  surface-container-highest: '#d5d5d5'
  on-surface: '#475467'
  on-surface-variant: '#696868'
  inverse-surface: '#1d2939'
  inverse-on-surface: '#f9fafb'
  outline: '#abb8c3'
  outline-variant: '#c4c7c8'
  surface-tint: '#145da0'
  primary: '#145da0'
  on-primary: '#ffffff'
  primary-container: '#0c2d48'
  on-primary-container: '#ffffff'
  inverse-primary: '#00b3ff'
  secondary: '#ffb606'
  on-secondary: '#000000'
  secondary-container: '#fff7ee'
  on-secondary-container: '#ff773d'
  tertiary: '#442e66'
  on-tertiary: '#ffffff'
  tertiary-container: '#f7efff'
  on-tertiary-container: '#6d13d7'
  error: '#cf2e2e'
  on-error: '#ffffff'
  error-container: '#ffb4ab'
  on-error-container: '#8b0000'
  primary-fixed: '#145da0'
  primary-fixed-dim: '#0c2d48'
  on-primary-fixed: '#ffffff'
  on-primary-fixed-variant: '#e8f0f9'
  secondary-fixed: '#ffb606'
  secondary-fixed-dim: '#ff773d'
  on-secondary-fixed: '#000000'
  on-secondary-fixed-variant: '#fff6f3'
  tertiary-fixed: '#442e66'
  tertiary-fixed-dim: '#6d13d7'
  on-tertiary-fixed: '#ffffff'
  on-tertiary-fixed-variant: '#f7efff'
  background: '#ffffff'
  on-background: '#475467'
  surface-variant: '#abb8c3'
typography:
  display:
    fontFamily: Roboto
    fontSize: 60px
    fontWeight: '700'
    lineHeight: 68px
    letterSpacing: '-0.04em'
  headline-lg:
    fontFamily: Roboto
    fontSize: 43px
    fontWeight: '600'
    lineHeight: 52px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: Roboto
    fontSize: 32px
    fontWeight: '600'
    lineHeight: 40px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: Roboto
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
  body-lg:
    fontFamily: Roboto
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
  body-md:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  label-md:
    fontFamily: Roboto
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Roboto
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.05em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1290px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.06)
  md: 0 3px 8px rgba(0, 0, 0, 0.15)
  lg: 0 8px 24px rgba(0, 0, 0, 0.12)
layout:
  containerMaxWidth: 1290px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.md}'
    padding: 12px 24px
    height: 48px
    fontFamily: Roboto
    fontSize: 14px
    fontWeight: '600'
  button-primary-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
    transition: all 200ms ease-in-out
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 12px 24px
    height: 48px
    border: 2px solid {colors.primary}
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
    transition: all 200ms ease-in-out
  button-accent:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-secondary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.md}'
    padding: 12px 24px
    height: 48px
    fontWeight: '600'
  button-accent-hover:
    backgroundColor: '{colors.secondary-fixed-dim}'
    textColor: '{colors.on-secondary}'
    transition: all 200ms ease-in-out
  card:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.lg}'
    padding: '{spacing.md}'
    boxShadow: '{elevation.md}'
    border: 1px solid {colors.surface-container-high}
  card-hover:
    backgroundColor: '{colors.surface-container-low}'
    boxShadow: '{elevation.lg}'
    transition: all 200ms ease-in-out
  input-field:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    padding: 10px 20px
    border: 1px solid {colors.outline-variant}
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: '600'
  input-field-focus:
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px rgba(20, 93, 160, 0.1)
    transition: all 150ms ease-in-out
  badge:
    backgroundColor: '{colors.tertiary-container}'
    textColor: '{colors.on-tertiary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
    display: inline-block
    fontWeight: '600'
  badge-accent:
    backgroundColor: '{colors.secondary-container}'
    textColor: '{colors.secondary-fixed-dim}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
    textColor: '{colors.on-surface}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
    transition: all 150ms ease-in-out
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons are the primary interaction mechanism. Primary buttons (button-primary) use #145da0 background with white text, 48px height, 12px 24px padding, and rounded-md (12px). Hover state transitions to #0c2d48 (primary-container) over 200ms. Secondary buttons (button-secondary) use transparent background with #145da0 text and a 2px solid border, rounded-full (9999px) for maximum visual distinction. Accent buttons (button-accent) use #ffb606 gold background with black text for high-energy CTAs. All buttons use Roboto 14px 600 weight for consistent labeling.

### Containers & Surfaces
Cards (card component) use white background (#ffffff) with 1px solid border at #d5d5d5, rounded-lg (16px), and 24px padding. Shadow is 0 3px 8px rgba(0, 0, 0, 0.15). On hover, background shi

## Do's and Don'ts

**Do**
- Do use Primary Blue (#145da0) exclusively for primary CTAs, active navigation states, and focus indicators—it is the brand's signature trust color.
- Do apply Secondary Gold (#ffb606) sparingly on badges, highlights, and decorative accents to maintain visual energy without overwhelming the interface.
- Do maintain 40px (lg spacing) between major sections and 24px (md spacing) within component groups to create breathing room and visual clarity.
- Do use Roboto 600 weight for all labels, buttons, and microcopy to ensure scannable, crisp hierarchy.
- Do transition all interactive states (hover, focus, active) over 200ms with ease-in-out timing to reinforce responsiveness and polish.

**Don't**
- Don't use Secondary Gold (#ffb606) as a primary background or dominant surface—it is an accent only; reserve white (#ffffff) and light grays for surfaces.
- Don't apply box-shadow values larger than 0 8px 24px rgba(0, 0, 0, 0.12)—excessive shadow depth contradicts the clean, modern aesthetic.
- Don't mix border-radius values arbitrarily; stick to the defined scale (12px for buttons, 16px for cards, 9999px for inputs/badges) to maintain visual consistency.
- Don't use Tertiary Purple (#442e66) as a primary text color on white backgrounds—it lacks sufficient contrast; use On-Surface (#475467) instead.
- Don't exceed 1290px container width or compress padding below 16px on mobile—the layout must remain scannable and touch-friendly at all breakpoints.

Edit, then copy or download.