NothingOS Design Principles
Table of Contents
Design Principles
Monochrome is the canvas, red is the signal — NothingOS is overwhelmingly monochrome: black, white, and a single gray. A single red accent —
--color-primary(#ff0030) — drives CTAs, active states, and urgent badges. The default state of every element is monochrome. Red must be earned.Glyph over glance — The Glyph Interface communicates notifications through light patterns on the back of the device so users never need to turn the screen on. Flip to Glyph makes this the primary notification channel. Information should be delivered without demanding attention. Light is a silent, private language.
Dot-matrix is a design system, not a gimmick — The Ndot dot-matrix font renders every product identifier —
phone(2a),ear(open)— in pixel-grid characters. Editorial headlines use NType82 ultra-light (weight 100) so text recedes and product photography dominates. Every label, button, and nav link is LatteraMonoLL uppercase mono at 11px. Three typefaces, three distinct jobs, no decorative extras.No ornaments — Every visual element must earn its place through function. The transparent back reveals internal components honestly; the Glyph lights convey information; the dot-matrix font identifies products. Nothing in NothingOS exists purely for decoration. If it cannot be justified by utility, it does not ship.
Bloatware is violence — NothingOS ships near-stock Android with zero duplicate apps, zero manufacturer-themed utilities, and zero forced services. The only preloads are Facebook and Instagram — both removable in one tap. The OS does not compete with Google apps; it gets out of the way and lets the user decide what belongs on their phone.
One feature, done well — Instead of fifty half-baked AI gimmicks, NothingOS adds one: Essential Space. A single, focused tool for capturing ideas, recordings, and screenshots that syncs across devices. Every proposed feature must pass one question: "Would the user notice if this was gone?"
Typography is the primary hierarchy — NothingOS uses no bold weights, no decorative dividers, and no colour-coded navigation. Hierarchy comes from typeface switching: Ndot for identity, NType82 ultra-light for content that should recede, LatteraMonoLL uppercase for actions. Red is reserved for state changes (active, destructive), not for hierarchy.
Consistency over customisation — Other Android skins offer endless themes, icon packs, and accent colour pickers. NothingOS offers one coherent vision. The monochrome palette, the dot-matrix widgets, the uniform typography, the single red accent — consistency is the differentiator. Users should not have to fight the UI to make it look intentional.
Screen-off is the default — Flip the phone face down and Glyph takes over: notifications become light sequences, calls become rhythmic pulses, charging becomes an LED progress bar. The default interaction mode minimises screen-on time. NothingOS is designed to be used without being looked at.
Nothing is not minimalism — Minimalism removes until it looks clean. Subtractionism removes until only the essential remains. NothingOS starts from stock Android and deliberately subtracts: no duplicate apps, no themes, no ornament. A single red accent remains because destruction and urgency need a signal. Everything else has passed a strict filter of necessity. The result is not sparse — it is intentional.
Colors
A nothing daisyUI theme defined in globals.css. Every colour descends from
one of these CSS custom properties.
| Token | Hex | Usage |
|---|---|---|
--color-base-100 |
#000000 |
Primary background (OLED black) |
--color-base-200 |
#0a0a0a |
Elevated surfaces, cards |
--color-base-300 |
#1f1f1f |
Secondary elevation, hover states |
--color-base-content |
#f5f5f5 |
Primary text on base backgrounds |
--color-primary |
#ff0030 |
Signature red: CTAs, active, urgent |
--color-primary-content |
#f5f5f5 |
Text on primary |
--color-secondary |
#f5f5f5 |
Inverted surface, light-mode canvas |
--color-secondary-content |
#1f1f1f |
Text on secondary |
--color-accent |
#6e7b86 |
Muted accent: metadata, subtle UI |
--color-accent-content |
#f5f5f5 |
Text on accent |
--color-neutral |
#8a8a8a |
Neutral gray: disabled, placeholder |
--color-neutral-content |
#000000 |
Text on neutral |
--color-info |
#4da3ff |
Informational |
--color-info-content |
#f5f5f5 |
Text on info |
--color-success |
#00c853 |
Success states |
--color-success-content |
#f5f5f5 |
Text on success |
--color-warning |
#ffb000 |
Warning states |
--color-warning-content |
#f5f5f5 |
Text on warning |
--color-error |
#ff0030 |
Error states (same as primary) |
--color-error-content |
#f5f5f5 |
Text on error |
Rules
Primary is red, not blue —
--color-primary(#ff0030) is the signature red. It drives primary CTAs, active tabs, and urgent badges. This replaces the blue that most frameworks (Bootstrap, shadcn) use as default primary.Semantic colours form a status language —
info(blue),success(green),warning(amber),error(red). Each maps to a clear emotional state. Never use a semantic colour decoratively — if it is not informing, succeeding, warning, or erroring, it stays monochrome.Base is three-deep —
base-100(black) →base-200(near-black) →base-300(dark gray). Every surface elevation is a lighter step from#000000. No coloured surfaces, no gradients — only luminance shifts.Content always contrasts its surface —
--color-base-content(#f5f5f5) lives on--color-base-*backgrounds;--color-primary-contentlives on--color-primary. Never place a content token on a surface token from a different family. The pairing is enforced by naming.Secondary is the light switch —
--color-secondary(#f5f5f5) inverts the dark hierarchy. It is the canvas for light-mode cards and the text colour on dark surfaces. The OS is either dark (base family) or light (secondary family); there is no in-between.Accent is not the accent —
--color-accent(#6e7b86) is a muted gray-blue for metadata, timestamps, and secondary labels — not for interactive highlights. The real accent is--color-primary(red). The naming is a daisyUI convention; the role is purely informational.Neutral is the disabled dialect —
--color-neutral(#8a8a8a) handles every "off" state: disabled buttons, empty placeholders, inactive nav items. It sits exactly betweenbase-300andbase-contentin luminance so it is visible but never demanding.One semantic colour per view — A screen should communicate at most one status at a time. If the view is in an error state (
--color-error), it should not also show a success banner (--color-success). Stacking status colours cancels the signal.No colour is decorative — Every token maps to a functional role: base (background hierarchy), primary (interactive), semantic (status), neutral (disabled), accent (metadata). If an element does not fit one of these roles, it should not carry a colour.
Rounded everything —
--radius-selector,--radius-field, and--radius-boxare all2rem. Every corner shares the same pill radius. The shape language is consistent across buttons, inputs, cards, and badges. Sharp corners do not exist in this system.