01 · RSX Design
Principles
Six rules every RSX design decision is checked against. Each one says what it means in practice and ends with the question that tests it. When two rules pull against each other, clarity wins.
Function before decoration
Every element has a job. If it has none, it goes.
A rule separates two things. A label names a value. A colour marks a state. Nothing is added to fill space or to look designed, and anything that stops doing its job is removed rather than restyled.
Do
- Use hairlines, spacing and type weight to build hierarchy before reaching for anything else.
- Keep a background grid only where it gives a measure (a masthead, a specimen), and fade it out.
- Remove an element that no one would miss.
Don't
- Gradients, glass, glows, drop shadows or textures applied for effect.
- Illustration, mascots, stock photography, or icons beside every heading.
- Cards around content that is already grouped by a heading.
The testWhat does this element do for the person using the page?
Consistency without uniformity
Share the system, not the layout.
Every RSX surface uses the same tokens, faces, lockup and parts, so they read as one brand. Within that, each takes the shape its content needs: a register of documents is not a service page, and neither is a dashboard. Products share the grid with RSX, not its symbol.
Do
- Use the published tokens and type roles exactly; extend them only through this reference.
- Shape a page around its content: a register for documents, a table for specifications.
- Give a product its own mark on the shared grid.
Don't
- Force two different things through one template so they look alike.
- Add a one-off colour, face or radius for a single page.
- Recolour or relabel the RSX symbol to make a product mark.
The testWould someone recognise this as RSX with the logo removed, and does it still fit what it holds?
Clarity is not optional
If it can be misread, it will be. Say it plainly.
State what something is, what it does and where it stands, in words. Status is written, not just coloured. Links say where they go. A page that has not decided something says so instead of implying it has.
Do
- Write states as words ("Open", "Public testing", "Failed") and add a marker shape.
- Label links by destination: "Get the files", not "Click here".
- Mark undecided things as undecided.
Don't
- Rely on colour alone to tell permitted from prohibited, or success from failure.
- Hide a limitation in small print or leave it out.
- Use marketing claims in place of facts ("blazing fast", "next-generation").
The testCould someone act correctly on this page with colour turned off and no prior knowledge?
Name follows function
A name says what the thing does.
Services are "RSX" plus their function: ID, CDN, Legal, Design. Products are named for their role in the system: Native is the operating system, Node the agent on each machine, Link what connects them. A name never needs explaining before the thing does.
Do
- Name a service RSX plus a plain noun for its job.
- Use the same name everywhere: in the interface, the URL, the documentation.
- Name buttons and links by the action they take.
Don't
- Abstract or hype names: Pulse, Nexus, Ignite, Quantum, Hyper.
- Version numbers or codenames as public names.
- Different names for one thing in different places.
The testCould someone guess roughly what this does from its name alone?
Design for real use
Design for the person on a phone, on a slow connection, using a keyboard.
RSX interfaces are mobile-first, keyboard-operable and readable by assistive technology. Contrast is measured, not judged by eye. Tables stay usable on a narrow screen. Pages work before their scripts load and respect reduced motion.
Do
- Start from a 360px-wide layout and add columns as space allows.
- Give every interactive element a visible focus state and a text name.
- Measure contrast against WCAG 2.2 AA and state any exception openly.
Don't
- Put anything that matters behind hover alone.
- Let a wide table scroll off the side of a phone without a narrow layout.
- Animate anything that ignores prefers-reduced-motion.
The testDoes this work with a keyboard, a screen reader and a 360px screen?
Deliberate restraint
Red is a signal. Use it as one.
The palette is paper, ink and greys, with RSX red marking the mark itself, the current state and the thing to look at. Motion is fast and functional. Large type is for statements; reference pages are set for scanning. Restraint is what makes the accent mean something.
Do
- Use red for the symbol, the active state, focus, and short index labels.
- Keep transitions under 200ms and limit them to feedback.
- Keep headings large on editorial pages and compact on reference pages.
Don't
- Fill large areas with red, or use it for running text.
- Entrance animations, parallax, or anything that moves on its own.
- Several accents competing on one screen.
The testIf one thing on this screen is red, is it the thing that matters most?