# Brand kit | OneForm
> OneForm's brand kit: the logo in SVG, PNG and PDF, colours with contrast ratios and design tokens, type, icons, voice, boilerplate copy and product…
Source: https://oneform.si/brand/
---
Brand kit
# The OneForm brand, in one place.
Logos, colours, type and the words we use, for anyone writing about OneForm, linking to it or designing for it.
[Download full kit (.zip)](https://oneform.si/brand/oneform-brand-kit.zip)
- [Logo](#logo)
- [Clear space](#clear-space)
- [Misuse](#misuse)
- [Colour](#colour)
- [Typography](#typography)
- [Icons](#icons)
- [Voice](#voice)
- [Boilerplate](#boilerplate)
- [Screenshots](#screenshots)
- [Badge](#badge)
- [Press](#press)
Logo
## An open ensō around one dot.
A single brush-stroke ring in the brand gradient, open at the top right, around one dot: one form. The wordmark sets “One” in Inter Medium and “Form” in Inter Light.
Preview on
### Logo
The mark and the wordmark together. Use this wherever there's room.
- For light backgrounds
Logo
Light pages, documents
[SVG](https://oneform.si/brand/svg/oneform-logo.svg)[PNG 64h](https://oneform.si/brand/png/oneform-logo-64h.png)[PNG 128h](https://oneform.si/brand/png/oneform-logo-128h.png)[PNG 256h](https://oneform.si/brand/png/oneform-logo-256h.png)[PDF](https://oneform.si/brand/pdf/oneform-logo.pdf)
- 
Logo on dark
Dark pages, most social posts
[SVG](https://oneform.si/brand/svg/oneform-logo-on-dark.svg)[PNG 64h](https://oneform.si/brand/png/oneform-logo-on-dark-64h.png)[PNG 128h](https://oneform.si/brand/png/oneform-logo-on-dark-128h.png)[PNG 256h](https://oneform.si/brand/png/oneform-logo-on-dark-256h.png)[PDF](https://oneform.si/brand/pdf/oneform-logo-on-dark.pdf)
- 
Logo, white
One colour on dark or photos
[SVG](https://oneform.si/brand/svg/oneform-logo-white.svg)[PNG 64h](https://oneform.si/brand/png/oneform-logo-white-64h.png)[PNG 128h](https://oneform.si/brand/png/oneform-logo-white-128h.png)[PNG 256h](https://oneform.si/brand/png/oneform-logo-white-256h.png)
- For light backgrounds
Logo, black
One colour: stamps, embossing
[SVG](https://oneform.si/brand/svg/oneform-logo-black.svg)[PNG 64h](https://oneform.si/brand/png/oneform-logo-black-64h.png)[PNG 128h](https://oneform.si/brand/png/oneform-logo-black-128h.png)[PNG 256h](https://oneform.si/brand/png/oneform-logo-black-256h.png)
### Mark
The ensō alone, for avatars, corners and watermarks.
- For light backgrounds
Mark
Avatars and small spaces on light
[SVG](https://oneform.si/brand/svg/oneform-mark.svg)[PNG 256](https://oneform.si/brand/png/oneform-mark-256.png)[PNG 512](https://oneform.si/brand/png/oneform-mark-512.png)[PNG 1024](https://oneform.si/brand/png/oneform-mark-1024.png)
- 
Mark on dark
Corners and watermarks on dark
[SVG](https://oneform.si/brand/svg/oneform-mark-on-dark.svg)[PNG 256](https://oneform.si/brand/png/oneform-mark-on-dark-256.png)[PNG 512](https://oneform.si/brand/png/oneform-mark-on-dark-512.png)[PNG 1024](https://oneform.si/brand/png/oneform-mark-on-dark-1024.png)
- 
Mark, white
One colour on dark
[SVG](https://oneform.si/brand/svg/oneform-mark-white.svg)[PNG 256](https://oneform.si/brand/png/oneform-mark-white-256.png)[PNG 512](https://oneform.si/brand/png/oneform-mark-white-512.png)[PNG 1024](https://oneform.si/brand/png/oneform-mark-white-1024.png)
- For light backgrounds
Mark, black
One colour on light
[SVG](https://oneform.si/brand/svg/oneform-mark-black.svg)[PNG 256](https://oneform.si/brand/png/oneform-mark-black-256.png)[PNG 512](https://oneform.si/brand/png/oneform-mark-black-512.png)[PNG 1024](https://oneform.si/brand/png/oneform-mark-black-1024.png)
### App icon
The mark on a rounded tile, for home screens and profile pictures.
- 
App icon
Home screens, profile pictures
[SVG](https://oneform.si/brand/svg/oneform-app-icon.svg)[PNG 120](https://oneform.si/brand/png/oneform-app-icon-120.png)[PNG 180](https://oneform.si/brand/png/oneform-app-icon-180.png)[PNG 192](https://oneform.si/brand/png/oneform-app-icon-192.png)[PNG 512](https://oneform.si/brand/png/oneform-app-icon-512.png)[PNG 1024](https://oneform.si/brand/png/oneform-app-icon-1024.png)
- 
App icon, dark
Profile pictures on social
[SVG](https://oneform.si/brand/svg/oneform-app-icon-dark.svg)[PNG 180](https://oneform.si/brand/png/oneform-app-icon-dark-180.png)[PNG 192](https://oneform.si/brand/png/oneform-app-icon-dark-192.png)[PNG 512](https://oneform.si/brand/png/oneform-app-icon-dark-512.png)[PNG 1024](https://oneform.si/brand/png/oneform-app-icon-dark-1024.png)
### Also in the kit
- [favicon.ico16, 32 and 48 px](https://oneform.si/brand/favicon/favicon.ico)
- [favicon.svgScales with the browser](https://oneform.si/brand/favicon/favicon.svg)
- [apple-touch-icon.png180 × 180](https://oneform.si/brand/favicon/apple-touch-icon.png)
- [X header1500 × 500 PNG](https://oneform.si/brand/social/oneform-x-header-1500x500.png)
- [X header @2x3000 × 1000 JPG](https://oneform.si/brand/social/oneform-x-header-3000x1000.jpg)
- [Kit overviewEvery version on one sheet](https://oneform.si/brand/oneform-logo-kit-preview.png)
Clear space
## Room to breathe.
Give the logo space and keep it legible. These are the minimums; more is usually better.
x = ¼ of the mark's height. Keep at least x clear on every side of the logo: no text, edges or other marks inside the dashed line.
The mark alone keeps the same x. The mark is 4x tall, so the space around it is a quarter of its height.
20 px
Full logo
At least 20 px tall
16 px
Mark
At least 16 px
Shown at actual size on screen. Below 16 px, use the favicon files, which are made for tiny sizes.
Misuse
## Please don't.
Use the files as they are. If none of them fits, use the white or black version rather than changing one.
- Don't stretch or squash it
- Don't recolour the gradient
- Don't rotate it
- Don't add shadows or effects
- Don't outline it
- OneForm
Don't retype the wordmark
- Don't place it on a busy background
- Don't use a version without enough contrast
Colour
## A near-black stage, one gradient.
Warm neutrals do most of the work. The gradient is the accent, used once per design.
### Brand
The three gradient stops. One gradient moment per design: a key word, the main button or the mark.
- Pink`--color-pink`
Gradient start
HEX
RGB
HSL
OKLCH
On stage7.02:1AAA
On white2.83:1Fail
- Violet`--color-violet`
Gradient middle
HEX
RGB
HSL
OKLCH
On stage6.12:1AA
On white3.24:1AA large
- Blue`--color-blue`
Gradient end
HEX
RGB
HSL
OKLCH
On stage6.00:1AA
On white3.31:1AA large
### Dark (website, social)
The default for marketing. Text is a warm off-white, never pure white.
- Stage`--color-bg`
Page background
HEX
RGB
HSL
OKLCH
On stage1.00:1Fail
On white19.90:1AAA
- Panel`--color-paper`
Cards
HEX
RGB
HSL
OKLCH
On stage1.05:1Fail
On white18.89:1AAA
- Raised`--color-wash`
Chips, raised surfaces
HEX
RGB
HSL
OKLCH
On stage1.10:1Fail
On white17.93:1AAA
- Raised 2`--color-sumi`
Raised surfaces
HEX
RGB
HSL
OKLCH
On stage1.20:1Fail
On white16.50:1AAA
- Hairline`--color-line`
1 px borders
HEX
RGB
HSL
OKLCH
On stage1.20:1Fail
On white16.49:1AAA
- Hairline 2`--color-line-2`
Stronger borders
HEX
RGB
HSL
OKLCH
On stage1.44:1Fail
On white13.75:1AAA
- Night indigo`--color-night`
Sky near the horizon
HEX
RGB
HSL
OKLCH
On stage1.22:1Fail
On white16.20:1AAA
- Text`--color-ink`
Headlines, main text
HEX
RGB
HSL
OKLCH
On stage17.45:1AAA
On white1.14:1Fail
- Text 2`--color-ink-2`
Subheads, body
HEX
RGB
HSL
OKLCH
On stage12.37:1AAA
On white1.60:1Fail
- Muted`--color-muted`
Supporting text
HEX
RGB
HSL
OKLCH
On stage6.46:1AA
On white3.07:1AA large
- Faint`--color-faint`
Fine print
HEX
RGB
HSL
OKLCH
On stage5.31:1AA
On white3.74:1AA large
### Light (app, reports)
The app and the PDF reports, for product screenshots and light variants.
- Paper`--color-light-paper`
Page
HEX
RGB
HSL
OKLCH
On stage19.90:1AAA
On white1.00:1Fail
- Wash`--color-light-wash`
Backgrounds
HEX
RGB
HSL
OKLCH
On stage19.04:1AAA
On white1.04:1Fail
- Ink`--color-light-ink`
Text, the logo's dot
HEX
RGB
HSL
OKLCH
On stage1.00:1Fail
On white19.79:1AAA
- Ink 2`--color-light-ink-2`
Secondary text
HEX
RGB
HSL
OKLCH
On stage1.77:1Fail
On white11.20:1AAA
- Muted`--color-light-muted`
Supporting text
HEX
RGB
HSL
OKLCH
On stage2.97:1Fail
On white6.68:1AA
- Line`--color-light-line`
Borders
HEX
RGB
HSL
OKLCH
On stage16.97:1AAA
On white1.17:1Fail
- Line 2`--color-light-line-2`
Stronger borders
HEX
RGB
HSL
OKLCH
On stage15.33:1AAA
On white1.29:1Fail
- App violet`--color-light-accent`
The app's accent
HEX
RGB
HSL
OKLCH
On stage6.04:1AA
On white3.29:1AA large
Contrast is the WCAG 2 ratio for text in that colour. AA needs 4.5:1 (3:1 for large text), AAA needs 7:1\. Click a colour or a value to copy it.
### The gradient
Pink at the top left to blue at the bottom right. Use it once per design: the key word of a headline, the main button, the mark or a thin line. Never on large backgrounds, icons or body text.
`background: linear-gradient(100deg, #ff5fa2 0%, #b36bff 48%, #3d8bff 100%);`
#FF5FA20%
#B36BFF48%
#3D8BFF100%
### Design tokens
Every colour above, the gradient and the font stacks, ready to paste into a project.
/* OneForm design tokens */
:root {
/* Brand */
--color-pink: #ff5fa2;
--color-violet: #b36bff;
--color-blue: #3d8bff;
/* Dark (website, social) */
--color-bg: #09090a;
--color-paper: #111110;
--color-wash: #171716;
--color-sumi: #1f1f1d;
--color-line: #1f1f1e;
--color-line-2: #2e2d2b;
--color-night: #1a1c45;
--color-ink: #f1f0ec;
--color-ink-2: #cdccc7;
--color-muted: #94938e;
--color-faint: #85847f;
/* Light (app, reports) */
--color-light-paper: #ffffff;
--color-light-wash: #fafaf8;
--color-light-ink: #0a0a0a;
--color-light-ink-2: #3b3b3b;
--color-light-muted: #5c5c5c;
--color-light-line: #ededeb;
--color-light-line-2: #e2e2df;
--color-light-accent: #8b7bff;
/* Gradient and type */
--grad: linear-gradient(100deg, #ff5fa2 0%, #b36bff 48%, #3d8bff 100%);
--font-sans: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-logo: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
Typography
## Three free typefaces.
All three are on Google Fonts. Headlines are big and tight, in sentence case.
Aa
Inter Tight
Headlines (SemiBold 600, −2%, line height 1.04) and body text (Regular 400, line height 1.6) on the website.
[Google Fonts ↗](https://fonts.google.com/specimen/Inter+Tight)
OneForm
Inter
The wordmark: “One” in Medium 500, “Form” in Light 300, tracking −2%. Use the logo file rather than retyping it.
[Google Fonts ↗](https://fonts.google.com/specimen/Inter)
Forms to automated reports
JetBrains Mono
Small labels and chips: all caps, tracking +14%, about 11 px on the web.
[Google Fonts ↗](https://fonts.google.com/specimen/JetBrains+Mono)
### The type scale
Edit the sample to see your own words at every size the site uses.
Sample
- Display
Inter Tight 600 · 40 → 60 px · −2% · 1.04
Forms in. Reports out.
- Heading
Inter Tight 600 · 34 → 48 px · −2% · 1.04
Forms in. Reports out.
- Subheading
Inter Tight 600 · 26 → 32 px · −2%
Forms in. Reports out.
- Title
Inter Tight 500 · 16 px
Forms in. Reports out.
- Body
Inter Tight 400 · 15.5 → 17 px · 1.6
Forms in. Reports out.
- Small
Inter Tight 400 · 13.5 px
Forms in. Reports out.
- Label
JetBrains Mono 400 · 11 px · caps · +14%
Forms in. Reports out.
Iconography
## Thin lines, quiet tiles.
White line icons with a 1.6 px stroke on neutral dark tiles. They draw themselves in once, then move a little. Never in the gradient.
Click an icon to copy its SVG.
Voice & tone
## Calm, precise, plain.
We write like a sharp senior accountant: short sentences, concrete words, and the firm always in control.
- Calm, confident, precise
Write like a sharp senior accountant, not a startup chasing attention.
- Short sentences, plain words
“Forms in. Reports out.” is the model: two beats, nothing extra.
- Concrete over abstract
Name the thing the reader gets: a memo, a booking, a paid report.
- The firm stays in control
The AI drafts and the firm approves. Never suggest it replaces the accountant or advisor.
- Only what's true
No invented numbers, quotes, client logos or ratings. Voice forms are always labelled beta.
### Headlines
Write
Not
- Write: Every response becomes a report.
Not: Unlock AI-powered productivity for your practice!
- Write: A planning memo for every client, drafted before you open your inbox.
Not: The revolutionary AI that 10x’s your firm.
- Write: Review it. Approve it. Send it.
Not: Let the AI handle your clients for you.
- Write: Know which lead to call first.
Not: Unleash next-gen lead intelligence 🚀
- Write: A booking page that gets you paid before the call.
Not: A game-changing scheduling experience.
Words we leave out:revolutionarygame-changer10xunleashnext-genrocket emojiexclamation marks
Boilerplate
## Ready to paste.
For articles, directories, event listings and partner pages. Please keep them factual; shorten them rather than adding claims.
- Tagline
Forms in. Reports out.
- Category line
Forms to automated reports
- One-liner· 33 words
OneForm is an AI form builder for accounting firms, financial advisors and professional practices. It turns every form response into a reviewed, client-ready report, with paid reports, booking and lead scoring built in.
- About 50 words· 51 words
OneForm is an AI form builder for accounting firms, financial advisors and professional practices. Describe a form in one sentence and OneFormAI builds it. Each response becomes a draft report, and the firm reviews, approves and sends it as a branded PDF. Paid reports, bookings and lead scoring are built in.
- About 100 words· 99 words
OneForm is an AI form builder for tax and accounting firms, financial advisors and professional-services firms. It turns every form response into a reviewed, client-ready report. A firm describes the form it needs in one sentence, or starts from a template such as a year-end planning questionnaire, and OneFormAI builds it. Clients answer a branded form on any device, or talk to it with voice forms (beta). Each response becomes an AI-drafted report that the firm reviews, edits and approves before it goes out as a branded PDF. Paid reports, booking pages, lead scoring and workflows are built in.
### Writing the name
One word, capital O and capital F.
- Correct: OneForm
- Correct: OneFormAI (the form builder's AI)
- Incorrect: Oneform
- Incorrect: One Form
- Incorrect: ONEFORM
Screenshots
## The product, as it is.
Real screens from the app at full resolution (WebP). Please don't edit what they show.
- 
Create with AI
WebP · 2880 × 1800
[Download](https://oneform.si/shots/create.webp)
- 
Form builder
WebP · 2880 × 1800
[Download](https://oneform.si/shots/builder.webp)
- 
A client's form
WebP · 2880 × 1800
[Download](https://oneform.si/shots/runner.webp)
- 
Report review
WebP · 2880 × 1800
[Download](https://oneform.si/shots/review.webp)
- 
Responses
WebP · 2880 × 1800
[Download](https://oneform.si/shots/responses.webp)
- 
Leads
WebP · 2880 × 1800
[Download](https://oneform.si/shots/leads.webp)
- 
Workflows
WebP · 2880 × 1800
[Download](https://oneform.si/shots/workflows.webp)
- 
Insights
WebP · 2880 × 1800
[Download](https://oneform.si/shots/insights.webp)
- 
Integrations
WebP · 2880 × 1800
[Download](https://oneform.si/shots/integrations.webp)
- 
Voice forms (beta)
WebP · 2880 × 1800
[Download](https://oneform.si/shots/voice.webp)
- 
Voice forms on a phone (beta)
WebP · 1170 × 2532
[Download](https://oneform.si/shots/voice-phone.webp)
Badge
## Made with OneForm.
The small badge OneForm shows on the forms and pages a firm's clients see. Here as files, in its light and dark versions.
- 
On light pages[SVG](https://oneform.si/brand/badge/made-with-oneform-light.svg)
`
`
- 
On dark pages[SVG](https://oneform.si/brand/badge/made-with-oneform-dark.svg)
`
`
Press
## Questions about the brand?
Writing about OneForm, or need a file that isn't here? Ask us.
[Press and brand questions](https://oneform.si/contact/?topic=press)
## From form to finished report, automatically.
Create your firm in a minute and build your first form today.
[Start free — no card needed](https://app.oneform.si/signup?ref=cta%5Fband&utm%5Fsource=site&utm%5Fmedium=cta%5Fband&utm%5Fcampaign=signup)[Log in](https://app.oneform.si/login)