Phase 1 · Measurement Only
Design system audit
These 14 variables already exist in the file and appear as UI (text, surfaces, buttons, borders). High-count illustration colours such as #334ACC and the cyan glow ramp are not UI tokens.
Reverse-engineered from the existing Platformz website frames. Existing pages are the source of truth. Nothing on those pages was redesigned.
File · New Platformz Website
Artboard · 1920 desktop
Typeface in product · Goga Test
01 COLOUR
Brand colours from Collection 1
Blue
btn_blue1
btn_blue2
btn_blue3
Dark Blue
#115BE6 · Primary
#0258D1 · CTA gradient start
#0672E4 · CTA gradient end
#0782F6 · CTA stroke
#04152E · Nav / titles
Medium Dark Blue
Semi Medium Dark Blue
form field
White
Canvas
#1F3356 · Body default
#3D5277 · Body secondary
#8196BC · Placeholder
#FFFFFF · Surface / inverse
#FCFDFE · Page background
Soft White
Light Border
Very Light Blue
Faded Blue
#F7FAFC · Soft surface
#F4F6FF · Wash border
#C9D3E4 · Input border
#9FADC7 · Muted line
Gradients that function as tokens
Primary button
Feature / contact card
Footer CTA banner
#0258D1 → #0672E4
#115BE6 → #3E96E9
#1E45E2 → #3383F2
Status colours: no product success or warning palette was found. #F46A6A appears only on 84-ERROR SYNTAX. Google red/yellow/green are social-button marks, not Platformz tokens. Do not invent the rest.
02 TYPOGRAPHY
Recommended type scale
Product typeface is Goga Test (Regular, Medium, Semibold, Bold, Light). This audit board uses Inter at the same sizes because Goga Test is not available to the plugin. Live pages remain Goga Test.
H1 · heading1 · Goga Test Bold 84 / 86px · Page / section hero
The operating foundation behind complex businesses.
H2 · heading2 · Goga Test Bold 64 / 64px · Auth, Search, FAQ group
The operating foundation behind complex businesses.
H3 · heading3 · Goga Test Semi Bold 40 / AUTO · Large subhead
The operating foundation behind complex businesses.
H4 · heading4 · Goga Test Semi Bold 30 / 37px · Section label
The operating foundation behind complex businesses.
Eyebrow · eyebrow text · Goga Test Medium 30 / 38px · Eyebrow / legal H2
The operating foundation behind complex businesses.
H5 · heading5 · Goga Test Semi Bold 24 / AUTO · Card title, FAQ question
The operating foundation behind complex businesses.
Title 22 · footer_heading · Goga Test Medium 22 / AUTO · Footer column / in-page label
The operating foundation behind complex businesses.
Title sm · heading6 · Goga Test Semi Bold 20 / 28px · Compact title
The operating foundation behind complex businesses.
Body · paragraph · Goga Test Regular 18 / 26px · Primary reading text
The operating foundation behind complex businesses.
Button · buttontxt · Goga Test Semi Bold 18 / AUTO · All button labels
The operating foundation behind complex businesses.
Small · smalltext · Goga Test Regular 16 / 22px · Supporting copy, lists
The operating foundation behind complex businesses.
Nav · topnavtext · Goga Test Medium 14 / AUTO · Header navigation
The operating foundation behind complex businesses.
Caption · microtext · Goga Test Regular 14 / 22px · Fine print
The operating foundation behind complex businesses.
03 SPACING
Underlying scale, not every observed value
No spacing variables exist. Auto-layout gaps cluster on a 2px/4px hybrid. 10 and 14 are structural to buttons and lists — do not flatten them into 8/16.
10
12
14
16
20
24
30
40
55
70
90
Recurring padding: buttons 18/22 (body) and 14/22 (header) · inputs 15/20 · FAQ 20 · marketing cards 40/30 or 40/33 · catalog cards 40 · cookie bar 15/45.
04 LAYOUT
Desktop containers. No 12-column grid.
Every product page is 1920 wide on Canvas #FCFDFE. There are no mobile or tablet frames. Alignment is by repeated max-widths, not a layout grid style.
page
1920 px
Artboard
chrome
1808 px
Header · 56px inset
1680 px
Feature rows
Centred headings
narrow
FAQ
read
1160 px
Legal
auth
612 / 482 px
Sign-in column / fields
Shared chrome: header 1809×53 at x=56, y=51. Footer 1920×1234 full-bleed. Hero split on Platform/About/Blueprint: left copy ~940, right image ~750–1010. Home is a custom 10,544px scroll and should not set the universal section spacer.
05 VISUAL TOKENS
wide
1448 px
default
1200 px
Radius, stroke, controls, elevation
Radius scale
5 px
10 px
15 px
20 px
25 px
Buttons
Inputs
Marketing cards
FAQ row
Catalog cards
Buttons and inputs
Strokes: 0.7px on buttons, 1px on fields. Shadows: card 0 4px 14px rgba(61,82,119,0.05) and glow 0 0 11px 2px rgba(6,114,228,0.06). Icons: 18, 24, 53, 82, 110. Button heights in file: 53 / 61 / 66 — standardise to 53 chrome and 61 body. Input heights 52 vs 55 — standardise to 55.
06 INCONSISTENCIES VS PRESERVE
Same component vs page-family difference
2. Filled button height 53 / 61 / 66 — chrome 53, body 61.
2. Interior marketing: left ~940 copy / right image.
3. Input height 52 vs 55; placeholder #8196BC vs #8E9AAE.
3. Auth / Search 64 Bold primary-blue titles and 612/482 column.
4. H1 tracking −3% vs 0; line-height 80 / 86 / 88.
4. Legal 1162 measure, #3D5277 H1, Medium 30 titles, gap 66.
5. Header inset 56 left vs 55 right.
5. FAQ 1200 accordion, radius 20, H5 in #3D5277.
6. Body 18 line-height 24 / 25 / 26 — use 26.
6. Contact path cards + 750px inquiry rows — not a generic form.
7. Colour variables often unbound; same hexes used raw.
7. Catalog cards radius 25 vs About/Contact radius 15.
8. Unstyled text duplicating styles with small numeric drift.
8. Hero H1 colour may be dark, secondary, or primary by template.
07 INSUFFICIENT EVIDENCE
Standardise
1. Secondary button stroke 0.7 vs 1.0 — pick 0.7.
Preserve
1. Home as a long custom scroll with centred 84 titles.
Do not invent these
Mobile or tablet breakpoints · Hover / focus / disabled / loading for buttons and fields · Success and warning colours · Dark mode · Any type family other than Goga Test · A 12-column grid · Elevation beyond the two recurring shadows · A single image ratio · Semantic meaning of #FF7B57 · Whether #F46A6A is the agreed error colour beyond one auth state · Motion / duration
08 RECOMMENDED STANDARDISATION
For a later token pass. Does not change existing pages.
1. Bind UI colour to the 14 existing variables. Add only: CTA gradient, card gradient, reconcile #F6F9FF with Soft White / Light Border, and #F46A6A if error is confirmed.
2. Collapse text to the scale in section 02. Rename footer_heading / footerlink so they are not footer-only.
3. Spacing tokens: 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 30, 40, 55, 70, 90.
4. Containers: 1920 / 1808 / 1680 / 1448 / 1200 / 1160 / 612.
5. Radius 5 / 10 / 15 / 20 / 25. Stroke 0.7 and 1.
6. Buttons: height 53 chrome, 61 body; one secondary stroke.
7. Fields: 55 / r10 / #C9D3E4 / placeholder #8196BC.
8. Componentise header, footer, primary/secondary/text buttons, input, select, accordion row, 3-up card, catalog card, cookie bar.
9. Keep illustration colours and blurs in a separate atmosphere collection.
10. Leave Home, Legal, Auth, FAQ, and Contact as distinct layouts on the same tokens.
Phase 1 is measurement only. Existing Figma pages remain the source of truth until a later phase binds tokens and components back to these frames.
Turn operating complexity into a clear blueprint
Tell us what you need to connect, launch, replace, or scale. We will review the business need, current systems, risks, priorities, and the best next step.