Foundations
RyteByte builds software: Flutter and iOS apps, web apps, backends and automation. The brand should look like the work. It is exact, easy to read, and assembled from small identical units.
Brand personality
The name
Logo
Eight tiles spell RYTE BYTE. Three tiles are switched on. Read left to right, top to bottom, the pattern is 01010010, the ASCII byte for the letter R. That pattern is the logo as much as the letters are, so it never changes.
Approved versions
Ink is the default and matches client documents. Green is for brand moments: the website hero, a splash screen, a cover slide. Use one version per surface.
Construction
Clear space is half a tile on every side.
Minimum sizes
Byte mark
Proposed compact mark for approval: the tiles without letters. It keeps the R byte readable at sizes where the letters would fill in, so it serves as favicon, app icon glyph and avatar.
Misuse
Files
The byte system
The tile grid is the brand's one graphic device. Any character can be drawn as a byte: four tiles by two, most significant bit first, a dark tile for 1 and a grey tile for 0. Client documents already use it in text form, with binary lines on the NDA cover and footer.
Where it goes
Do
- Encode something true: a section number, an initial, a version.
- Keep the gap at about a quarter of the tile.
- Use ink for 1. Green is allowed when the byte is the only accent in view.
Don't
- Scatter random tiles as decoration.
- Use more than two bytes side by side outside the encoder and documents.
- Put text or icons inside byte tiles. Only the logo carries letters.
Colour
Black, white and four greys do nearly all the work, the way they do in the logo and the documents. Byte Green comes from the logo file and is the only brand colour. Click any swatch to copy its hex.
Primitives
Semantic tokens
Components use semantic tokens, never primitives. The token keeps its name and changes its value between light and dark.
| Token | Light | Dark | Used for |
|---|
Status colours
| Token | Light | Dark | Meaning | Always paired with |
|---|
Contrast, light theme
Contrast, dark theme
Proportion
Typography
Three families, all free on Google Fonts. Outfit echoes the plain geometric letters in the logo. IBM Plex Sans is for reading and interface. JetBrains Mono carries labels, data and code. Word and PDF documents stay in Consolas, as the NDA is set.
Families
Type scale
Rules
Do
- Outfit for headings at 20px and up, light or regular weight.
- Mono uppercase for labels, with
//in front of section labels. - Body copy at 45 to 75 characters per line.
- Tabular figures wherever numbers line up.
Don't
- Set paragraphs in mono on screen. Documents are the exception.
- Use Outfit below 18px or above weight 600.
- Use more than two sizes in one component.
- Letter-space lowercase text.
Spacing, sizing & layout
A 4px base. Every gap, padding and height is a multiple of it, so screens line up across web, Flutter and iOS without anyone measuring.
Spacing scale
Sizing
Grid & breakpoints
Page gutter: clamp(16px, 4vw, 56px). Content caps at 1320px. Section spacing: 64px, 96px on marketing pages.
Shape, borders & elevation
Corners are slightly rounded because the logo tiles are: the tile radius is one twelfth of its side. Depth comes from surface changes and hairlines. A shadow appears only on things that float above the page.
Radius
Elevation
Borders
Opacity
Z-index
Motion
Quick and exact. State changes snap like a bit flipping; panels and pages ease out. Nothing bounces.
Byte loader · steps, 150ms per tile
Standard ease · progress and panels
With reduced motion on, transitions drop to instant, the loader shows a static byte and nothing plays on its own.
Icons & imagery
Icons are drawn like the logo letters: one even line, no fills. Imagery is the product itself. Show real screens in plain frames.
Icons
Product frames
Phone · 2px ink outline
Browser · tile dots, no chrome
Do
- Real screenshots of shipped or in-progress work, with client consent.
- Flat outline frames on a surface or ink background.
- Crop to the part of the screen that makes the point.
Don't
- Stock photos of people pointing at laptops.
- 3D device mock-ups, glows or tilted perspectives.
- Screens from a client who opted out of portfolio use in their NDA.
Components
Live code, built only from the tokens above. Sample data is marked as example.
Buttons
Form fields
Labels sit above the field in mono. A switch is a bit: it shows 0 or 1 as well as changing colour. Errors say what to fix.
Status, tags & keys
Tabs
Project card & build table
Inventory app
Stock counts and transfers for warehouse staff, online or offline.
| Build | Platform | Version | Status |
|---|---|---|---|
| #0214 | iOS | 1.4.2 | ■ Shipped |
| #0213 | Android | 1.4.2 | ◆ In review |
| #0212 | Web | 1.4.1 | ✕ Blocked |
Example rows.
Code block
// Brand tokens, generated from this page class Rb { static const ink = Color(0xFF0E1110); static const accent = Color(0xFF006838); static const font = 'IBM Plex Sans'; }
Summary box, section bar & terminal line
// at a glance
- Your code, data and materials stay yours.
- Anything we build for you is assigned to you as it is created.
- Access is handed back and revoked when the work ends.
The summary box opens anything long: a proposal, a release note, a contract. Plain sentences first, detail after.
Feedback & empty states
No builds yet
Push to main and the first build appears here.
Product UI across platforms
The same tokens ship to web, Flutter and iOS. Names stay identical; only the syntax changes. Each platform keeps its own navigation habits and system controls.
Token mapping
Platform metrics
What stays native
Documents
NDAs, proposals, statements of work and invoices share one template. These specifications are taken from the current Client NDA. The pages below are a reduced drawing of it; documents print on white in either theme.
RYTEBYTE // NON-DISCLOSURE AGREEMENT
RYTEBYTE
software · flutter · ios · web · automation
NON-DISCLOSURE AGREEMENT
client confidentiality · code protection · ip retention
01001110 01000100 01000001 // N D A
› Your code, data and materials stay yours.
› This summary is for convenience only. The clauses below govern.
01 —PAGE 1— 10
RYTEBYTE // NON-DISCLOSURE AGREEMENT
3.1 Confidential Information does not include information the Receiving Party can demonstrate by written or electronic record:
[a] was lawfully in its possession before disclosure;
[b] is or becomes public other than through its own act.
FOR RYTEBYTE
NAME
SIGNATURE
FOR THE CLIENT
NAME
SIGNATURE
01001110 01000100 01000001 01001110 01000100 01000001
01 —PAGE 2— 10
Page & type
Building blocks
Document colours
Documents are black and white on purpose: they print cleanly and photocopy cleanly. Green never appears in a contract.
Voice & content
Write the way the NDA's summary box does: short sentences a client can act on, with the detail kept for whoever needs it.
Do write
- “Your code stays yours.”
- “Build #0214 deployed.”
- “Access is revoked when the work ends.”
- “Add the part after the dot, like .com.”
Don't write
- “We leverage cutting-edge solutions.”
- “Oops! Something went wrong.”
- “Your deployment has been successfully completed!”
- Acronyms a client would have to look up.
Formats
Interface copy
Accessibility
Target: WCAG 2.2 AA on every platform. These checks fail most often, so they are the ones to run before a release.
Implementation & governance
Tokens are the source of truth. Copy the block for your platform; the values are generated from the same table as the swatches above.
Fonts to load
<link rel="stylesheet" href="https://fonts.googleapis.com/css2? family=Outfit:wght@300;400;500;600 &family=IBM+Plex+Sans:wght@400;500;600 &family=JetBrains+Mono:wght@400;500;700 &display=swap">