Genius Path · Track 02

Web / UI
Design.

Hero sections, sub-heroes, benefits, CTA, footer, forms and navigation — all built in Webstudio using tokens and CSS variables. No hardcoded values. No manual styles. Systems only. Good UI is not decoration. It is clarity, hierarchy, maintainability and user flow.

WhoMbali · Gcinile · Rea
Primary redoLedix.co.za
ToolsWebstudio · Affinity Designer
SubmitTrello by 16:00
00 — Primary Redo Brief

Ledix.co.za — redesign the hero.

This is the primary redo brief for the Web/UI track. Study the site carefully before touching any design tool. Understand what the problems are before you solve them.

Redo Brief — Level 3

Redesign the Ledix.co.za homepage hero section

Go to ledix.co.za and study the homepage carefully. The current hero has serious hierarchy, spacing and layout problems. Your job is to redesign it — not the whole site, just the hero section — with a significantly stronger visual hierarchy, correct whitespace, and a layout that makes the primary headline impossible to miss.

Reference layout: study the AYDM hero (yourdoormat.co.za) — note how the left side carries the H1 hierarchy clearly, and the right panel supports without overpowering. Your Ledix redesign should achieve the same balance.

Current problems on Ledix.co.za

  • H1 hierarchy is weak — headline gets lost
  • Right-side element overpowers the primary message
  • Spacing is inconsistent and unintentional
  • Typography scale is not clearly defined
  • Visual weight distribution is unbalanced
  • CTA is not prominent enough given the layout
  • Mobile considerations appear absent

What your redesign must achieve

  • Clear H1 — largest, most prominent element on the page
  • Strong left-side hierarchy following the AYDM reference
  • Right-side panel that supports — does not compete
  • Consistent spacing using a defined grid
  • Type scale with clear heading / sub / body distinction
  • One strong CTA — colour, size and position intentional
  • Desktop (1440px) + mobile (390px) versions required
Study ledix.co.za → AYDM reference →
01 — 4-Week Schedule

Your programme, week by week.

09:00–12:00 study. 13:00–16:00 build. Upload Trello by 16:00. Present Tuesday (Mon+Fri). Present Thursday (Tue+Wed).

Week 1 theme

UI Foundations + Layout Study

Before building anything, you must understand how UI layouts are structured. Study spacing systems, grid logic, type hierarchy in web context, and how the best sites create visual clarity.

Key principle

Good UI is a system, not a style.

You are not choosing fonts and colours. You are building a structure that holds meaning clearly. Study the Drevo wireframe and OnyxUI components before touching Affinity or Webstudio.

Mon
Study Drevo wireframes + annotate 3 hero sections
09–12: Open Drevo cloneable. Study every section — hero, nav, benefits, cards, footer. Note the spacing system and grid logic. Then find 3 strong hero sections online and annotate them. 13–16: Sketch (on paper or Affinity) a wireframe of an ideal hero layout for a local service brand.
3h study3h wireframe
3 annotated hero screenshots + your wireframe sketch → Trello by 16:00. Present Tuesday.
Tue ★
Recreate an existing hero section in Affinity Designer (1440px)
09–12: Study OnyxUI hero components and the AYDM reference layout closely. Identify the grid, type scale and spacing decisions. 13–16: Recreate one of these hero layouts exactly in Affinity at 1440px. Same spacing, same type hierarchy, same layout logic.
3h study3h buildpresent
Recreation at 1440px + grid lines visible. Present Tuesday — explain every spacing decision.
Wed
Study Webstudio — Craft template + token system
09–12: Open the Webstudio Craft template. Read every token name. Understand what each one controls. Study how the spacing tokens relate to each other. 13–16: Set up a new Webstudio project. Create CSS colour tokens for a fictional brand — primary, secondary, neutral, accent, background, foreground. No hardcoded hex values.
3h study3h setup
Webstudio project with CSS colour variables set up — screenshot of variables panel → Trello. Present Thursday.
Thu ★
Build a hero section in Webstudio using your tokens
09–12: Watch Zander Whitehurst token tutorial. Study how the Craft template builds its hero. 13–16: Build a functional hero section in Webstudio using your Week 1 Wednesday tokens. Every colour and spacing value must reference a token — no inline styles, no hardcoded values.
3h study3h buildpresent
Webstudio hero using tokens only. Present Thursday — show token panel + explain every variable.
Fri
Audit Ledix.co.za — document all problems
09–12: Study Ledix.co.za thoroughly. Take screenshots. Study the AYDM reference. 13–16: Create a written + annotated audit document: what is wrong, where it is wrong, why it feels wrong, and what the fix should be. This becomes your Week 4 redo blueprint.
3h study3h audit
Annotated Ledix audit doc (min 6 annotated screenshots with written fixes) → Trello. Present Tuesday.
Week 2 theme

