Grids Studio v1
Your logoUpload the mark and the wordmark
LogomarkPNG, JPG or SVG
WordmarkOptional
What this does

SVG uploads are kept as live vector artwork, so their fill and stroke can be edited here. PNG and JPG are embedded as raster images and cannot be recoloured. Bounds detection measures the true outline of each mark and ignores empty margin in the source file, so the exclusion zone is set off the artwork rather than off its canvas.

Label fontThe typeface used on the measurements
Aa
Label fontHelvetica (default)
What this does

Sets the typeface for every dimension and division label on the sheet. Accepts TTF, OTF, WOFF and WOFF2; the font is embedded in exported SVGs so the labels travel with the file.

DownloadSave the sheet as SVG or PNG
Brand guidelinesTurn this logo into a full brand book

Your grid sheets become the construction pages of a proper brand book — logo, clear space, grid system, type, colour and layout — exported as layered SVG spreads you drop straight into Figma.

Grids Studio Designed & built by @btrxinfinity Interface icons by Iconoir, MIT
Back to site
SheetWhat to draw, and how it looks
What this does

What this does

Mono follows the light and dark toggle. Every other style sets its own ground, guide colour and marker colours. Randomise sits under the artwork, next to Correct spacing, and shuffles the style, the grid system and the construction layers — the quickest way to see what a sheet can look like.

ArrangementHow the mark and wordmark sit together
What this does

Optical offset moves the wordmark off its measured position to correct for what the eye sees rather than what the maths gives. Every dimension on the sheet recalculates to match, so the gap is always reported honestly.

SpacingHow much room the logo keeps
What this does

One unit is the single measurement the whole specification is quoted in. Set it once from your artwork, and clear space and the internal gap are written as multiples of it (2x, x, x/2) so the lockup keeps its proportions at any size, in any medium.

Unit symbol
One unit equals
What this does

Set the real size one unit stands for and every label on the sheet is written in that measurement instead of unit notation. This is what a print or fabrication spec needs.

What this does

GridThe grid drawn behind the artwork
What this does

The base grid steps in fractions of one unit. Divisions split the exclusion zone into equal parts and label each as a fraction, which is how a spec sheet shows where the artwork sits inside the zone.

ConstructionThe guides a logo is built on
Anchor points
Fill
Stroke
Curve handles
Dot
Arm
What this does

Circle guides, centre axes and anchor points document how the logomark was drawn: the geometry a construction sheet is expected to show. Path outlines strip the artwork back to its contours; Bezier handles plot every on-curve point with its control arms, the way the mark appears in a drawing tool. Both need vector artwork. Arm length scales the control arms against the size of the shape each anchor sits on, so a large bowl gets long arms and a small counter short ones; 100% is the true geometry. Arm weight sets their line thickness independently of the sheet's own line weight, and arm angle rotates each pair off its tangent \u2014 0\u00b0 is where the curve actually goes, and turning it away is a drafting device rather than a description of the path.

Clear space fillShade the keep-out area around the logo
Colour
The mark as the unit
Rules
What this does

A brand sheet usually states clear space as a number. This states it with the artwork: the zone is shaded, and one logomark is dropped into each corner of it at the size of one unit. Anyone placing the logo can then see the clearance instead of reading it, which is why identity manuals draw the mark into its own margin rather than dimensioning it twice. Pick Clear space, mark as the unit under Sheet for the finished version of this layout.

BackgroundThe ground the sheet is drawn on
Fill
What this does

Every sheet style already carries its own ground. Paint one here and it takes over: a flat colour, a gradient of any number of stops, or an image of your own. The workspace shows it straight away because the sheet has no card around it, and the export carries it as the Background layer. Transparent export still wins over anything painted here.

ColourArtwork colour, guide lines and effects
What this does

This asset is a raster image, so its fill and stroke cannot be edited. Upload an SVG version to unlock these controls.

Fill
Fill
Stroke
Colour
Guide lines
Effects
What this does

Hatching is masked to the artwork itself, so the fill follows the exact outline of the logomark and wordmark at any angle.

Build the brand book
around this logo

Your grid sheets become the construction pages. Everything else is set here, once.

The brand

Artwork

Carried straight from the studio. Nothing to upload again.

Logomark—
Wordmark—

Colour palette

Seeded from your sheet. Rename, re-pick, add or drop — the book uses these and nothing else.

The cover and the gradients page use this pair.

Typography

Aa
Embed the faceOptional — TTF, OTF, WOFF

Pages

Photography, stationery, mockup and social pages carry the images generated above. Without them they are laid out as empty, labelled slots — drop your own in once the book is open in Figma.

—

Creating brand guidelines

Starting00 / 00

    Your brand book

    Layered SVG spreads, named for Figma.