Skip to content
IB Vault
Theme

Menu

Design system

IB Vault 2.0 is one product with two themes, Cinematic Luxury and Luxury Minimalist. Colour, type, shape and components are shown in both, side by side. The syllabus demo follows the theme chosen in the masthead.

Principles

Four rules every page follows.

  • One product, two themes

    Cinematic Luxury and Luxury Minimalist share every page and component. data-theme on <html>, or on any element, decides which tokens apply. Nothing else changes.

  • Tokens only

    Components read semantic tokens through utilities such as bg-sheet and text-ink-2. No raw colour values, and no class that depends on the theme.

  • Progress from manual completion

    A subtopic counts only when the student marks it complete. Reading, scrolling, rating flashcards or answering questions never changes progress.

  • Revision and Exam practice

    Two kinds of study, kept apart. Revision (Notes, flashcards) learns the syllabus; Exam practice (exam questions, past papers) works in the exam's form.

Colour

Semantic tokens, declared once per theme. Components name a role, never a value, so the same markup renders in either theme.

Cinematic Luxury

data-theme="cinematic"

Near-black charcoal ground, graphite cards, warm off-white text and a champagne accent.

Grounds and surfaces

  • ground--groundPage background
  • sheet--sheetPanels and the reading sheet
  • sheet-2--sheet-2Hover, inset and quiet fills
  • sheet-raised--sheet-raisedFields, menus, secondary buttons

Ink

  • ink--inkHeadings and primary text
  • ink-2--ink-2Secondary text
  • ink-3--ink-3Metadata and captions

Rules

  • rule--ruleHairlines and dividers
  • rule-strong--rule-strongControl borders, dashed outlines

Action

  • act--actLinks, focus, current item
  • act-fill--act-fillPrimary button
  • act-wash--act-washCurrent item ground, act badge

Progress and level

  • meter--meterProgress fill, complete mark
  • track--trackProgress track
  • hl--hlHL only label

Feedback

  • positive--positiveSaved, correct
  • caution--cautionNeeds attention
  • negative--negativeError, incorrect

Luxury Minimalist

data-theme="minimal"

Warm ivory ground, soft-white cards, charcoal text and a forest-green accent.

Grounds and surfaces

  • ground--groundPage background
  • sheet--sheetPanels and the reading sheet
  • sheet-2--sheet-2Hover, inset and quiet fills
  • sheet-raised--sheet-raisedFields, menus, secondary buttons

Ink

  • ink--inkHeadings and primary text
  • ink-2--ink-2Secondary text
  • ink-3--ink-3Metadata and captions

Rules

  • rule--ruleHairlines and dividers
  • rule-strong--rule-strongControl borders, dashed outlines

Action

  • act--actLinks, focus, current item
  • act-fill--act-fillPrimary button
  • act-wash--act-washCurrent item ground, act badge

Progress and level

  • meter--meterProgress fill, complete mark
  • track--trackProgress track
  • hl--hlHL only label

Feedback

  • positive--positiveSaved, correct
  • caution--cautionNeeds attention
  • negative--negativeError, incorrect

Type

Hanken Grotesk for everything you operate, Source Serif 4 for reading. Cinematic sets its headings in the serif; Minimal keeps them in the sans.

Cinematic Luxury

data-theme="cinematic"

  • Display.display

    Source Serif 4, 380 · 60px

    Page titles, one per page.

    Your study

  • Heading.heading

    Source Serif 4, 440 · 32, 24, 20px

    Sections and cards: h2, h3, h4.

    Microeconomics

    Elasticity of demand

    Availability of substitutes

  • Title.title-serif

    Source Serif 4, 400 · 24px

    Titles of what you read, serif in both themes.

    Determinants of price elasticity of demand

  • Reading.prose-read

    Source Serif 4, 400 · 19 / 33

    The Notes column, 68ch. It never moves.

    The more close substitutes a good has, the more elastic its demand: when its price rises, consumers can switch easily to something else.

  • Bodytext-body

    Hanken Grotesk, 400 · 16 / 25

    Descriptions and running copy.

    Every syllabus subtopic has its own Notes page, written for one sitting.

  • Interfacetext-ui

    Hanken Grotesk, 500–600 · 14 / 22

    Controls, rows and labels you operate.

    Mark subtopic complete

  • Metatext-meta

    Hanken Grotesk, 400 · 13 / 19

    Counts, dates and captions.

    Economics · Microeconomics · 6 of 9 subtopics complete

  • Labeltext-label

    Hanken Grotesk, 600 · 12 / 16

    Badges and level labels.

    HL only

  • Numerals.numerals · .stat

    Tabular lining figures

    Codes and figures that align; headline numbers.

    62%

    1. 2.1Demand
    2. 2.10Market failure: asymmetric information
    3. 3.12Supply-side policies

