Enterprise mobile development
The apps your teams rely on in the field, built for managed devices from day one.
Brand book
How Nullworks Software Company looks and writes. Use it for the website, products, documents and anything else with our name on it.
The tagline and the Ø mark are approved. Everything else is a working draft that matches the live site. Updated November 7, 2026.
Name
- Full name
- Nullworks Software Company, for legal text and first mentions
- Short name
- Nullworks Software Co., for page titles and navigation
- In a sentence
- Nullworks, capitalized and written as one word
- In the logo
- nullworks, lowercase, with the Ø. Don't type the Ø in running text.
- Why null
- Null is the value that means nothing at all. It's where every program begins, before anything has been decided.
- What we do
- We build custom software for clients and products of our own.
- Tagline
- From zero to shipped
- Mission (draft)
- Strip software back to zero and rebuild it to do exactly what it should, and nothing it shouldn't.
Logo
Each wordmark file includes its own background, so pick the file that matches the ground it sits on.
-
On Cream, the default
wordmark-co.svg -
On Green
wordmark-co-on-green.svg -
On Ink
wordmark-co-on-ink.svg -
Ø mark, for Cream only
mark-a.svg -
Yellow tile, for favicons and avatars
favicon.svg
The formal "Software Company" lockup is on hold until its Ø spacing is corrected to match these files.
Size and space
- Keep clear space on all sides equal to the height of the Ø.
- Keep the wordmark at least 135px wide on screen, the size in the site footer, or 35mm in print. Below that, use the mark.
- Keep the mark at least 16px.
Don't
- Write it as null works or NullWorks.
- Replace the Ø with a plain o or 0.
- Retype the wordmark in a live font. Use the outlined files.
- Stretch, skew, shadow, outline or add a gradient.
- Put an Orange Ø on Green (2.44:1).
Color
Cream is the default ground. Use only these six colors, and keep Yellow scarce so that actions stand out.
Cream
#FBF6EA
--nw-cream
251 246 234Backgrounds
Ink
#14130F
--nw-ink
20 19 15Body text, rules, footer, code
Green
#015D47
--nw-green
1 93 71Headings, links, full-width panels
Orange
#FD550A
--nw-orange
253 85 10The logo Ø and drop caps
Orange 700
#BE4008
--nw-orange-700
190 64 8Accent text, including small text
Yellow
#E0F354
--nw-yellow
224 243 84Primary buttons, links on dark grounds, small labels on Green, focus rings
Text pairs
Ratios follow WCAG 2.x. Normal text needs 4.5:1. Large text (24px, or 18.7px bold) needs 3:1.
| Pair | Ratio | Use |
|---|---|---|
| Ink on Cream | 17.24 | Body text |
| Green on Cream | 7.33 | Headings, links |
| Orange 700 on Cream | 4.96 | Accent text |
| Ink on Yellow | 15.15 | Primary button |
| Cream on Green | 7.33 | Text on panels |
| Yellow on Green | 6.44 | Links and labels on panels |
| Cream on Ink | 17.24 | Footer, code |
| Yellow on Ink | 15.15 | Footer links |
| Ink on Orange | 5.74 | Text on Orange |
| Orange on Cream | 3.00 | Large type and the Ø only |
Don't use Orange on Green (2.44) or Yellow on Orange (2.64) for text. Cream on Orange (3.00) is for large type only.
Type
Two families do the work: Playfair Display for headings and Source Serif 4 for everything else, including navigation and buttons. IBM Plex Mono is for code only.
H1: Playfair Display 900, 52 to 120px, line height 1.08
From zero to shipped
H2: Playfair Display 900, 32 to 44px
Enterprise mobile development
H3: Playfair Display 900, 28px
Device management
Lead: Source Serif 4 400, 20px, line height 1.5
Every project starts at null, with no template.
Body: Source Serif 4 400, 17px, line height 1.6. Bold is 700.
We begin with the problem, build the smallest thing that solves it, and keep only what earns its place.
Small: Source Serif 4 400, 15px
© 2026 Nullworks Software Company
Code: IBM Plex Mono 400, 13px
background: var(--c-highlight);
Do
- Use sentence case for headings.
- Leave letter spacing at 0.
- Keep one h1 on each page.
Don't
- End a heading with a period.
- Italicize a word in a heading for effect.
- Use all caps, except inside the logo files.
- Use monospace for body text, labels or buttons.
Voice
Write like a good newspaper: lead with the facts, use short sentences, and only make claims we can prove.
| Trait | Means | Not |
|---|---|---|
| Plain | Short, literal sentences | Slogans or jargon |
| Precise | Numbers we can back up | Invented metrics |
| Warm | Talks to a person | Cute or flippant |
| Editorial | Reports what happened | Stuffy or nostalgic |
Write this
- Every project starts at null, with no template, and gets only what earns its place.
- Know which devices are current, compliant, and where they are.
- That email doesn't look right. Try again.
Not this
- Revolutionary AI-powered synergy platform.
- Leverage our best-in-class solutions.
- Oops!! Something went wrong 😅
| Context | Tone |
|---|---|
| Marketing | Short and literal, with claims we can prove |
| Docs | Plain, precise, second person |
| Errors | Calm and specific, with the next step |
| Incidents | Direct, owned and timestamped, like a newspaper correction |
Components
These samples use the website's own CSS. Download tokens.css to use the same values elsewhere.
Button
Yellow with an Ink label in Source Serif 4 700, a 4px radius and a height of at least 48px. Use one primary button per view. It lifts 2px on hover.
Card
A 3px rule on top and no box. Cards are grouped by spacing, so they don't need extra dividers.
Device management
Every company device enrolled, configured, secured and accounted for.
Panel
Links turn Yellow on Green
Disclosure
When should I use a disclosure?
Use one for optional detail, such as an FAQ. Don't hide anything a person needs to finish the task.
Code
.btn {
background: var(--c-highlight);
color: var(--nw-ink);
border-radius: var(--radius);
}Forms and status
- Give every field a label, even if it's visually hidden. Fields are at least 48px tall. See the waitlist form.
- Error messages say what happened and what to do next. Use Orange 700 for errors and Green for success.
- Never rely on color alone. Status messages always include words.
- Keep every touch target at least 44px, and leave the focus ring on: a 3px Ink outline with a Yellow halo. Press Tab on this page to see it.
Layout
- Width
- Content is at most 1200px wide. Running text is at most 68 characters wide.
- Spacing
- 4 8 12 16 24 32 48 64 96
- Radius
- 4px, for buttons, fields, chips and code blocks. No pills.
- Rules
- 3px under the site header and on top of cards. 1px between newspaper columns.
- Breakpoints
- Layouts change at 600, 768 and 1024px.
Newspaper text
Longer story text on the website is set like a newspaper, with justified lines, hyphenation and a drop cap in Orange. Use it for the home page intro and the About page, not for interface text or lists.
This sample shows the plain fallback. The full setting is on the About page.
Images
Use real screenshots and photos of real work on flat color. Label anything that's an example or mock. No stock people.
Design rules
Aim for the clarity and restraint of Linear's website or Apple Notes without borrowing their look. For each element, ask whether it helps someone understand, navigate or act. If it doesn't, remove it.
Do
- Give each page one purpose and one primary action.
- If a screen needs explaining, fix its order, grouping or naming before adding text.
- Use real content. Never invent metrics, endorsements or charts.
- Keep required instructions, labels, error recovery, safety warnings and legal text.
- Reuse these components before making new ones.
Avoid
- Redundant taglines, subtitles or eyebrow labels above headings
- Decorative pills, badges and numbered sections
- Fake dashboards and diagrams that explain nothing
- Gradients, dithering, halftone and ASCII art
- Extra boxes, dividers and text shades
Before shipping
- People: the main task is clearer. Check phone and desktop layouts, keyboard use, focus, screen readers, contrast, and loading, empty and error states.
- Developers: there are fewer special cases, and values come from tokens.css.
- Agents: the page has semantic structure, stable labels and predictable states.
- Existing behavior: URLs, data and integrations still work unless the change is meant to alter them.