Page Sections — Sub-hero, Benefits, CTA, Footer

This week you build every major section of a landing page. Each section has its own hierarchy rules. Master them individually before connecting them as a full page.

Key principle

Every section has one job.

Hero: make them stay. Sub-hero: give context. Benefits: earn trust. CTA: make them act. Footer: hold information. When a section tries to do too much, it does nothing well.

Mon
Sub-hero / About section (1440px)
09–12: Study how sub-hero sections work — they follow the hero and give context. Usually 2-column: text left, image right. Study 3 examples. 13–16: Design a sub-hero section for your Week 1 fictional brand. Same token system. No new colours. No new fonts.
3h study3h build
Sub-hero section (1440px) → Trello. Present Tuesday.
Tue ★
Benefits section (3 or 6 items with icons or numbers)
09–12: Study benefits sections from OnyxUI and Drevo. Note how 3-column vs 6-item layouts differ in density and readability. 13–16: Design a benefits section. 3 or 6 items. Icon or number treatment. Consistent spacing. Must feel like it comes from the same page as your hero and sub-hero.
3h study3h buildpresent
Benefits section (1440px). Present Tuesday — walk through spacing and hierarchy decisions.
Wed
CTA section + footer
09–12: Study CTA sections — what makes someone click. Study footers — what information goes there, how it is structured. 13–16: Design a CTA section (one strong headline, one button, background) and a footer for your brand. Both must follow the token system.
3h study3h build
CTA section + footer → Trello. Present Thursday.
Thu ★
Full landing page — all sections assembled (1440px)
09–12: Review how sections connect — study a full scrollable landing page from Made By Shape or Designparser. How do sections transition visually? 13–16: Assemble all sections into one scrollable Affinity file: hero → sub-hero → benefits → CTA → footer. Show grid lines version.
3h study3h buildpresent
Full landing page (all sections, 1440px). Present Thursday — scroll through every section.
Fri
Mobile version (390px) — hero + sub-hero + CTA
09–12: Study how layouts adapt from desktop to mobile — which elements stack, which disappear, how type scales. 13–16: Redesign your hero, sub-hero and CTA for 390px mobile. Same brand, same tokens, different layout logic for smaller screen.
3h study3h build
Hero + sub-hero + CTA at 390px → Trello. Present Tuesday.
Week 3 theme

Webstudio — Building with Systems

This week you move from Affinity design files into Webstudio. You are building real, live UI using tokens, components and reusable structures. Speed is expected to increase significantly.

Key principle

Build once. Reuse everywhere.

A component built correctly in Webstudio can be reused across a full site instantly. A component built with hardcoded values must be rebuilt every time. Build correctly from the start.