Luxury Minimalist

data-theme="minimal"

  • Display.display

    Hanken Grotesk, 600 · 60px

    Page titles, one per page.

    Your study

  • Heading.heading

    Hanken Grotesk, 600 · 32, 24, 20px

    Sections and cards: h2, h3, h4.

    Microeconomics

    Elasticity of demand

    Availability of substitutes

  • Title.title-serif

    Source Serif 4, 450 · 24px

    Titles of what you read, serif in both themes.

    Determinants of price elasticity of demand

  • Reading.prose-read

    Source Serif 4, 400 · 19 / 33

    The Notes column, 68ch. It never moves.

    The more close substitutes a good has, the more elastic its demand: when its price rises, consumers can switch easily to something else.

  • Bodytext-body

    Hanken Grotesk, 400 · 16 / 25

    Descriptions and running copy.

    Every syllabus subtopic has its own Notes page, written for one sitting.

  • Interfacetext-ui

    Hanken Grotesk, 500–600 · 14 / 22

    Controls, rows and labels you operate.

    Mark subtopic complete

  • Metatext-meta

    Hanken Grotesk, 400 · 13 / 19

    Counts, dates and captions.

    Economics · Microeconomics · 6 of 9 subtopics complete

  • Labeltext-label

    Hanken Grotesk, 600 · 12 / 16

    Badges and level labels.

    HL only

  • Numerals.numerals · .stat

    Tabular lining figures

    Codes and figures that align; headline numbers.

    62%

    1. 2.1Demand
    2. 2.10Market failure: asymmetric information
    3. 3.12Supply-side policies

Shape and depth

Four radii, two surfaces and three shadows. Cinematic lifts with soft, long shadows and lights the stage; Minimal draws edges with borders and uses no gradients.

Cinematic Luxury

data-theme="cinematic"

Radii

  • chip 7pxBadges, level labels
  • control 10pxButtons, fields, menu items
  • card 14pxCards and menus
  • stage 18pxThe stage

Card and stage

A warm key light from the upper left, on this surface only.

Card

The standard raised surface. .card

Stage

The one lit surface on a page. .stage

Shadows

Soft, long shadows lift surfaces off the charcoal ground.

  • shadow-cardResting cards
  • shadow-liftCard hover
  • shadow-popMenus and drawers

Luxury Minimalist

data-theme="minimal"

Radii

  • chip 6pxBadges, level labels
  • control 8pxButtons, fields, menu items
  • card 10pxCards and menus
  • stage 12pxThe stage

Card and stage

No light and no gradient: a soft-white sheet and its border.

Card

The standard raised surface. .card

Stage

The one lit surface on a page. .stage

Shadows

Borders carry the edges; shadows stay faint.

  • shadow-cardResting cards
  • shadow-liftCard hover
  • shadow-popMenus and drawers

Components

Foundational parts, built on native elements. Each reads the tokens of the theme around it; none has a rule of its own per theme.

Cinematic Luxury

data-theme="cinematic"

Buttons

Primary for the one main action on a screen, secondary for the rest, quiet inside dense rows.

Medium: primary, secondary, quiet
Small
Disabled, then loading

Badges

Demo marks seeded personal data; Placeholder, dashed, marks content still to be written.

NotesDemoPlaceholderSavedOutline uncheckedCurrent

Level labels

One syllabus, labelled by level where it matters. The text always states the level.

SL & HLHL onlySL only

Progress

One accent for every meter. The fill grows with scaleX; the value is announced as a percentage.

Medium · Microeconomics62%

Small · The global economy30%

Status marks

Ring, ring with an arc, filled disc with a check. Decorative: the state is always also in words.

  • Not started
  • In progress
  • Complete

Status key, shown once beside a syllabus heading

  • Not started
  • In progress
  • Complete

Tabs

Arrow keys move between tabs; only the selected tab is in the tab order.

  • NotesOne reading page for every subtopic
  • FlashcardsRecall key terms and definitions

Dropdown

A menu button. Arrow keys move, Escape closes, focus returns to the trigger.

Field

Label above, hint below; an error replaces the hint and names the fix.

Between 50 and 1,500 words.

Choose 1,500 words or fewer.

