← AI Graphic Design Pro
0/15 complete

Module 03 · Brand Asset Production

Color Palettes and Typography Systems With AI Assistance

20 minfocused lesson7practical steps4grounded questions5source links
Open lesson + course map

On this lesson

Course outline

AI can propose color and type directions quickly, but it cannot approve contrast, font rights, script support, or production behavior for you. A professional system names each choice by function and records where it may be used.

By the end of this lesson, you will have a compact color and typography specification with role-based tokens, contrast evidence, multilingual samples, and a fallback plan. The goal is a usable system, not a fashionable palette image.

// concept

Build Colors by Role

Start from the brand attributes and real use cases. Ask for candidate directions, not authoritative color psychology:

// prompt — copy me6 lines
Act as an ideation partner for a hypothetical Pakistan-based education service.
Attributes: calm, capable, welcoming. Main uses: mobile website, PDF worksheets,
social graphics, occasional one-color printing. Propose three distinct palette
directions. For each, give six HEX candidates and explain the functional role
of each color. Do not claim universal emotional meanings. Do not claim that any
pair is accessible; mark all contrast decisions as "test required".

Convert the chosen direction into roles such as:

// prompt — copy me8 lines
color.bg.canvas      #F5F3EC
color.bg.surface     #FFFFFF
color.text.primary   #0B3D2E
color.text.muted     #49665D
color.action.primary #0B3D2E
color.accent         #C6F432
color.border         #C9D0CB
color.error          #A62A2A

Names like green-1 describe appearance; names like text-primary describe use. Keep a swatch table with HEX for screens and ask the relevant printer for CMYK or spot-color requirements. A screen conversion is not a guaranteed print match.

Test text and essential graphics with a current contrast checker. WCAG defines contrast requirements by use and text size; consult the official standard rather than memorizing a screenshot from a design blog. Bright accent colors often work as backgrounds or highlights but fail as small text on light surfaces.

// concept

Make Typography a Hierarchy

Choose fonts after listing required scripts, weights, platforms, and licenses. A two-font system is usually enough:

RoleDecision to record
DisplayFamily, weight, size range, line height, maximum line length
BodyFamily, weight, size, line height, paragraph spacing
LabelsFamily, weight, case treatment, tracking
UrduFamily, shaping test, line height, fallback
DataTabular-number need and fallback

Do not choose two expressive fonts that compete. Let one carry personality and the other carry reading. Define a responsive scale such as display, H1, H2, H3, body, small, and label; then test it with real content rather than “The quick brown fox” alone.

Use licensed sources. Google Fonts provides open-source fonts and license information, but you must still keep the font files and license record required by your delivery agreement. For uploaded Canva fonts or other plan-dependent brand features, check current official requirements.

// concept

Test the System in Context

Create a proof sheet with:

  • a short and a three-line heading;
  • two paragraphs of body copy;
  • buttons in normal, hover, disabled, and focus states if digital;
  • error, warning, and success messages that do not depend on color alone;
  • numbers, PKR prices, email, and URL text;
  • English, Roman Urdu, and Urdu samples where the brand needs them;
  • a grayscale or one-color view.

Color-blind simulation and automated checks are useful evidence, not a replacement for keyboard, screen-reader, device, and human review appropriate to the product.

// worked_example

Worked Example

The designer keeps mint as a decorative surface, moves body text to deep green, and reserves lime for focus and status accents. Error states add an icon and explicit text rather than red alone. The type system uses a strong grotesk for English headings, a neutral sans serif for body copy, and a tested Nastaliq font only for appropriate Urdu passages.

The first Urdu proof has clipped descenders because it inherited the English line height. The designer increases the Urdu line height, checks shaping in the browser and exported PDF, and has a fluent reader review a sample. The finished page records:

// prompt — copy me5 lines
Body / light surface: deep green, tested pair, 16px/1.6
Accent lime: focus ring and highlight; never small text on ivory
English H1: display family, 700, responsive 40–64px/1.02
Urdu paragraph: approved Urdu family, 20px/2.0, right aligned
Fallback: system sans for body; Noto Nastaliq Urdu for Urdu passages

No medical outcome claims or real patient data are used in the proof sheet.

// failure_cases

Failure Cases to Diagnose

7 cases to diagnose

  • Palette approval is based on an AI explanation

    test functional roles and remove unsupported psychology claims.

  • Accent color is used for small text

    check the actual foreground/background pair and reassign the role.

  • Typography is only a list of font names

    specify sizes, weights, line heights, fallbacks, and use cases.

  • Urdu is tested as a screenshot only

    test editable text, shaping, export, and a fluent reader’s review.

  • Error and success differ only by color

    add labels, shapes, or icons with clear text.

  • Print values are guessed from HEX

    request a proof and requirements from the actual printer.

  • Font licensing is undocumented

    retain the source, license, permitted uses, and delivery terms.

// pakistan_angle

Pakistan Angle

A Pakistani brand may move between English, Roman Urdu, Urdu, prices such as PKR 2,490, phone numbers, and mixed-direction addresses. Build those strings into the proof sheet. Nastaliq usually needs more vertical room than the English system; do not force both scripts into identical line-height boxes just to make a style table look neat.

Budget print vendors, office printers, and different Android screens will not reproduce color identically. Prioritize contrast and hierarchy over subtle shade differences, test a grayscale photocopy, and request one physical proof before a large run. Do not place real CNIC numbers, prescriptions, customer addresses, or private WhatsApp screenshots into an AI-generated type specimen.

// hands_on

Hands-On Exercise

7 steps

  1. Write three brand attributes and list every required channel and script.

  2. Generate three candidate palette directions with every contrast decision marked “test required.”

  3. Select one direction and name each color by functional role.

  4. Choose a display, body, and—if required—Urdu type family with documented licenses and fallbacks.

  5. Build a proof sheet containing the contextual tests in this lesson.

  6. Record contrast evidence for every text and action pair; repair failures.

  7. Test the sheet on one phone, one PDF export, and one grayscale or physical print.

// completion_rubric

Completion Rubric

6 checks — tick as you verify

0/6

// sources

Sources

5 official sources — check every claim yourself

// check_yourself

Check yourself

4 questions · answers and options are taken word-for-word from this course

0/4

  1. 1 / 4 · diagnose

    Your work shows this failure mode: “Palette approval is based on an AI explanation.” What does the lesson tell you to do about it?