https://dsyn.studio Measurements behind the tools — colour, contrast, type and files. en-GB Thu, 08 Oct 2026 00:00:00 GMT https://dsyn.studio/blog/code-screenshot-people-can-read https://dsyn.studio/blog/code-screenshot-people-can-read Thu, 08 Oct 2026 00:00:00 GMT Paste the code into a code-to-image tool, pick a theme, and check its colours against their background before exporting: most syntax themes set comments under 4.5:1. Lift the failing colours with their hue kept, export an SVG with real text for slides or a PNG at 2× for screens, and post the alt text and the code as text alongside the image. https://dsyn.studio/blog/convert-png-to-svg https://dsyn.studio/blog/convert-png-to-svg Thu, 08 Oct 2026 00:00:00 GMT Trace it: choose what kind of image it is (logo, icon, line art, pixel art), lock the output to your exact hex colours, and check the result against the original before downloading. A good trace of a logo is a few kilobytes with a handful of paths. If the image is a photograph, keep the JPEG or WebP: tracing one gives a larger file that looks posterised. https://dsyn.studio/blog/convert-svg-to-png-without-losing-fonts https://dsyn.studio/blog/convert-svg-to-png-without-losing-fonts Thu, 08 Oct 2026 00:00:00 GMT Check the SVG for anything it loads from elsewhere before converting: web fonts, linked images, sprites in other files and stylesheets. A browser drawing an SVG as an image loads none of them, so embed them as data: URLs or outline the text first. Then set the size in pixels, or as a print size at a ppi, and make sure the ppi is written into the PNG, because browsers write none. https://dsyn.studio/blog/css-gradient-vivid-readable-no-banding https://dsyn.studio/blog/css-gradient-vivid-readable-no-banding Thu, 08 Oct 2026 00:00:00 GMT Write the gradient with in oklch after its direction, so stops from opposite sides of the colour wheel do not meet in grey, and give older browsers baked hex stops behind an @supports test. Then measure text at the least legible pixel under it, not the average, and fix failures with a darker stop, a different text colour or a scrim. Finally count the 8-bit bands along its length and add 2–4% grain if they are wide. https://dsyn.studio/blog/css-shadows-and-glass-visible-readable https://dsyn.studio/blog/css-shadows-and-glass-visible-readable Thu, 08 Oct 2026 00:00:00 GMT Build shadows as layers on one light angle, then measure the edge: a soft shadow on a white page gives about 1.1 to 1.6:1, so a control needs a 1px ring to reach 3:1. In dark mode, lift the surface and ring it instead of raising the shadow's opacity, which measures 1.00:1. For glass, measure text at its worst pixel through the blur, and give browsers without backdrop-filter a stronger tint. https://dsyn.studio/blog/find-the-name-of-a-color https://dsyn.studio/blog/find-the-name-of-a-color Thu, 08 Oct 2026 00:00:00 GMT Enter the hex code in a colour name finder that shows distance, not just a name. Almost no colour has a name of its own, so every name belongs to a nearby colour. Read the ΔE2000 beside it: under 1 is indistinguishable, 2 to 5 names a neighbour, past 10 a different colour. #2563EB is the survey's azul at 1.95, and CSS royalblue at 2.53, which is visibly different. https://dsyn.studio/blog/focus-indicator-that-passes-wcag https://dsyn.studio/blog/focus-indicator-that-passes-wcag Thu, 08 Oct 2026 00:00:00 GMT Draw the ring with outline on :focus-visible, at least 2px thick and offset from the control, in a colour that reaches 3:1 against every background it sits on. For any solid background, pair it with a second colour at 9:1 or more. Level AA needs it visible and at 3:1 against its neighbours; the 2px perimeter and 3:1 before-and-after change of 2.4.13 are Level AAA. Keep an outline, because box-shadow disappears in forced colours mode. https://dsyn.studio/blog/frame-a-screenshot-without-losing-sharpness https://dsyn.studio/blog/frame-a-screenshot-without-losing-sharpness Thu, 08 Oct 2026 00:00:00 GMT Add the screenshot to a beautifier that reads its pixel density, cover private details with solid or frosted boxes that do not read the pixels underneath, then export at the density it was taken at: 2× for a Retina Mac capture, which carries 144 ppi. At that scale every pixel goes into the file unchanged; at any other scale it is resampled, which softens small text. https://dsyn.studio/blog/resize-photo-to-exact-size https://dsyn.studio/blog/resize-photo-to-exact-size Thu, 08 Oct 2026 00:00:00 GMT Decide which size you actually need: a width in pixels for a screen, a longest side for a mixed batch, centimetres at a ppi for print, or a byte limit for an upload form. Set that one rule, resize every photo with it, and check three things in the result: it is the right way up, its colours have not shifted, and its location data is gone. Online resizers measured in October 2026 failed at least one of those on an ordinary phone photo. https://dsyn.studio/blog/social-media-image-sizes-from-the-source https://dsyn.studio/blog/social-media-image-sizes-from-the-source Thu, 08 Oct 2026 00:00:00 GMT Use the size the platform itself publishes, not a figure copied between blogs: Instagram allows posts up to 1080 × 1440 (3:4), a Facebook Page cover is 851 × 315, an X header 1500 × 500, a LinkedIn background 1584 × 396 and a YouTube thumbnail 3840 × 2160 under 2 MB from a phone. Crop each around the subject, keep text inside the published safe zones, and check the file against the upload limit before posting. https://dsyn.studio/blog/svg-background-readable-and-small https://dsyn.studio/blog/svg-background-readable-and-small Thu, 08 Oct 2026 00:00:00 GMT Generate the shapes from a seed you keep, so the same link redraws the same file, and keep them out of the headline's way. Measure the text against the least legible pixel behind it, not the average, and add a scrim layer where it fails. Run the SVG through SVGO, inline it as a percent-encoded data URI while it stays under about 4 KB, and use whole-pixel tiles with edge copies so a pattern repeats without a seam. https://dsyn.studio/blog/count-words-and-characters https://dsyn.studio/blog/count-words-and-characters Wed, 07 Oct 2026 00:00:00 GMT Paste the text into a counter that states its rules. A sound count treats “well-known”, “don’t”, “3.14” and a link as one word each, splits Chinese and Japanese into real words rather than whole lines, and counts 👍🏽 as one character, not four. For reading time, 238 words a minute is the measured average for adults reading English non-fiction; reading aloud averages 183. https://dsyn.studio/blog/cover-letter-that-matches-your-resume https://dsyn.studio/blog/cover-letter-that-matches-your-resume Wed, 07 Oct 2026 00:00:00 GMT Copy your resume’s header, fonts, accent colour and margins into the letter, so the two read as one application. Then write four short paragraphs: the job and one strong reason, two or three results with figures, why this employer, and a request for a conversation. Keep it to one page, about 250 to 400 words; on US Letter with a large centred name, a page holds only about 320 words. https://dsyn.studio/blog/identify-a-font-from-an-image https://dsyn.studio/blog/identify-a-font-from-an-image Wed, 07 Oct 2026 00:00:00 GMT Pick one line of text, read its letters, and compare each letter with the same letter in a catalogue of fonts. The Font finder does all three in your browser against 1,956 Google Fonts families, with nothing to type. On test screenshots the right family was in the top five 87.3% of the time; on small, blurry text only 56.9%, and a commercial font can only come back as its closest free relative. https://dsyn.studio/blog/test-what-a-parser-reads-from-your-resume https://dsyn.studio/blog/test-what-a-parser-reads-from-your-resume Wed, 07 Oct 2026 00:00:00 GMT Open your resume in a checker that shows the extracted text beside the page, or run pdftotext on it, and read the output top to bottom. Your name, email and phone should come first, every job title should sit next to its dates, and no sidebar line should land inside a job. Odd characters, letters spaced apart or a jump between columns are the places a parser will misfile you. https://dsyn.studio/blog/title-case-apa-chicago-ap https://dsyn.studio/blog/title-case-apa-chicago-ap Wed, 07 Oct 2026 00:00:00 GMT Capitalise the first word and every major word; the styles differ on the small ones. APA and AP lowercase articles and conjunctions and prepositions of three letters or fewer, and AP also capitalises the last word. Chicago's 18th edition (2024) lowercases articles, and, but, for, or, nor, “to”, “as” and prepositions of up to four letters, so “with” is lowercase in Chicago and capitalised in APA and AP. https://dsyn.studio/blog/ats-friendly-resume-format https://dsyn.studio/blog/ats-friendly-resume-format Tue, 06 Oct 2026 00:00:00 GMT An ATS-friendly resume is one a tracking system can turn back into fields without losing any: real text rather than an image, one column in reading order, standard section headings, dates on the job line, and contact details in the page body rather than the document header. Most systems do not reject resumes on their own; the risk is a parser scrambling a two-column layout so a recruiter's search never finds you. https://dsyn.studio/blog/cv-vs-resume https://dsyn.studio/blog/cv-vs-resume Tue, 06 Oct 2026 00:00:00 GMT It depends on the country. In the US and Canada, a resume is the one- or two-page document for most jobs, and a CV is a full academic or scientific record with no length limit. In the UK, Ireland and most of Europe, "CV" is the everyday word for that short job document, and Australians and New Zealanders use both words for it. Academic CVs everywhere are long and list every publication. https://dsyn.studio/blog/how-long-should-a-resume-be https://dsyn.studio/blog/how-long-should-a-resume-be Tue, 06 Oct 2026 00:00:00 GMT One page suits students and people with under about five years of experience. Two pages suit most people beyond that, and recruiters prefer them: in a simulated hiring study by ResumeGo with 482 recruiters and hiring managers, two-page resumes were chosen 2.3 times as often overall, rising to 2.9 times for managerial roles. Go past two only for academic CVs, some government applications, or a senior record that genuinely needs it. https://dsyn.studio/blog/how-to-write-a-resume https://dsyn.studio/blog/how-to-write-a-resume Tue, 06 Oct 2026 00:00:00 GMT Start from the job advert and note the skills it asks for. Then write, in this order: your name, target title and one contact line; a two- or three-sentence summary; each job, newest first, with title, employer, dates and two to five results; education; and the skills the advert names. Keep it to one or two pages, proofread it aloud, and send a PDF unless the employer asks for Word. https://dsyn.studio/blog/resume-bullet-points https://dsyn.studio/blog/resume-bullet-points Tue, 06 Oct 2026 00:00:00 GMT A strong resume bullet starts with an action verb, says what you did, and ends with a measurable result: "Cut invoice errors from 6% to 1% by adding a two-step approval". Write two to five per role, keep each under about 30 words, use past tense for past jobs, and never open with "Responsible for". Where you have no exact figure, an honest estimate of scale, time or frequency still works. https://dsyn.studio/blog/resume-photo-by-country https://dsyn.studio/blog/resume-photo-by-country Tue, 06 Oct 2026 00:00:00 GMT Leave the photo off for jobs in the United States, the United Kingdom, Canada, Australia and Ireland, where employers avoid photos to reduce bias and US federal guidance says not to request one. Include one where it is customary: Germany, Austria, Switzerland, France, Spain, Italy, much of the Middle East, Japan and China. Follow the convention of the country where the job is, not the one you come from. https://dsyn.studio/blog/resume-summary-examples https://dsyn.studio/blog/resume-summary-examples Tue, 06 Oct 2026 00:00:00 GMT A resume summary is two or three sentences at the top of the page: who you are professionally, the strongest proof you have, and the role you want next. Aim for 40 to 70 words, write without "I", and include one figure. "Registered nurse with six years on acute surgical wards; cut falls on the unit by a quarter through hourly rounding" beats any list of adjectives. https://dsyn.studio/blog/resume-template-by-profession https://dsyn.studio/blog/resume-template-by-profession Tue, 06 Oct 2026 00:00:00 GMT Match the layout to how your field hires. Healthcare, finance, government and large engineering firms screen through strict applicant systems, so a plain one-column template is safest. Law and academia expect a traditional serif. Software and data suit a technical, dense page. Design, marketing and hospitality can use colour or a sidebar, provided you also have a one-column copy for job portals. Section order matters as much as styling. https://dsyn.studio/blog/resume-with-no-experience https://dsyn.studio/blog/resume-with-no-experience Tue, 06 Oct 2026 00:00:00 GMT With no work history, reorder the page: education first, then projects, then any part-time or volunteer work, then skills. Treat coursework, society roles, volunteering, freelance jobs and casual shifts as experience, each with a bullet that shows a result. Employers hiring graduates mostly look for evidence of problem-solving and teamwork, which a group project or a weekend job can supply. One full page is enough. https://dsyn.studio/blog/add-page-numbers-to-a-pdf https://dsyn.studio/blog/add-page-numbers-to-a-pdf Sat, 03 Oct 2026 00:00:00 GMT Add the PDF to the Page numbers tool, choose a position and a format, set Start on page to the first sheet that should carry a number and First number to the figure printed there, then download. The two are independent: Start on page 2 with First number 1 leaves the cover clean and prints 1 on the second sheet. In n-of-total format the total is the last number printed, so the two always agree. https://dsyn.studio/blog/complementary-triadic-analogous-colours https://dsyn.studio/blog/complementary-triadic-analogous-colours Sat, 03 Oct 2026 00:00:00 GMT Complementary colours sit 180° apart on the hue wheel, triadic colours 120° apart, analogous colours 30° either side of the base. All three describe hue only, and WCAG contrast is computed from luminance alone, so a harmony guarantees nothing about readability. In the harmony tool every rotated colour keeps the base's OKLCH lightness, so members are near 1:1 against each other: take text from a lightness change, not another hue. https://dsyn.studio/blog/compress-png-without-losing-quality https://dsyn.studio/blog/compress-png-without-losing-quality Sat, 03 Oct 2026 00:00:00 GMT Run the PNG through a lossless optimiser such as oxipng: drop it into the image compressor, leave the PNG effort at Fast (level 2), press Compress, and download. Every pixel comes out identical; only the storage changes. In our measurements that took a flat interface graphic from 21,493 to 3,350 bytes and a photograph 14% below its original. Tools that reduce the colour count are lossy. https://dsyn.studio/blog/convert-hex-to-rgb-hsl-oklch https://dsyn.studio/blog/convert-hex-to-rgb-hsl-oklch Sat, 03 Oct 2026 00:00:00 GMT Paste the colour into a converter and copy the notation the destination wants: HEX without the hash for Figma, HEX or RGB for CSS, RGB when you need transparency, OKLCH for ramps and tokens. #2563EB is rgb(37 99 235), hsl(221 83% 53%) and oklch(54.6% 0.215 262.9). Treat the CMYK figure as a starting point only: without an ICC profile it is a naive device conversion. https://dsyn.studio/blog/convert-pdf-pages-to-jpg https://dsyn.studio/blog/convert-pdf-pages-to-jpg Sat, 03 Oct 2026 00:00:00 GMT Open PDF to JPG, add the PDF, choose 72, 150 or 300 dpi, and download one image per page. The resolution decides the pixel count: an A4 page is 210 ÷ 25.4 = 8.27 inches wide, so 300 dpi gives about 2480 × 3508 pixels and 150 dpi about 1240 × 1754. Doubling the dpi quadruples the pixels, which is why a 300 dpi image is roughly four times the size of a 150 dpi one. https://dsyn.studio/blog/convert-pdf-to-markdown https://dsyn.studio/blog/convert-pdf-to-markdown Sat, 03 Oct 2026 00:00:00 GMT Open PDF to Markdown, add the PDF, run it, and copy the result or download document.md. Each page becomes a '## Page n' heading followed by that page's text, which gives notes a structure and gives an AI model a page to cite. Nothing else is recovered: tables, lists, bold and the headings inside a page come out as plain text, because a PDF records them only as positioned text and lines. https://dsyn.studio/blog/crop-pdf-margins https://dsyn.studio/blog/crop-pdf-margins Sat, 03 Oct 2026 00:00:00 GMT Add the PDF to the Crop PDF tool, type how many points to trim from the top, right, bottom and left (72 points to the inch, so 36 is half an inch), and download. The tool sets each page's CropBox, the area a reader displays. The MediaBox and everything outside the new boundary stay in the file, so cropping hides content and can never be used to redact it. https://dsyn.studio/blog/crop-rotate-resize-an-image https://dsyn.studio/blog/crop-rotate-resize-an-image Sat, 03 Oct 2026 00:00:00 GMT Drop the image into the image editor, set the crop by dragging or typing Left, Top, Width and Height, turn it with the 90° buttons, enter the final Width or Percent, then Download once. The tool applies crop, flip, rotate and resize in that fixed order and encodes a single time. Resizing uses Lanczos3 instead of the browser's own scaler, which visibly drops detail on reductions of more than about a third. https://dsyn.studio/blog/custom-tailwind-color-scale https://dsyn.studio/blog/custom-tailwind-color-scale Sat, 03 Oct 2026 00:00:00 GMT Set a base colour and a name, check the light and dark previews, and copy the Tailwind v4 @theme block or the v3 config. On the default #0066ff scale, steps 600 to 950 carry body text on white (600 at 5.68:1) and 50 to 500 on black, while 500 reaches only 3.96:1 on white. The usual failure is the 300 input border: 1.86:1 on white, where 3:1 is needed. https://dsyn.studio/blog/enlarge-an-image-without-blur https://dsyn.studio/blog/enlarge-an-image-without-blur Sat, 03 Oct 2026 00:00:00 GMT Load the image, choose 1.5×, 2×, 3× or 4× (or a target width), drag the region picker onto an edge to compare the Lanczos3 pane with the browser's own scaler, then download. Lanczos3 keeps edges cleaner than fast bilinear scaling, but no resampler adds detail: at 2× each captured pixel covers four output pixels, so 75% of the result is interpolated; at 4×, about 94%. https://dsyn.studio/blog/extract-audio-from-a-video https://dsyn.studio/blog/extract-audio-from-a-video Sat, 03 Oct 2026 00:00:00 GMT Drop the video in, check the length and the memory figure, pick a bitrate (192 kbps is the default), press Extract the MP3 and download. Decoding uses the browser's own audio pipeline, so it works even in Firefox on Android. Files over about 13 minutes are refused: decoded audio at 48 kHz stereo takes 384,000 bytes a second, and the ceiling is 300 MB. The MP3 is a re-encode, so some loss is unavoidable. https://dsyn.studio/blog/extract-color-palette-from-image https://dsyn.studio/blog/extract-color-palette-from-image Sat, 03 Oct 2026 00:00:00 GMT Drop the photo into the image picker, choose Dominant for what the image is mostly made of or Distinct for colours that differ, and read the contrast figure beside each swatch. That figure is measured against white. Swatches below 4.5:1 cannot be body text on a white page; switching to Accessible moves each one along its own lightness axis, hue held, until it clears 4.5:1. Nothing is uploaded. https://dsyn.studio/blog/extract-text-from-a-pdf https://dsyn.studio/blog/extract-text-from-a-pdf Sat, 03 Oct 2026 00:00:00 GMT Open PDF to text, add the PDF, run it, then copy the text or download it as document.txt. It reads the PDF's text layer, the characters the file stores with their positions. A scanned PDF is a picture of each page with no text layer, so there is nothing to extract, and this tool does no OCR. Multi-column pages may come out interleaved, because the order is the file's, not the eye's. https://dsyn.studio/blog/favicon-sizes-you-actually-need https://dsyn.studio/blog/favicon-sizes-you-actually-need Sat, 03 Oct 2026 00:00:00 GMT You need a favicon.ico holding 16, 32 and 48 pixel images, PNGs at 180 pixels for the iOS home screen and 192 and 512 pixels for Android through a web manifest, and four lines in the head. Generate them from a source of at least 512 pixels, then check the 16-pixel version: it has 256 pixels in total, so a wordmark or thin strokes will not survive. https://dsyn.studio/blog/fluid-type-scale-with-clamp https://dsyn.studio/blog/fluid-type-scale-with-clamp Sat, 03 Oct 2026 00:00:00 GMT Pick a body size for the narrow and wide ends, multiply up by a ratio for each step, then draw a straight line between the two sizes: slope = size change ÷ viewport change, intercept = narrow size − slope × narrow viewport. For 16px at 360px to 19px at 1440px that gives clamp(1rem, 0.9375rem + 0.2778vw, 1.1875rem). Then check cap-height and characters per line, which clamp() does not. https://dsyn.studio/blog/generate-color-palette-that-passes-contrast https://dsyn.studio/blog/generate-color-palette-that-passes-contrast Sat, 03 Oct 2026 00:00:00 GMT Lock the colour you must keep, press space to re-roll the rest, and turn on Audit. Each column names its strongest partner inside the palette and the ratio between them, and offers a fix at the same hue when no partner reaches 4.5:1. Checking each colour against white or black proves nothing, because every colour clears 4.5:1 against one of the two. https://dsyn.studio/blog/make-a-brand-guidelines-sheet https://dsyn.studio/blog/make-a-brand-guidelines-sheet Sat, 03 Oct 2026 00:00:00 GMT A one-page brand sheet needs the logo, the palette with hex values, one heading-and-body type pairing, and an approved-combinations matrix: every colour set as text on every other, with its contrast ratio and a verdict. Four colours make 4 × 3 = 12 pairings. Mark each AA (4.5:1 or more), large text only (3:1 up to 4.5:1) or does not pass, and give failing pairs a substitute at the same hue. https://dsyn.studio/blog/make-a-gif-from-images https://dsyn.studio/blog/make-a-gif-from-images Sat, 03 Oct 2026 00:00:00 GMT Drop the images into the GIF maker, drag them into order, pick a width, set the frame delay, and read 'What this will weigh' before pressing Build the GIF. Size grows with width × height × frames: photographs cost 0.56 to 0.75 bytes per pixel per frame through this encoder, an interface screenshot 0.006. Halving the width quarters the file, which is a better fix than cutting colours. https://dsyn.studio/blog/make-svg-smaller-without-breaking-it https://dsyn.studio/blog/make-svg-smaller-without-breaking-it Sat, 03 Oct 2026 00:00:00 GMT Run it through SVGO with editor metadata stripped and coordinate precision cut to three decimal places, or two for icons, then compare a rendered preview with the original. Leave viewBox and the title element in place: removing viewBox stops the file scaling and removing the title removes its accessible name, which is why SVGO 4 keeps both by default. Judge the saving on the gzipped size, which is what ships. https://dsyn.studio/blog/password-protect-a-pdf https://dsyn.studio/blog/password-protect-a-pdf Sat, 03 Oct 2026 00:00:00 GMT Add the PDF to the Protect PDF tool, type a password into its single field, press the button and download the protected copy, then open that copy once to check the password works. Encryption happens in your browser with AES-256, the cipher ISO 32000-2 specifies, so the password is never sent anywhere. The same design means nobody can recover it for you if it is lost. https://dsyn.studio/blog/rearrange-and-delete-pdf-pages https://dsyn.studio/blog/rearrange-and-delete-pdf-pages Sat, 03 Oct 2026 00:00:00 GMT Add the PDF to Organise PDF and wait for the thumbnails. Click a page to mark it for removal, drag pages or use the arrows beneath them to change the order, and check the number under each page: it is that page's position in the new file. Press Organise PDF and download. The pages you keep are copied into a fresh file, so removed pages are not in it. https://dsyn.studio/blog/remove-a-password-from-a-pdf https://dsyn.studio/blog/remove-a-password-from-a-pdf Sat, 03 Oct 2026 00:00:00 GMT Add the PDF to the Unlock PDF tool, type the password you already use to open it, confirm it, then press the main button and download a copy that opens without asking. The tool needs the password because it decrypts rather than cracks: AES-256 content can only be read with the key the password releases, so a password you do not know cannot be removed by this or any honest tool. https://dsyn.studio/blog/rotate-a-pdf-and-save-it https://dsyn.studio/blog/rotate-a-pdf-and-save-it Sat, 03 Oct 2026 00:00:00 GMT Add the PDF to Rotate PDF, click the pages that are wrong (select none and every page turns), choose 90°, 180° or -90° under Turn by, then press Rotate PDF and download. The turn is added to the rotation each page already stores and wrapped back into 0 to 359, so a page turned by 270° twice is saved as 180°, not 540°. https://dsyn.studio/blog/see-and-remove-pdf-metadata https://dsyn.studio/blog/see-and-remove-pdf-metadata Sat, 03 Oct 2026 00:00:00 GMT Open PDF metadata and add the PDF: its title, author and subject appear in the three fields, read from the file. Clear the ones you want gone, press the button and download the copy; cleared fields are written as empty. The tool does not let you edit keywords, creator, the dates or any XMP packet, and the library it saves with replaces the producer with its own name. https://dsyn.studio/blog/split-a-pdf-by-page-range https://dsyn.studio/blog/split-a-pdf-by-page-range Sat, 03 Oct 2026 00:00:00 GMT Add the PDF, leave Split by on Range, set From page and To page, and press Split PDF to get one file holding that run of pages. Fixed cuts the whole document into parts of a set length, Pages saves every page or only the pages you click as separate files, and Size starts a new file at a KB or MB limit. Pages are copied, not re-rendered, so quality is unchanged. https://dsyn.studio/blog/turn-brand-color-into-design-tokens https://dsyn.studio/blog/turn-brand-color-into-design-tokens Sat, 03 Oct 2026 00:00:00 GMT Enter the brand colour in the ramp generator and give the scale a token name. It builds eleven steps, 50 to 950, at fixed OKLCH lightness targets using your colour's hue and chroma, then measures every step against white and black to pick text, large-text, border and surface roles for each theme. Copy roles gives those as CSS custom properties with a dark-scheme block; the code panel gives the raw steps. https://dsyn.studio/blog/turn-photos-into-one-pdf https://dsyn.studio/blog/turn-photos-into-one-pdf Sat, 03 Oct 2026 00:00:00 GMT Open Images to PDF, add your JPEG or PNG files, put them in order with the arrows or by dragging, choose a page size, orientation and margin, and download one PDF. Pick A4 for anything that will be printed: Fit to each image makes each page the image's pixel size in points, so a 4000 × 3000 photograph becomes a page about 141 × 106 cm. JPEGs go in byte for byte, and nothing is uploaded. https://dsyn.studio/blog/watermark-a-pdf https://dsyn.studio/blog/watermark-a-pdf Sat, 03 Oct 2026 00:00:00 GMT Add the PDF to the Watermark PDF tool, type short text such as DRAFT, keep the opacity near 0.15 and the angle at 45°, size the text so it stays on the page, and download. The mark is drawn into every page, so it appears in every reader and survives printing. It cannot stop copying: the text underneath stays extractable, and anyone editing the file can delete the mark. https://dsyn.studio/blog/when-to-use-a-base64-data-uri https://dsyn.studio/blog/when-to-use-a-base64-data-uri Sat, 03 Oct 2026 00:00:00 GMT Drop the file into the data URI converter, read the Inlined size, and copy the Data URI, CSS or HTML snippet. Base64 writes every 3 bytes as 4 characters, so the file grows by a third before the data: prefix is added. Inline only small files: the tool approves anything up to 4,096 bytes and, above that, says to use a normal file reference, because an inlined copy is re-downloaded with every document or stylesheet that embeds it. https://dsyn.studio/blog/why-pixel-converters-disagree https://dsyn.studio/blog/why-pixel-converters-disagree Sat, 03 Oct 2026 00:00:00 GMT Converters disagree because 'pixel' means three things. A CSS pixel is fixed at 96 to the inch; a printed image pixel is 1/ppi of an inch at whatever resolution you print; a screen's hardware pixel varies by device. So 1920 pixels is 20 inches in CSS and 6.4 inches at 300 ppi. Use 96 for stylesheets, your print resolution for paper, and a bank-card measurement for real size on screen. https://dsyn.studio/blog/write-link-text-that-makes-sense https://dsyn.studio/blog/write-link-text-that-makes-sense Sat, 03 Oct 2026 00:00:00 GMT Write every link so its words alone name the destination, and every button so its words name the outcome: “Pricing and plans”, not “Click here”; “Create account”, not “Submit”. Screen-reader users often list every link on a page at once, which strips away the sentence around each one. Then check that any aria-label starts with the visible words, or voice control breaks (WCAG 2.5.3). https://dsyn.studio/blog/merging-encrypted-pdfs-blank-pages https://dsyn.studio/blog/merging-encrypted-pdfs-blank-pages Thu, 01 Oct 2026 00:00:00 GMT Merging a password-protected PDF through upstream pdf-lib with ignoreEncryption produced a four-page file in which all three protected pages were blank and only 49 of 373 characters survived, because the page content was copied while still encrypted. The same merge through @cantoo/pdf-lib with the password gave four pages, 373 characters and nothing blank. https://dsyn.studio/blog/pdf-lossless-compression-measured https://dsyn.studio/blog/pdf-lossless-compression-measured Thu, 01 Oct 2026 00:00:00 GMT Lossless PDF compression — repacking the file's objects without touching text or images — saved 0.8% on a Chromium-printed text document, 3.9% on a jsPDF file (85.8% once raw streams were deflated), 6.5% on a macOS Quartz file and under 0.05% on anything image-heavy, measured across eleven PDFs. The only file that grew did so by 7 bytes. Content from deleted pages survived the repack, so the tool now rebuilds such files. https://dsyn.studio/blog/png-to-webp-savings-measured https://dsyn.studio/blog/png-to-webp-savings-measured Thu, 01 Oct 2026 00:00:00 GMT Converting PNG to WebP at quality 0.82 in Chromium 153 cut four 1600 × 900 photographs by 92.5% to 96.5%, an 800 px flat logo by 68.7% and a transparent photographic cut-out by 94.2%. Icons went the other way: 64 px grew 32.7%, 32 px 68.5% and 16 px 116%. On flat art it is level with a palette PNG. https://dsyn.studio/blog/video-to-gif-size-measured https://dsyn.studio/blog/video-to-gif-size-measured Thu, 01 Oct 2026 00:00:00 GMT Through the encoder behind our tool, 50 frames at 480 × 270 cost 0.644 bytes per pixel per frame for a moving photograph (4.17 MB) and 0.111 for a scrolling interface recording (716 KB). As H.264 at CRF 23 they were 78 KB and 132 KB: the GIF is 53 and 5.4 times larger. A 16-colour palette halved the photograph. https://dsyn.studio/blog/video-trim-where-the-cut-lands https://dsyn.studio/blog/video-trim-where-the-cut-lands Thu, 01 Oct 2026 00:00:00 GMT A copy-only trim begins at a keyframe. At 0.1-second steps across six files, the requested start was hit exactly in 0.5% to 9.2% of cases; the mean gap was 4.06 s on x264 defaults, 0.96 s at a 2 s keyframe interval and 0.46 s at 1 s. The extra frames stay in the file; an edit list hides them. https://dsyn.studio/blog/x-height-872-fonts-measured https://dsyn.studio/blog/x-height-872-fonts-measured Thu, 01 Oct 2026 00:00:00 GMT Across 872 font families measured from their OS/2 tables, x-height ranges from 0.351 em (Suravaram) to 0.84 em (Matangi), with a median of 0.500 em and a 5th-to-95th percentile band of 0.411 to 0.570. Matching the x-height of 16px Helvetica takes 15.2 px in Inter, 18.6 px in Times New Roman and 20.8 px in EB Garamond. https://dsyn.studio/blog/qr-logo-coverage-measured https://dsyn.studio/blog/qr-logo-coverage-measured Wed, 30 Sep 2026 00:00:00 GMT A centred logo can cover roughly 4.3% of a QR code's area at error-correction level L, 9.2% at M, 14.3% at Q and 19.3% at H — measured across about 5,000 decode attempts. The widely repeated 30% figure misreads the standard: ISO/IEC 18004 says level H recovers 30% of the symbol's codewords, which is not 30% of its visible area. https://dsyn.studio/blog/accessible-palette-from-one-brand-color https://dsyn.studio/blog/accessible-palette-from-one-brand-color Fri, 18 Sep 2026 00:00:00 GMT Hold the hue, step the lightness evenly in OKLCH, and taper chroma at both ends. That gives you a ramp from one colour. Then assign roles by contrast requirement rather than by eye, and generate a separate lighter variant for dark mode. https://dsyn.studio/blog/bootstrap-tailwind-status-colors-color-blind https://dsyn.studio/blog/bootstrap-tailwind-status-colors-color-blind Fri, 18 Sep 2026 00:00:00 GMT Bootstrap's danger red and success green sit at a perceptual distance of about 74 for typical vision. Under deuteranopia that falls to 4. Tailwind's red-500 and green-500 fall from 76 to 8. Both pairs pass contrast individually, so no contrast audit catches it. https://dsyn.studio/blog/colorblind-safe-palettes https://dsyn.studio/blog/colorblind-safe-palettes Fri, 18 Sep 2026 00:00:00 GMT Separate colours by lightness as well as hue, because lightness perception is unaffected by every red-green deficiency. Use the blue-orange axis for two-value encodings. Above four categories, colour alone stops being reliable and you need a second cue. https://dsyn.studio/blog/contrast-checking-in-ci https://dsyn.studio/blog/contrast-checking-in-ci Fri, 18 Sep 2026 00:00:00 GMT Write your colour tokens into a test that asserts every text-on-surface pair against its contrast requirement, and run it in CI. A token change that breaks contrast then fails the build like any other regression, instead of shipping and waiting for an audit. https://dsyn.studio/blog/dark-mode-contrast-wcag-misleads https://dsyn.studio/blog/dark-mode-contrast-wcag-misleads Fri, 18 Sep 2026 00:00:00 GMT WCAG 2 adds a fixed 0.05 constant to both luminance values. Near black that constant dominates the ratio, so dark-mode pairs can score a comfortable pass while reading as dim. Check dark themes with APCA, and expect to need a lighter variant of every brand colour. https://dsyn.studio/blog/fix-contrast-without-changing-brand-color https://dsyn.studio/blog/fix-contrast-without-changing-brand-color Fri, 18 Sep 2026 00:00:00 GMT Move the colour along its own lightness axis instead of picking a new one. Contrast is driven almost entirely by lightness, and hue survives a lightness change — so a darker or lighter version of your brand colour will pass while still reading as your brand. https://dsyn.studio/blog/oklch-for-designers https://dsyn.studio/blog/oklch-for-designers Fri, 18 Sep 2026 00:00:00 GMT In HSL, 50% lightness looks very different for yellow than for blue, so a ramp built on even HSL steps comes out uneven. OKLCH is perceptually uniform — equal lightness steps look equal to the eye — which makes it the correct space for ramps, dark-mode variants and contrast fixes. https://dsyn.studio/blog/wcag-2-vs-apca https://dsyn.studio/blog/wcag-2-vs-apca Fri, 18 Sep 2026 00:00:00 GMT Use WCAG 2.2 AA for compliance, because it is the operative legal standard under the ADA, the European Accessibility Act and equivalents. Use APCA as the readability check, because it accounts for font size and weight and WCAG 2 does not. Where they disagree, ship to whichever is stricter. https://dsyn.studio/blog/what-contrast-ratio-do-you-need https://dsyn.studio/blog/what-contrast-ratio-do-you-need Fri, 18 Sep 2026 00:00:00 GMT 4.5:1 for body text and 3:1 for large text to meet WCAG 2.2 AA. Large means 24px, or 18.66px if bold. Interface components like input borders and meaningful icons need 3:1. AAA raises body text to 7:1 and large text to 4.5:1. https://dsyn.studio/blog/why-14px-text-fails-apca https://dsyn.studio/blog/why-14px-text-fails-apca Fri, 18 Sep 2026 00:00:00 GMT APCA scores contrast against font size and weight, and at 14px regular there is no colour pair that clears its threshold — not even black on white. The fix is typographic, not chromatic. Use 16px, or keep 14px and set it in a heavier weight. https://dsyn.studio/blog/why-most-websites-fail-contrast https://dsyn.studio/blog/why-most-websites-fail-contrast Fri, 18 Sep 2026 00:00:00 GMT Because checking is not the bottleneck. Contrast tools report a verdict and stop, leaving the designer to solve the actual problem — usually with a brand colour they are not free to change. The failure is in the gap between diagnosis and fix.