Disabled fields drop to the quiet fill.

Icons

20px grid, 1.5 stroke, round caps. Decorative; the control carries the name.

  • Alert
  • Cards
  • Check
  • ChevronDown
  • ChevronLeft
  • ChevronRight
  • ChevronUp
  • Clock
  • Close
  • Exit
  • Flag
  • Flip
  • Menu
  • Monitor
  • Moon
  • Notes
  • Panel
  • Paper
  • Pause
  • Play
  • Question
  • Search
  • Sun

Luxury Minimalist

data-theme="minimal"

Buttons

Primary for the one main action on a screen, secondary for the rest, quiet inside dense rows.

Medium: primary, secondary, quiet
Small
Disabled, then loading

Badges

Demo marks seeded personal data; Placeholder, dashed, marks content still to be written.

NotesDemoPlaceholderSavedOutline uncheckedCurrent

Level labels

One syllabus, labelled by level where it matters. The text always states the level.

SL & HLHL onlySL only

Progress

One accent for every meter. The fill grows with scaleX; the value is announced as a percentage.

Medium · Microeconomics62%

Small · The global economy30%

Status marks

Ring, ring with an arc, filled disc with a check. Decorative: the state is always also in words.

  • Not started
  • In progress
  • Complete

Status key, shown once beside a syllabus heading

  • Not started
  • In progress
  • Complete

Tabs

Arrow keys move between tabs; only the selected tab is in the tab order.

  • NotesOne reading page for every subtopic
  • FlashcardsRecall key terms and definitions

Dropdown

A menu button. Arrow keys move, Escape closes, focus returns to the trigger.

Field

Label above, hint below; an error replaces the hint and names the fix.

Between 50 and 1,500 words.

Choose 1,500 words or fewer.

Disabled fields drop to the quiet fill.

Icons

20px grid, 1.5 stroke, round caps. Decorative; the control carries the name.

  • Alert
  • Cards
  • Check
  • ChevronDown
  • ChevronLeft
  • ChevronRight
  • ChevronUp
  • Clock
  • Close
  • Exit
  • Flag
  • Flip
  • Menu
  • Monitor
  • Moon
  • Notes
  • Panel
  • Paper
  • Pause
  • Play
  • Question
  • Search
  • Sun

Syllabus

The live Economics syllabus, in this page's theme. Progress is read from this browser's study state: only subtopics marked complete count, and opening a topic never changes it.

  • Not started
  • In progress
  • Complete

1Introduction to economics

100%

11 of 11 subtopics complete · 2 topics

  1. 1.1What is economics?, 7 of 7 subtopics complete
    1. Economics as a social science and its nine central concepts, complete
    2. Factors of production and factor incomes, complete
    3. Scarcity, choice and the economic problem, complete
    4. Opportunity cost in economic decisions, complete
    5. Resource allocation and economic systems, complete
    6. The production possibilities curve, complete
    7. Modelling the economy: the circular flow of income, complete
  2. 1.2How do economists approach the world?, 4 of 4 subtopics complete
    1. Economic methodology and evidence, complete
    2. Positive and normative economics; equity and equality, complete
    3. Models, assumptions and ceteris paribus, complete
    4. Economic thought: how economic ideas developed, complete

2Microeconomics

24%

