---
name: "Africa Tech Space Skills to Income"
description: "A bold creator-market system that turns practical learning into visible opportunity."
colors:
  creator-ink: "#061634"
  opportunity-blue: "#57B4E4"
  warm-paper: "#fffdf7"
  checkout-white: "#ffffff"
  momentum-lime: "#d9f36c"
  action-coral: "#ff7b6b"
  utility-slate: "#526078"
  error-ink: "#842419"
  success-wash: "#dff6cc"
  error-wash: "#ffe0da"
typography:
  display:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: "clamp(3.3rem, 7.2vw, 6rem)"
    fontWeight: 400
    lineHeight: 0.98
    letterSpacing: "-0.035em"
  headline:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: "clamp(2.7rem, 6vw, 5.2rem)"
    fontWeight: 400
    lineHeight: 0.98
    letterSpacing: "-0.035em"
  title:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: "clamp(1.8rem, 3vw, 2.5rem)"
    fontWeight: 400
    lineHeight: 0.98
    letterSpacing: "-0.035em"
  body:
    fontFamily: "Trebuchet MS, Segoe UI, sans-serif"
    fontSize: "1rem"
    fontWeight: 400
    lineHeight: 1.55
  label:
    fontFamily: "Trebuchet MS, Segoe UI, sans-serif"
    fontSize: "1rem"
    fontWeight: 700
    lineHeight: 1.55
rounded:
  field: "9px"
  action: "10px"
  card: "14px"
  pill: "999px"
spacing:
  xs: "8px"
  sm: "12px"
  md: "18px"
  lg: "24px"
  xl: "32px"
components:
  button-primary:
    backgroundColor: "{colors.creator-ink}"
    textColor: "{colors.checkout-white}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: "11px 20px"
    height: "48px"
  button-checkout:
    backgroundColor: "{colors.creator-ink}"
    textColor: "{colors.checkout-white}"
    typography: "{typography.label}"
    rounded: "{rounded.action}"
    padding: "11px 20px"
    height: "56px"
  button-accent:
    backgroundColor: "{colors.momentum-lime}"
    textColor: "{colors.creator-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.action}"
    padding: "11px 28px"
    height: "58px"
  input-default:
    backgroundColor: "{colors.checkout-white}"
    textColor: "{colors.creator-ink}"
    typography: "{typography.body}"
    rounded: "{rounded.field}"
    padding: "11px 13px"
    height: "50px"
  registration-card:
    backgroundColor: "{colors.checkout-white}"
    textColor: "{colors.creator-ink}"
    rounded: "{rounded.card}"
    width: "100%"
---

# Design System: Africa Tech Space Skills to Income

## Overview

**Creative North Star: "The Creator's Checkout Poster"**

This system treats practical learning like a creator-market launch: immediate, optimistic, and ready for action. Poster-scale statements, hard ink outlines, slightly rotated callouts, and a checkout-like registration surface make the promise feel usable rather than institutional. The atmosphere is fun, engaging, skills-focused, and youth-facing while the Africa Tech Space Tech Academy and RVIBS identity remains explicit.

The visual world borrows the structural energy of creator commerce—bold type, crisp utility controls, and decisive calls to action—without copying another brand's assets or palette. It refuses the polished generic school brochure: every surface should help a visitor recognize an earning opportunity, understand the practical path, and act.

**Key Characteristics:**

- Oversized, tightly set creator-poster headlines.
- Sky blue and deep navy carry the identity; lime and coral are purposeful action signals.
- Thick outlines, compact radii, and offset depth make controls feel tactile.
- Warm paper and checkout white keep dense information friendly and readable.
- Movement creates momentum, then yields completely to reduced-motion preferences.

## Colors

The palette pairs institutional confidence with creator-market optimism: deep ink anchors, opportunity blue owns large fields, and lime or coral punctuates action and attention.

### Primary

- **Creator Ink:** The primary text, outline, dark-section, and button color. It supplies the system's graphic authority.
- **Opportunity Blue:** The identity field for hero and closing surfaces, icon medallions, hover depth, and emphasized words.

### Secondary

- **Momentum Lime:** A high-energy checkout header, decorative marker, numbered step, and closing-action accent.

### Tertiary