Mon
Webstudio — full token setup (colours, spacing, type)
09–12: Study the soldati-craft-training.netlify.app platform — understand how the spacing tokens are structured. 13–16: Set up a complete token system in a new Webstudio project: colour tokens, spacing tokens (4px base scale), and typography tokens (size, weight, leading). Every value named. No hardcoded anything.
3h study3h build
Webstudio project with full token system — screenshot of all token panels → Trello. Present Tuesday.
Tue ★
Build the hero section in Webstudio (live)
09–12: Review your Affinity hero design from Week 1. Identify every spacing value, colour value, and type value — map them all to tokens. 13–16: Build the hero section in Webstudio using your token system. Every element references a token. No exceptions. Preview at 1440px and 390px.
3h study3h buildpresent
Live Webstudio hero — share preview link. Present Tuesday.
Wed
Build sub-hero + benefits section in Webstudio
09–12: Study how Webstudio handles multi-column layouts and responsive grid. 13–16: Build the sub-hero and benefits sections. Reuse any components from Tuesday. Every spacing value must use a spacing token. Every colour must use a colour token.
3h study3h build
Sub-hero + benefits live in Webstudio — preview link → Trello. Present Thursday.
Thu ★
Build CTA + footer — full page live in Webstudio
09–12: Study how Webstudio handles footer structure and CTA buttons. 13–16: Build the CTA section and footer. Then assemble the complete page — hero to footer — in Webstudio. Preview link must show full scrollable page working responsively.
3h study3h buildpresent
Full live page in Webstudio — preview link. Present Thursday — demonstrate responsive behaviour.
Fri
Form section + navigation
09–12: Study how contact forms and navigation are built in Webstudio. Study OnyxUI form components. 13–16: Add a contact form section and a functional navigation bar to your live page. Nav must highlight the active section. Form must have correct field labels and a submit button using your token colours.
3h study3h build
Page with nav + form — preview link → Trello. Present Tuesday.
Week 4 theme

Ledix.co.za Redo + Final Presentation

This is the full redo of the Ledix.co.za hero section — the primary brief for this track. Everything you have learned in Weeks 1–3 is applied here. No excuses. No shortcuts.

Key principle

Solve the problem. Don't just make it prettier.

The Ledix brief is not about aesthetics. It is about hierarchy, clarity and communication. If someone lands on the page and immediately understands what Ledix does and what they should do next — you have succeeded.

Mon
Ledix redo — strategy + wireframe
09–12: Re-read your Week 1 Ledix audit. Study the AYDM reference again. Decide: what is the primary headline? What does the right panel carry? What is the CTA? Write these decisions down before opening any software. 13–16: Build the wireframe at 1440px and 390px in Affinity. No colour, no images — structure only.
3h strategy3h wireframe
Wireframe at 1440px + 390px → Trello. Present Tuesday.
Tue ★
Ledix redo — full visual design (1440px + 390px)
09–12: Study the Ledix brand carefully — what colours do they use? What font style? What photography? 13–16: Apply full visual design to your wireframe. Use Ledix's actual brand colours and adapt the typography system. Strong H1, supporting right panel, clear CTA. Both desktop and mobile.
3h study3h buildpresent
Full visual design (desktop + mobile) → Trello. Present Tuesday — walk through every decision and how you solved each problem from your audit.
Wed
Ledix redo — build in Webstudio (live)
09–12: Map every visual design value to tokens — colours, spacing, type. Set up token system in a new Webstudio project using Ledix brand values. 13–16: Build the Ledix hero section in Webstudio. Token-based. Responsive. Preview link must work at both 1440px and 390px.
3h setup3h build
Live Ledix hero in Webstudio — preview link → Trello. Present Thursday.
Thu ★
Final presentation — full Ledix redo + 4-week portfolio
Present the Ledix redo with: (1) the original site with annotated problems, (2) your wireframe, (3) your final visual design at desktop + mobile, (4) the live Webstudio build. Then present your best 2 other pieces from the 4 weeks. 10 minutes total. Kahoot quiz follows.
10min present
Full Ledix case study + 2 additional pieces. Kahoot quiz this session.
02 — Token Reference

Tokens. Not hardcoded values.

This is the most important rule in the Web/UI track. Every colour, spacing value and font size must reference a named token. Never type a hex code or pixel value directly into a component.

Why tokens matter

Change once. Updates everywhere.

If you hardcode a colour as #FF4949 in 40 components, and the client changes the brand colour — you update 40 things. If you use a token called "accent-primary" in all 40 components — you change the token once. Done.

This is not a preference — this is how professional teams build. No token = no system. No system = not professional.
Token naming convention