14 of 58 subtopics complete · 12 topics · 4 HL only

  1. 2.1Demand, 5 of 5 subtopics complete
    1. Demand, price and quantity, complete
    2. Individual and market demand, complete
    3. Non-price determinants of demand, complete
    4. Movements along and shifts of demand, complete
    5. Assumptions behind the law of demandHL only, complete
  2. 2.2Supply, 5 of 5 subtopics complete
    1. Supply, price and quantity, complete
    2. Individual and market supply, complete
    3. Non-price determinants of supply, complete
    4. Movements along and shifts of supply, complete
    5. Assumptions behind the law of supplyHL only, complete
  3. 2.3Competitive market equilibrium, 2 of 5 subtopics complete
    1. Market equilibrium, complete
    2. Excess demand, excess supply and adjustment, complete
    3. The price mechanism, not complete
    4. Consumer, producer and social surplus, not complete
    5. Surplus calculationsHL only, not complete
  4. 2.4Critique of the maximizing behaviour of consumers and producersHL only, 0 of 4 subtopics complete
    1. Rational consumer choice, not complete
    2. Limits of rational consumer choice, not complete
    3. Choice architecture and nudges, not complete
    4. Profit maximisation and alternative objectives, not complete
  5. 2.5Elasticity of demandLast read, 2 of 8 subtopics complete
    1. Elasticity and price elasticity of demand, complete
    2. Degrees and diagrams of PED, complete
    3. Determinants of PEDLast read, not complete
    4. PED, total revenue and policy, not complete
    5. Income elasticity of demand, not complete
    6. PED along a linear demand curveHL only, not complete
    7. PED of primary commodities and manufactured productsHL only, not complete
    8. Applications of YEDHL only, not complete
  6. 2.6Elasticity of supply, 0 of 4 subtopics complete
    1. Price elasticity of supply, not complete
    2. Degrees and diagrams of PES, not complete
    3. Determinants of PES, not complete
    4. PES of primary commodities and manufactured productsHL only, not complete
  7. 2.7Role of government in microeconomics, 0 of 7 subtopics complete
    1. Reasons for government intervention, not complete
    2. Price ceilings and price floors, not complete
    3. Indirect taxes and subsidies, not complete
    4. Direct provision and regulation, not complete
    5. Consumer nudgesHL only, not complete
    6. Market and stakeholder consequences, not complete
    7. Calculating the effects of price controls, indirect taxes and subsidiesHL only, not complete
  8. 2.8Market failure: externalities and common pool or common access resources, 0 of 6 subtopics complete
    1. Social optimum and allocative efficiency, not complete
    2. Externalities, merit goods and demerit goods, not complete
    3. Common pool resources, not complete
    4. Corrective policies, not complete
    5. Measurement, cooperation and policy limits, not complete
    6. Externality welfare calculationsHL only, not complete
  9. 2.9Market failure: public goods, 0 of 3 subtopics complete
    1. Characteristics of public goods, not complete
    2. The free-rider problem, not complete
    3. Direct provision and contracting out, not complete
  10. 2.10Market failure: asymmetric informationHL only, 0 of 2 subtopics complete
    1. Adverse selection and moral hazard, not complete
    2. Regulation, signalling and screening, not complete
  11. 2.11Market failure: market powerHL only, 0 of 8 subtopics complete
    1. Market structures and market power, not complete
    2. Profit, revenue and costs, not complete
    3. Calculating profit, MC, MR, AC and AR from data, not complete
    4. Perfect competition, not complete
    5. Monopoly and natural monopoly, not complete
    6. Oligopoly and game theory, not complete
    7. Monopolistic competition, not complete
    8. Evaluating market power and intervention, not complete
  12. 2.12The market's inability to achieve equityHL only, 0 of 1 subtopics complete
    1. How markets create unequal outcomes, not complete

3Macroeconomics

9%

4 of 46 subtopics complete · 7 topics

  1. 3.1Measuring economic activity and illustrating its variations, 3 of 4 subtopics complete
    1. National income accounting, complete
    2. Real income, population and PPP comparisons, complete
    3. Business cycles and growth trends, complete
    4. Limits of GDP and alternative well-being measures, not complete
  2. 3.2Variations in economic activity: aggregate demand and aggregate supply, 0 of 5 subtopics complete
    1. Aggregate demand: components, slope and shifts, not complete
    2. Short-run aggregate supply and cost shocks, not complete
    3. Potential output and supply determinants, not complete
    4. Equilibrium and competing adjustment models, not complete
    5. Model applications and limitations, not complete
  3. 3.3Macroeconomic objectives, 0 of 7 subtopics complete
    1. Economic growth and living standards, not complete
    2. Unemployment, not complete
    3. Inflation and deflation, not complete
    4. Constructing a weighted price indexHL only, not complete
    5. Sustainable government debtHL only, not complete
    6. Relative costs and conflicts between objectives, not complete
    7. Phillips curve trade-offsHL only, not complete
  4. 3.4Economics of inequality and poverty, 0 of 7 subtopics complete
    1. Income and wealth inequality, not complete
    2. Lorenz curve and Gini coefficient, not complete
    3. Absolute, relative and multidimensional poverty, not complete
    4. Causes and consequences of inequality, not complete
    5. Progressive, regressive and proportional taxation, not complete
    6. Policies to reduce poverty and inequality, not complete
    7. Lorenz curve construction, tax rates and tax calculationsHL only, not complete
  5. 3.5Demand management: monetary policy, 1 of 8 subtopics complete
    1. Goals of monetary policy, complete
    2. Money creation by commercial banksHL only, not complete
    3. Tools of monetary policyHL only, not complete
    4. The money market and the equilibrium interest rateHL only, not complete
    5. Real and nominal interest rates, not complete
    6. Expansionary and contractionary policy, not complete
    7. The transmission mechanism, not complete
    8. Strengths and constraints of monetary policy, not complete
  6. 3.6Demand management: fiscal policy, 0 of 7 subtopics complete
    1. Revenue, expenditure, budgets and objectives, not complete
    2. Expansionary and contractionary fiscal policy, not complete
    3. Effectiveness and policy trade-offs, not complete
    4. Supply effects of fiscal measures, not complete
    5. Keynesian multiplier and injection calculationsHL only, not complete
    6. Automatic stabilizationHL only, not complete
    7. Crowding out and its conditionsHL only, not complete
  7. 3.7Supply-side policies, 0 of 8 subtopics complete
    1. Productivity, capacity and policy goals, not complete
    2. Competition and ownership reforms, not complete
    3. Labour-market flexibility and minimum wages, not complete
    4. Tax incentives, not complete
    5. Education, training and health, not complete
    6. Infrastructure, research and industrial policy, not complete
    7. Demand and supply links, not complete
    8. Policy evaluation, not complete