- **Action Coral:** Reserved for focus visibility, a pathway step, and small moments that require immediate attention.

### Neutral

- **Warm Paper:** The default page canvas, warmer than a generic white and suited to long persuasive sections.
- **Checkout White:** Navigation, form, callout, and footer surfaces that need maximum contrast.
- **Utility Slate:** Placeholder and supporting utility copy where full ink would compete with the task.
- **Success Wash:** Positive registration feedback behind ink-outlined messaging.
- **Error Wash / Error Ink:** Validation feedback and field messages; always pair the wash with explicit copy, never color alone.

### Named Rules

**The Ink Carries Authority Rule.** Creator Ink owns type, outlines, and dark structural fields; avoid introducing a softer charcoal substitute.

**The Accent Has a Job Rule.** Momentum Lime advances action and Action Coral marks focus or urgency. Do not scatter either as ambient decoration.

## Typography

**Display Font:** Archivo Black (with sans-serif fallback)  
**Body Font:** Trebuchet MS (with Segoe UI and sans-serif fallbacks)  
**Label Font:** Trebuchet MS (with Segoe UI and sans-serif fallbacks)

**Character:** Archivo Black gives the page its ink-heavy poster voice; Trebuchet keeps forms, explanations, and organization details approachable. The contrast should feel like a creator's launch headline supported by a trustworthy checkout.

### Hierarchy

- **Display** (400, fluid 3.3rem–6rem, 0.98 line-height): Income-first hero and closing statements. On small screens the hero uses a viewport-driven 3rem–4.7rem scale.
- **Headline** (400, fluid 2.7rem–5.2rem, 0.98 line-height): Major persuasive section statements, balanced across lines.
- **Title** (400, fluid 1.8rem–2.5rem, 0.98 line-height): Checkout and compact section titles.
- **Body** (400–600, 1rem base, 1.55 line-height): Explanations, outcome copy, and field support. Prominent lead copy rises fluidly to 1.5rem and uses semibold weight.
- **Label** (700, 1rem base): Form labels, buttons, brand utility copy, and social controls.

### Named Rules

**The Poster Voice Rule.** Use Archivo Black for statements and compact pathway calls, not paragraphs, form labels, or explanatory prose.

**The Tight Headline Rule.** Display type uses compressed leading and negative tracking; body copy restores generous leading for trust and readability.

## Layout

The system uses a centered page width capped at 1180px with 20px side gutters. Its signature desktop composition is an asymmetric two-column field: persuasive copy at roughly three-fifths and a minimum 360px checkout column at two-fifths, separated by a fluid 40–90px gap. Large section spacing is fluid rather than breakpoint-stepped, generally ranging from about 60px to 130px.

At 940px, major two-column layouts become single-column, the registration card stops sticking, and the page cap narrows to 720px with 15px gutters. At 620px, gutters become 12px, paired name fields stack, supporting brand detail is hidden, and navigation, icons, card padding, and depth tighten without shrinking tap targets below 44px.

Outcome lists use ruled rows, circular icon marks, and consistent alignment instead of a generic card grid. Dark split sections may divide copy from a numbered path with a strong blue rule; on narrower screens that division becomes horizontal.

**The Action-in-View Rule.** Persuasive landing surfaces should pair the promise with a ready action when the content model permits; do not bury the primary conversion control behind decorative preamble.

## Elevation & Depth

Depth is structural and deliberately graphic. Most sections remain flat and are separated by thick ink rules; the checkout card alone receives a soft navy ambient shadow, while small poster callouts and button states use crisp offset shadows. Slight rotations belong to bounded callouts, never to form fields or reading columns.

### Shadow Vocabulary

- **Checkout Ambient** (`8px 10px 20px rgba(6, 22, 52, .18)`): The desktop registration shell; tighten to `5px 7px 16px rgba(6, 22, 52, .18)` on small screens.
- **Poster Offset** (`5px 6px 0 #061634`): Short white callouts that should feel pinned above the surface.
- **Button Lift** (`0 7px 0 #57B4E4`): Hover response for ink actions; compress to `0 3px 0 #57B4E4` on active press.

**The Flat Field Rule.** Keep large regions flat and outlined. Elevation is reserved for conversion, state, or a deliberately pinned poster fragment.