Names describe purpose, not value.

A token should be named for what it does — not what it looks like. "red" is a bad token name because if the brand colour changes to orange, the token name is wrong. "accent-primary" is correct because it describes the role, not the colour.

Good: --color-bg-primary, --color-text-muted, --space-section-padding. Bad: --red, --navy, --24px.
/* ─── COLOUR TOKENS ─────────────────── */ :root { /* Brand colours */ --color-brand-primary: rgb(255 73 73); --color-brand-accent: rgb(255 221 97); /* Background system */ --color-bg-base: rgb(4 36 64); --color-bg-surface: rgb(5 28 56); --color-bg-elevated: rgb(3 22 46); /* Text system */ --color-text-primary: rgb(240 240 238); --color-text-muted: rgb(140 162 190); --color-text-dim: rgba(140,162,190,.5); /* Border system */ --color-border: rgba(12,55,122,.8); --color-border-subtle: rgba(12,55,122,.4); /* ─── SPACING TOKENS ─────────────────── */ /* 4px base scale */ --space-1: 4px; /* micro gap */ --space-2: 8px; /* tight */ --space-3: 12px; /* close */ --space-4: 16px; /* base unit */ --space-6: 24px; /* comfortable */ --space-8: 32px; /* relaxed */ --space-12: 48px; /* section gap */ --space-16: 64px; /* section padding */ --space-24: 96px; /* hero padding */ /* ─── TYPOGRAPHY TOKENS ──────────────── */ --text-xs: clamp(.75rem, 1vw, .875rem); --text-sm: clamp(.875rem, 1.5vw, 1rem); --text-base: clamp(1rem, 1.8vw, 1.125rem); --text-lg: clamp(1.125rem, 2.5vw, 1.375rem); --text-xl: clamp(1.375rem, 3.5vw, 1.875rem); --text-2xl: clamp(1.875rem, 5vw, 2.75rem); --text-3xl: clamp(2.5rem, 7vw, 4rem); --text-hero: clamp(3rem, 9vw, 5.5rem); /* ─── RADIUS TOKENS ──────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; }
03 — Task Library

Pull a task. Study it. Build it.

Browse below when you need a focused task. Study the reference first. Build it. Upload Trello by 16:00. All tasks must use tokens — no hardcoded values.

Hero Section · Recreation

Recreate the AYDM hero layout structure

Study yourdoormat.co.za hero — strong left H1 hierarchy, right supporting panel, background image with overlay. Recreate the layout at 1440px in Affinity using a fictional brief.

yourdoormat.co.za — study the layout logic, not the content
Level 190 min
Navigation · Recreation

Recreate a Drevo navigation bar in Webstudio

Open the Drevo cloneable. Study the navigation structure — logo left, links centre, CTA right. Recreate this nav in a new Webstudio project using only token-referenced values.

Drevo cloneable — study navigation component only
Level 145–60 min
Benefits Section · Recreation

Recreate a 3-column benefits section from OnyxUI

Study OnyxUI free components. Choose one 3-column benefits layout. Recreate it in Affinity at 1440px. Match the spacing system, icon treatment and type hierarchy exactly.

onxui.com — explore free component options
Level 160 min
Hero Section · Adaptation

Adapt AYDM layout for a Sasolburg service brand

Use the AYDM layout logic but design the hero for a fictional Sasolburg plumbing, electrical or property brand. Same layout system — different brand, different content, different photography.

AYDM layout reference + choose a Vaal-area service category
Level 290 min
Full Landing Page · Design

Design a full landing page for a fictional fintech brand

Hero → sub-hero → benefits → CTA → footer. At 1440px desktop. Token-referenced values throughout. The brand must feel like it could compete with Capitec or FNB in the app space.

Study: FNB app interface · Capitec visual language · Dark UI fintech references
Level 23–4 hours
Webstudio · Token Build

Build a complete hero section in Webstudio — tokens only

Take your best Affinity hero design. Map every value to a named token. Set up the token system in Webstudio and build the hero live. Share a preview link. No hardcoded values — not one.

soldati-craft-training.netlify.app — study the token architecture
Level 22–3 hours
Redo Brief · Full

Redesign Ledix.co.za hero — full brief (audit + design + Webstudio)

The full Ledix redo brief: audit the current site, build wireframes, design the visual (1440px + 390px), then build live in Webstudio. This is the primary Week 4 deliverable for this track.

ledix.co.za + yourdoormat.co.za (reference layout)
Level 3Full Week 4
Component Library · Build

Build 5 reusable UI components in Webstudio

Button (primary + secondary + ghost), card, badge, input field, and a section divider. All using tokens. All responsive. All reusable. Document what each component does and which tokens it references.

OnyxUI reference components + Drevo cloneable structure
Level 33–4 hours
04 — Rubric

How your work is reviewed.

Web/UI work is reviewed on hierarchy, spacing, responsiveness, token discipline and whether the design solves the actual problem.

Web / UI Submission Rubric
Criterion
Strong
Developing
Needs Work
Visual Hierarchy
H1 is dominant. Eye moves clearly through headline → sub → CTA. Nothing competes with the primary message.
Mostly clear but one element competes with the headline or CTA is not prominent enough.
Everything the same visual weight. No clear starting point. The primary message is not obvious.
Spacing System
Spacing is consistent throughout. Clear relationship between element spacing (tight) and section spacing (generous). Uses a scale.
Mostly consistent but some sections have inconsistent padding or elements are spaced randomly.
Spacing appears random. No visible system. Some elements are crammed, others have too much space.
Token Discipline
All colour, spacing and type values reference named tokens. No hardcoded values anywhere in the Webstudio build.
Mostly using tokens but 1–3 hardcoded values exist. Needs cleanup before it is production-ready.
Multiple hardcoded values. The build is not scalable. Must be rebuilt with a proper token system.
Responsiveness
Design works well at both 1440px and 390px. Layout adapts correctly. Text remains readable at both sizes.
Desktop version is good but mobile has layout or type issues that need fixing.
Mobile version not considered or broken. Desktop-only thinking.
Problem Solving
The design clearly solves the stated problem from the brief. You can explain why every decision was made.
The design addresses most of the brief but one or two problems from the audit remain unsolved.
The design looks different but does not solve the original problems. Same issues still exist.
05 — References

What to study.

Study these tools and studios seriously. Understand how they build — not just how they look.

Drevo — Webstudio Wireframe Library
Cloneable Webstudio template with pre-built sections. Use as your starting point for all web layouts — hero, cards, nav, benefits, footer. Study every component.
Open Drevo →
OnyxUI — Free UI Components
Free UI component library. Use as reference for component patterns, spacing systems, and interaction states. Explore the free options — many are directly useful for your weekly builds.
Open OnyxUI →
Soldati Craft Training
The Soldati Webstudio/Craft platform. Study the token architecture, spacing system and how the design system is structured. This is the standard you are building toward.
Open →
AYDM — Hero Reference
yourdoormat.co.za. Study the hero layout only — strong left H1 hierarchy, right supporting panel, background image with directional gradient overlay. This is your layout reference for the Ledix redo.
Study hero →
Ledix — Redo Brief Site
The primary redo brief for this track. Study the homepage carefully. Identify hierarchy, spacing and layout problems before building your solution. Do not start designing until you have done the audit.
Study site →
Zander Whitehurst
Founder of Memorisely. UI/UX — spacing systems, design tokens, interface hierarchy. The spacing discipline translates directly to web and Webstudio builds. Follow his YouTube channel.
Instagram →YouTube →
Made By Shape
UK studio. Study how their site sections connect — the rhythm between sections, the spacing consistency, and how little visual noise they use to communicate a lot.
Work →
Josh Yolkk
Website reviews that break down hierarchy and spacing with real critique. Trains your eye to see UI problems before anyone tells you. Watch before every redo brief.
Instagram →TikTok →
Skild Case Study
Shows how a brand identity extends to a website. Study the layout logic, the navigation, the hero hierarchy and how the blue brand system holds across every page section.
Case Study →