4The global economy

0%

0 of 48 subtopics complete · 10 topics

  1. 4.1Benefits of international trade, 0 of 5 subtopics complete
    1. Benefits of trade, not complete
    2. Free trade diagrams: world price, exports and imports, not complete
    3. Calculating exports, imports, import expenditure and export revenueHL only, not complete
    4. Absolute and comparative advantageHL only, not complete
    5. Limitations of the theory of comparative advantageHL only, not complete
  2. 4.2Types of trade protection, 0 of 4 subtopics complete
    1. Tariffs, not complete
    2. Import quotas, not complete
    3. Subsidies, export subsidies and administrative barriers, not complete
    4. Tariff, quota and subsidy calculationsHL only, not complete
  3. 4.3Arguments for and against trade control/protection, 0 of 3 subtopics complete
    1. Arguments for protection, not complete
    2. Arguments against protection, not complete
    3. Weighing free trade and protection, not complete
  4. 4.4Economic integration, 0 of 7 subtopics complete
    1. Preferential trade agreements, not complete
    2. Types of trading bloc, not complete
    3. Benefits and costs of integration, not complete
    4. Trade creation and trade diversionHL only, not complete
    5. Monetary union, not complete
    6. Advantages and disadvantages of monetary unionHL only, not complete
    7. World Trade Organization, not complete
  5. 4.5Exchange rates, 0 of 5 subtopics complete
    1. Floating exchange rates, not complete
    2. Determinants of currency demand and supply, not complete
    3. Macroeconomic consequences of currency changes, not complete
    4. Fixed and managed exchange rates, not complete
    5. Fixed versus floating systemsHL only, not complete
  6. 4.6Balance of payments, 0 of 8 subtopics complete
    1. Structure and credits/debits, not complete
    2. Current account, not complete
    3. Capital and financial accounts, not complete
    4. Account interdependence and zero balance, not complete
    5. The current and financial accounts and the exchange rateHL only, not complete
    6. Implications of persistent current account deficits and surplusesHL only, not complete
    7. Correction methodsHL only, not complete
    8. Marshall-Lerner and J-curveHL only, not complete
  7. 4.7Sustainable development, 0 of 3 subtopics complete
    1. Meaning of sustainable development, not complete
    2. Sustainable Development Goals, not complete
    3. Sustainability and povertyHL only, not complete
  8. 4.8Measuring development, 0 of 4 subtopics complete
    1. Multidimensional development, not complete
    2. Single development indicators, not complete
    3. Composite development indicators, not complete
    4. Comparing and evaluating development indicators, not complete
  9. 4.9Barriers to economic growth and/or economic development, 0 of 4 subtopics complete
    1. Poverty traps and cycles, not complete
    2. Economic barriers, not complete
    3. Political and social barriers, not complete
    4. Weighing barriers, not complete
  10. 4.10Economic growth and/or economic development strategies, 0 of 5 subtopics complete
    1. Trade strategies, diversification and social enterprise, not complete
    2. Market-based and interventionist strategies, not complete
    3. FDI, foreign aid and multilateral development assistance, not complete
    4. Institutional change, not complete
    5. Evaluating strategies and SDG progress, not complete

Masthead

The global band in each theme. Its destinations are static here; the theme switch is the real control and changes this page's theme.

Cinematic Luxury

data-theme="cinematic"
IB Vault
Theme

Luxury Minimalist

data-theme="minimal"
IB Vault
Theme