## Shapes

The form language combines stout 2–3px outlines with three kinds of curvature: compact field corners, slightly rounder checkout containers, and full pills for utility actions. Circular icon medallions and pathway badges punctuate ruled lists. Lime decorative geometry may be circular or skewed, but it stays subordinate to content.

**The Three-Pixel Frame Rule.** Major sections, primary actions, and the checkout shell use the same strong 3px Creator Ink frame. Interior fields and feedback blocks use a quieter 2px stroke.

**The Controlled Play Rule.** Rotation is subtle and isolated. Never tilt input controls, long text, or entire layout columns.

## Components

### Buttons

Buttons feel outlined, tactile, and unambiguous.

- **Shape:** Primary navigation actions are full pills; form and closing actions use compact 10px corners.
- **Primary:** Creator Ink with Checkout White text, a 3px ink border, bold utility type, and at least 48px height.
- **Checkout:** Full-width, 56px minimum height; disabled state lowers opacity, removes lift, and communicates busy state in text.
- **Accent:** Momentum Lime with Creator Ink text for the closing conversion moment.
- **Hover / Focus:** Hover rises 2px over a blue offset; active presses 1px down. Keyboard focus uses a 4px Action Coral outline with a 3px offset.

### Cards / Containers

The registration shell is a creator checkout, not a generic white card.

- **Corner Style:** Rounded but sturdy (14px).
- **Background:** Checkout White with a Momentum Lime header and a full-width ink progress bar.
- **Shadow Strategy:** Checkout Ambient only; supporting sections stay flat.
- **Border:** A continuous 3px Creator Ink frame with a matching header divider.
- **Internal Padding:** 22–26px on larger screens and 18px inline on small screens.

### Inputs / Fields

Fields are plain, high-contrast, and easy to complete.

- **Style:** Checkout White, Creator Ink text, 2px ink stroke, 9px corners, and a 50px minimum height.
- **Hover:** Shift to a very pale blue wash without changing geometry.
- **Focus:** Add a 4px translucent Opportunity Blue halo; the global Coral focus outline remains the keyboard-accessible fallback.
- **Error / Disabled:** Invalid fields use a pale coral wash and dark red border, with a nearby bold text explanation. Never rely on color alone.

### Navigation

The header is a white, ink-ruled utility bar. The crest and organization name form the home link; the single opposing action is the pill registration button. At small sizes, retain the organizer name and action while hiding only the secondary organization line.

### Outcome Row

Outcome rows replace conventional feature cards. Each uses a blue circular icon medallion, semibold benefit copy, and strong horizontal rules. The rhythm tightens on small screens, but the recognizable medallion-and-rule structure remains.

### Momentum Ticker

The dark ticker is an Archivo Black slogan belt with Opportunity Blue emphasis. It moves linearly over 24 seconds, carries no essential information, is hidden from assistive technology, and becomes static when reduced motion is requested.

### Feedback Banner

Success and error feedback use a 2px ink frame, 10px corners, a semantic pale wash, a bold title, and explicit list copy. Server feedback receives focus or directs focus to the first invalid field.

## Do's and Don'ts

### Do:

- **Do** lead persuasive surfaces with one oversized, income- or opportunity-first statement.
- **Do** preserve the Opportunity Blue and Creator Ink pairing as the dominant visual identity.
- **Do** use thick rules, circular marks, and offset state shadows to carry creator-market energy.
- **Do** keep registration controls high-contrast, plainly labeled, and at least 44px tall.
- **Do** keep Africa Tech Space Tech Academy and RVIBS identity visible and factual.
- **Do** make all nonessential movement obey reduced-motion preferences.

### Don't:

- **Don't** turn the system into a generic school brochure with a stock-photo hero, soft gradient, or floating glass cards.
- **Don't** copy Gumroad brand assets, typography, or exact compositions; borrow only creator-first structural energy.
- **Don't** use Momentum Lime and Action Coral as competing large-area backgrounds.
- **Don't** replace strong ink outlines with faint gray dividers or borderless form controls.
- **Don't** put Archivo Black into paragraphs, field labels, or dense utility copy.
- **Don't** fabricate dates, venues, testimonials, attendance claims, or accreditation as visual proof.
