Home — Türkiye's waste in figures
Page: /
The national total (34.4 Mt) became the one hero; every share got a 0–100% meter, recycling shows the 60% target for 2035, and unit labels grew to a readable size.
Skills applied
BeforeAfterDesign system · audit
190 infographic and slide skills, applied to every page
We collected 190 rules for charts, infographics and slides from public agent-skill collections, audited all 33 pages and the admin panel against them, fixed what broke them, and measured again with the same script.
- skills
- 190
- fixed this round
- 56
- already met
- 86
- standing rules
- 48
- sources
- 10
Before and after, measured the same way
Automatic checks on 33 pages at desktop (1366px) and phone (390px) width. Lower is better.
| Check | Before | After | Change |
|---|---|---|---|
| Text below 4.5:1 contrast | 3,402 | 138 | -96% |
| Text under 11px | 196 | 17 | -91% |
| Text hidden by animation | 106 | 0 | -100% |
| Wrong-language labels | 44 | 0 | -100% |
| Charts without a name | 2 | 0 | -100% |
| Emoji used as icons | 4 | 0 | -100% |
| Horizontal overflow (px) | 6 | 6 | 0% |
| Big numbers without a source | 14 | 14 | 0% |
Scores come from toolbox/pw/dv-audit.mjs. Contrast counts every text element (a repeated date label counts once per use).
What changed — drag to compare
Each pair is the same element, same screen size, captured before and after.
BeforeAfterTurkey food-waste map
Page: /
Green → yellow → orange (a diverging scheme) became one green ramp from light to dark, legend breaks are rounded, the legend text is solid instead of faded, and the selected province has an amber outline that shows on every shade.
Skills applied
BeforeAfterPersian page — tiles
Page: /fa
English mini-labels ("KNOWLEDGE GRAPH", "PROVINCES 81") were replaced with Persian ones, the decorative bars became a real chart of the 12 provinces with the most food waste (with a caption and a screen-reader name), bar widths follow the real counts, and the shimmer on data is gone.
Skills applied
BeforeAfterPersian page — solution steps
Page: /fa
The English eyebrow ("SMART WASTE SCALES") became a Persian kicker, "step 1 of 4", in Persian digits; the page is now served as lang=fa dir=rtl from the first byte.
Skills applied
BeforeAfterIran — waste by city
Page: ir.atikova.com
The city bars are sorted from most to least, and the map bubbles are now area-true: before, a constant was added to the radius, which made small cities look far bigger than they are.
Skills applied
BeforeAfterIstanbul waste map — legend
Page: /maps/istanbul-waste-map
The four legend numbers were spread evenly and did not match the five colour steps; now each rounded break sits on its own boundary. Emoji were removed from the side-panel headings and the map has an accessible name in each language.
Skills applied
BeforeAfterLast-minute price chart
Page: /last-minute
The price labels now carry their currency (TL; لیر in Persian) and the axis text is at least 11px.
Skills applied
BeforeAfterInsights — contrast
Page: /insights
Muted greys that failed WCAG AA (as low as 2.7:1) were darkened to at least 4.5:1, keeping their hue; 147 text colours changed across the site.
Skills applied
BeforeAfterDashboard — small text
Page: /dashboard
Text from 7 to 10.5px was raised to an 11px floor (303 rules site-wide) and the waving-hand emoji left the greeting.
Skills applied
BeforeAfterAdmin — outreach report
Page: /admin
The coloured stripes over the KPI tiles are gone, numbers are in ink (red only when something bounced), the organisation-type and language bars use one green instead of eight colours, and the heading emoji were removed.
Skills applied
BeforeAfterThe catalog
190 shown
- S001
Know the audience, goal and context
RuleBefore drawing, write down who reads it, what they should do afterwards and where they will see it.
- S002
State the insight in the title
RuleTitles state the finding ("81% ends up in landfill"), not just the topic ("Landfill").
- S003
Five-second takeaway
MetA reader should get the main point within five seconds of seeing the graphic.
- S004
One hero element
FixedEach infographic has one dominant element; everything else supports it.
- S005
Pitch 2–3 story angles first
RuleSketch two or three ways to tell the story and pick one before building.
- S006
One chart, one job
RuleEach chart answers one question; split charts that try to answer two.
- S007
Choose the layout family from the data
RuleComparison, flow, layers, overlap or ranking: pick the structure that matches the relation in the data.
- S008
Every visual has a job
FixedA visual must compare, locate or sequence something; remove visuals that only decorate.
- S009
Give every number context
FixedPair a number with a comparison, denominator or target — e.g. 36% recycled against the 60% goal for 2035.
- S010
Specific, not generic
MetUse the real city, year and unit instead of stock icons and generic phrases.
- S011
Never invent statistics
MetEvery figure comes from a cited source or is clearly labelled as an estimate.
- S012
Source next to the figure
MetThe source link sits beside the number, not only in a footer.
- S013
Label illustrative values
MetDemo or modelled values carry a visible "estimate" or "demo" tag.
- S014
State the denominator
MetPercentages say "of what": 36% of municipal waste, not just 36%.
- S015
Name the uncertainty
MetUse ranges or "~" when a value is uncertain; never imply false precision.
- S016
Round to meaningful precision
FixedLegend breaks and labels use about two significant figures (48,000, not 48,141).
- S017
Tell missing apart from zero
RuleAreas with no data get a distinct neutral fill and say so in the legend.
- S018
State the normalisation
MetSay whether a map shows totals or per-capita values, on the toggle or the legend.
- S019
Keep provenance
MetStore publisher, year and link for each number in the data file, not in the layout.
- S020
Same model, same number
FixedA figure shown on two pages comes from the same data module.
- S021
No trust theatre
MetNo fake partner logos, testimonials or badges; only real partners are shown.
- S022
Date the data
MetShow the year of each statistic.
- S023
Consistent units
MetUse one unit per comparison (tonnes a year across a whole chart).
- S024
Units on axes and prices
FixedEvery axis and price label carries its unit (TL, tonnes/day).
- S025
Pick the chart from the question
RuleCompare → bars; change over time → line; part of a whole → stacked bar; place → map.
- S026
Sorted bars for rankings
FixedRanked lists are sorted largest first.
- S027
Big numbers: four at most
MetUse big-number callouts for no more than four headline figures per view.
- S028
A meter for every share
FixedA percentage gets a 0–100 track so its size is seen, not only read.
- S029
Mark the target on the meter
FixedWhen a goal exists, mark it on the same scale as the value.
- S030
Donuts: five segments or fewer
MetDonuts and pies stop at five slices; beyond that use bars.
- S031
No two-slice pies
MetTwo values read better as one number or a single meter.
- S032
No radar charts
MetRadar charts distort area; use bars or small multiples.
- S033
No 3D charts
Met3D perspective changes how big values look.
- S034
No gauges
MetGauges waste space and are hard to compare; use a meter bar.
- S035
Lines: about 2px, labelled at the end
MetLines are thin and named at their end rather than in a legend.
- S036
Area fill at 10–15%
MetArea under a line is a light tint that never hides the data.
- S037
Sparklines beside the number
RuleTiny trend lines sit next to the number they explain.
- S038
Step flows of 3–6 steps
MetProcesses show three to six numbered steps; longer ones get grouped.
- S039
Choropleths for regional values
MetShade regions by a value with a stepped legend.
- S040
Comparisons on one scale
MetBefore/after and A/B views share one scale and one frame.
- S041
Bar length equals the value
FixedBars start at zero and their length is proportional to the value.
- S042
Area ∝ value: radius ∝ √value
FixedBubble area encodes the value; no constant offset is added to the radius.
- S043
Mini charts from real data
FixedDecorative fake bars are replaced by real values (here: food waste of the 12 largest provinces).
- S044
Bars start at zero
MetNever cut off the bottom of a bar axis.
- S045
No dual axes
MetTwo y-axes suggest false correlations; use two charts.
- S046
Small multiples share a scale
MetRepeated mini charts use the same axis range.
- S047
Round tick values
MetAxis ticks fall on round numbers.
- S048
One-way data, one-hue ramp
FixedData that only grows uses one hue from light to dark; diverging colours only around a meaningful midpoint.
- S049
Legend numbers on their boundaries
FixedEach legend number sits exactly where its colour step starts.
- S050
Quantile or log steps for skewed data
MetWhen a few values dominate, use quantile or log steps and say so.
- S051
Time axes evenly spaced
MetSpace a time axis by time, not by the number of data points.
- S052
Honest aspect ratio
MetNever stretch a map or chart to fill a box.
- S053
Direct labels over legends
MetPut names next to the marks they describe.
- S054
Label what the reader needs
FixedAxes, units, sources and the highlighted value are all labelled.
- S055
Text in ink, not series colour
FixedLabels and numbers use the ink colour; colour belongs to the marks.
- S056
Inside a bar only if it fits
MetOtherwise place the label at the end of the bar.
- S057
Nothing only in a tooltip
MetKey values are visible without hovering.
- S058
Compact numbers, one decimal for %
MetWrite 1.2M rather than 1,203,441; keep percentages to one decimal.
- S059
Tabular figures
FixedUse tabular numerals in tables, legends and KPI tiles so columns line up.
- S060
Highlight the key value
FixedOne mark is emphasised; the rest stay quiet.
- S061
Every chart has a caption
FixedSay what, where, when and the source under the chart.
- S062
Name charts for screen readers
FixedSVG charts get role="img" and an aria-label in the page language.
- S063
Kicker above the title
MetA short kicker sets the context above a headline.
- S064
No micro-label noise
FixedRemove tiny repeated labels that add nothing.
- S065
Quiet chart frame
MetGridlines and axes are thin and light; the data is darker.
- S066
Text contrast at least 4.5:1
FixedNormal text reaches WCAG AA 4.5:1 against its background.
- S067
Large text and graphics 3:1
FixedLarge text, icons and chart marks reach at least 3:1.
- S068
Never colour alone
MetPair colour with labels, position or pattern.
- S069
Colour-blind-safe palettes
FixedPrefer Okabe-Ito, Tol or single-hue ramps; avoid red-green pairs.
- S070
Ink, paper and one accent
FixedOne accent colour; a second one only for a truly different category.
- S071
60-30-10 balance
MetDominant, secondary and accent colours in roughly that proportion.
- S072
Palette from the topic
MetChoose colours from the subject — greens and soil tones for food waste and compost.
- S073
Consistent category colours
MetA category keeps the same colour in every chart.
- S074
No purple AI gradient
MetAvoid the default purple-to-blue gradient look.
- S075
No neon
MetNo saturated neon colours on dark backgrounds for content.
- S076
Don't fade text with opacity
FixedUse a solid muted colour that passes contrast instead of lowering opacity.
- S077
Selection visible on every fill
FixedHover and selected outlines contrast with both the lightest and darkest fills.
- S078
Five hues at most
FixedToo many colours make a view noisy; cap it at about five hues.
- S079
Warning colours only for warnings
FixedRed and amber appear only when something needs attention.
- S080
Text floor of 11px
FixedNo readable text below 11px on screen (303 smaller rules were raised).
- S081
A clear type scale
RuleSlides: title 36–44pt, header 20–24, body 14–16, captions 10–12.
- S082
Largest up to 8× the body
MetA hero number can be up to about eight times the body size.
- S083
At least three sizes
MetUse three or more distinct sizes to build hierarchy.
- S084
One family, two weights
RuleInfographics use one sans family with at most two weights.
- S085
Small text weight ≥ 400
MetNever use thin weights at small sizes.
- S086
Fluid sizes with clamp()
MetHeadline sizes scale with the viewport inside a clamp().
- S087
Start-aligned body text
MetLong text is aligned to the start, not centred.
- S088
Avoid generic display type
MetChoose display type with character instead of the default.
- S089
Strong type hierarchy
MetHeadings, labels and body text differ clearly in size or weight.
- S090
Two or three fonts at most
MetLimit the number of font families on a page.
- S091
Persian text in a Persian face
FixedLatin display fonts are not applied to Persian words.
- S092
Readable line length
MetKeep body lines around 45–80 characters.
- S093
Units small but readable
FixedUnit labels beside big numbers stay at 11.5px or more.
- S094
Hierarchy by size, colour and position
MetLead the eye with size, contrast, position and whitespace.
- S095
F and Z reading paths
MetPut key items where the eye lands first — mirrored on right-to-left pages.
- S096
About 60% visual, 40% text
RuleInfographics lean on visuals; text supports them.
- S097
One dense zone, one empty zone
RuleContrast density so the eye has somewhere to rest.
- S098
Card grids ≤ ⅓ of the canvas
RuleDon't fill a whole view with equal cards.
- S099
Something crosses a boundary
MetLet one element break the grid for energy.
- S100
Light and dark bands
MetAlternate light and dark sections instead of one flat background.
- S101
Consistent spacing
MetOne spacing scale; equal gaps between equal things.
- S102
Enough whitespace
MetCrowding hides hierarchy; give content room.
- S103
Align to a grid
MetFix stray offsets; edges line up.
- S104
Density matches the purpose
MetDashboards can be dense; story pages are airy.
- S105
Bento grids need rhythm and content
FixedVary tile sizes on purpose; every tile carries real content.
- S106
No horizontal overflow on mobile
RuleNothing is wider than the screen at 390px (one page, /blog, still overflows by 6px).
- S107
Thumbnail test at 240px
RuleShrink to 240px wide: the main message must survive.
- S108
Content visible without animation
FixedReveal effects fall back to visible: after a timeout, when printing and without JavaScript.
- S109
A reduced-motion path
RuleRespect prefers-reduced-motion for every animation.
- S110
Hide decoration from screen readers
FixedPurely visual meters and decorative SVG get aria-hidden; the number is read instead.
- S111
lang and dir match the page
FixedThe html lang and dir attributes match the language of the content.
- S112
Visible focus
RuleKeyboard focus is clearly visible on every control.
- S113
Touch targets ≥ 24px
RuleButtons and clickable shapes have usable hit areas.
- S114
Alt text for images
MetInformative images have alt text; decorative ones have an empty alt.
- S115
Headings in order
MetUse h1 → h2 → h3 without skipping levels.
- S116
Tables have header cells
MetData tables use th cells for their headers.
- S117
Don't depend on hover
MetEverything works by touch and keyboard too.
- S118
Readable when printed
FixedHidden-until-scrolled content is shown when the page is printed.
- S119
Status in words and colour
MetStatus pills say the status in words, not only by colour.
- S120
Name interactive maps
FixedInteractive maps get an accessible name in the current language.
- S121
Errors explained in words
MetError messages say what went wrong, in the user's language.
- S122
No wrong-language text
FixedEach language version shows only that language (names and acronyms like COP31 excepted).
- S123
Isolate mixed-direction text
FixedWrap embedded opposite-direction runs in <bdi>.
- S124
Logical properties mirror layouts
FixedUse inline-start/end instead of left/right so layouts flip in RTL.
- S125
Number axes stay left-to-right
MetTime and number axes keep LTR order on RTL pages; their labels are translated.
- S126
Persian digits on Persian pages
FixedUse ۰–۹, ٫ and ٪ inside Persian text.
- S127
Localised currency
FixedTL in English and Turkish, لیر in Persian.
- S128
Place names in the page's script
FixedUse the common local form of a place name where one exists (استانبول, not İstanbul).
- S129
Same geometry in every language
MetTranslating labels never changes a chart's scale.
- S130
Room for longer translations
RuleLeave about 30% spare width; Turkish and Persian labels often run longer.
- S131
Locale number formats
Met1,234.5 in English, 1.234,5 in Turkish, ۱٬۲۳۴٫۵ in Persian.
- S132
Language set in the first HTML
FixedThe server already sends the right lang/dir, so search engines and the first paint are correct.
- S133
One language per image
RuleImages that contain text are made separately per language.
- S134
Finite CSS builds
FixedAnimations end; data never loops endlessly.
- S135
Build order: place → structure → data → hero
RuleAnimate the context first and the key number last.
- S136
Equal durations for comparable marks
RuleBars being compared grow at the same speed.
- S137
Count-ups land on the exact value
MetAnimated numbers finish exactly on the real figure.
- S138
Never animate an axis
MetAxes and scales stay still while data moves.
- S139
Motion for meaning, not spectacle
FixedRemove motion that explains nothing.
- S140
Reveal fallback after 2.5s
FixedScroll reveals show everything if the observer never fires.
- S141
No shimmer on real data
FixedLoading shimmer is for placeholders, not for actual values.
- S142
Marquees are decoration only
MetNever put essential information in a scrolling marquee.
- S143
Stop loops for reduced motion
RuleLooping effects pause when the user prefers reduced motion.
- S144
One dominant colour (60–70%)
RuleOne colour dominates the deck.
- S145
Dark/light sandwich
RuleDark title and closing slides, light content slides.
- S146
One visual motif
RuleRepeat one shape or treatment through the deck.
- S147
Every slide has a visual
RuleNo text-only slides.
- S148
Stat callouts at 60–72pt
RuleHeadline numbers are set big.
- S149
0.5-inch safe margins
RuleContent stays inside the safe margins.
- S150
No accent lines under titles
MetDecorative underlines look templated.
- S151
No decorative stripes
FixedColour stripes that carry no meaning are removed.
- S152
Pitch order
RuleCover → problem → market → solution → why now → traction → model → go-to-market → team → competition → ask.
- S153
Skip missing data, never fake it
MetLeave a slide out rather than invent traction.
- S154
Giant numbers only for market and traction
RuleDon't inflate every slide with huge numbers.
- S155
Executive summary second
RuleConsulting-style decks give the answer up front.
- S156
Two data slides in a row at most
RuleBreak long runs with a structural slide.
- S157
Three same-theme slides in a row at most
RuleAlternate themes to keep a rhythm.
- S158
Squint test
RuleBlur the design: its structure should still say something.
- S159
Template test
RuleIf it could be any company's page, make it more specific.
- S160
No identical cards on a flat background
RuleAvoid rows of identical cards on one flat colour.
- S161
No emoji as icons
FixedHeadings and labels use real icons or none.
- S162
Avoid headline + three cards
RuleBreak the default hero-plus-three-cards pattern.
- S163
No glassmorphism
MetFrosted-glass panels hurt contrast.
- S164
No repeated eyebrow headers
FixedDon't put the same kind of small label over every section.
- S165
Avoid zigzag monotony
RuleEndless alternating image/text rows get tiring; vary them.
- S166
Avoid the default centred hero
MetA centred headline on a gradient is the generic AI default.
- S167
One primary action per view
RuleDon't repeat the same call-to-action button over and over.
- S168
Not everything in a card
RuleAvoid boxing every piece of content.
- S169
No copy-shaped decoration
MetFake text lines and lorem shapes are removed.
- S170
No CSS counterfeit charts
FixedDon't fake charts or screenshots with CSS shapes; draw real data.
- S171
Content over decoration
FixedOrnaments that compete with the data are cut.
- S172
Quality gate: 13 of 16
RuleScore eight criteria from 0 to 2; ship only at 13 or more.
- S173
Look at your own render
MetCheck the rendered page, not only the code.
- S174
Before/after screenshots
MetCapture the same views before and after each change.
- S175
No overlapping text
RulePreflight that no labels sit on top of each other.
- S176
No clipped text
MetText never runs out of its box.
- S177
Measure overflow after rendering
MetCompare scroll width with the viewport at desktop and phone sizes.
- S178
Check the picture and the code
MetAutomatic checks plus a human look.
- S179
Red-team the numbers
RuleAsk what a sceptic would challenge in each figure.
- S180
Mobile legibility
FixedCheck every chart at 390px wide.
- S181
Originality
RuleScore how far a design is from a stock template.
- S182
Evidence integrity
MetEvery number can be traced to its source.
- S183
Topology fit
RuleThe layout matches the relation in the data.
- S184
Same audit on every page
MetRun one script across all pages at desktop and phone sizes.
- S185
Fix, then re-measure
MetReport before and after numbers measured the same way.
- S186
Declarative templates
RuleDescribe an infographic as structure plus items so it can be regenerated.
- S187
Separate structure from item style
RuleKeep the layout (list, sequence, comparison) apart from how each item looks.
- S188
Ten-point critique
MetCheck AI cliché, hierarchy, colour count, spacing, whitespace, fonts, alignment, decoration, neon and density.
- S189
Admin views follow the same rules
FixedInternal dashboards get the same chart rules as public pages.
- S190
Keep a living catalog
MetTrack each rule, where it applies and whether it passes.
Sources
Rules are paraphrased in our own words. guizang-ppt-skill is AGPL, so only its ideas are summarised.
- OrRon / EpicInfographicsMIT · 52 skills
- aosoficial / agent-infographic-skillMIT · 24 skills
- ConardLi / garden-skills (web-design-engineer)MIT · 25 skills
- K-Dense-AI / scientific-agent-skills (infographics, scientific-visualization)MIT · 36 skills
- anthropics / skills (pptx, frontend-design, canvas-design)see repository · 14 skills
- SlideSpeak / slide-design-skillMIT · 5 skills
- op7418 / guizang-ppt-skill (ideas paraphrased)AGPL-3.0 · 8 skills
- antvis / InfographicMIT · 3 skills
- W3C WCAG 2.2 (cited by the skills above)W3C · 11 skills
- Atikova house rule (from the audit of this site)— · 12 skills