01
Logos
Ctrl Key Mark
App icon, favicon, standalone mark. Use on Paper or White backgrounds.
Portfolios Folder Mark
Product-specific mark for Ctrl Class Portfolios. Use on white or light backgrounds.
Horizontal Lockup
Primary brand lockup for nav, headers, and marketing. Use on Navy or Paper.
02
Colour
Command Navy
#0E2138
Primary brand. Dark surfaces, nav, hero, cards.
Signal Green
#5FDC8C
Accent only. "Open"/unlocked states, key text, CTA colour on navy.
Deep Teal
#1C4A52
Secondary surfaces. MAT band, folder motif, secondary cards.
Ink
#0A1626
Near-black for footer and deepest text. Maximum depth.
Paper
#F4F7F6
Page background. Warm off-white — never pure white at page level.
Muted #5A6B72 — body text, secondary labels
Amber #E8B84B — scheduled/timetabled states
Lock Red #E07A6B — locked state indicator
Deep Green #2E6B5A — readable green text on light bg
03
Typography
Display & UI — Space Grotesk
Space Grotesk
Weights 400, 500, 600, 700 · Display headings, navigation, UI labels, buttons, eyebrows
Ctrl Class
Lock down a class in seconds.
Private by design
How it works
Body — Inter
Inter
Weights 400, 500, 600, 700 · Body copy, feature descriptions, UI data, captions
Lock and unlock student Google Drive portfolio folders for non-exam assessment.
Students are never added as Shared Drive members. Each access grant is per-folder and per-student, making cross-student access structurally impossible.
Annual subscription · GDPR-ready · UK schools & MATs
04
Signature — the Ctrl key
The keycap is Ctrl Class's signature design element. It echoes the physical Ctrl key — the product's naming root — and appears consistently as the primary button style, favicon chip, and nav brand mark.
The keycap uses a navy gradient face with a darker bottom edge simulating the physical profile of a keyboard key. On hover it depresses 2px; on active press, 4px. The Signal Green label text creates immediate visual association with the "open/active" state the product controls.
Use across three size registers: large (app icon, brand hero), medium (nav chip), small (inline UI chip). Never flatten, recolour, or render without the bottom-border depth effect.
Keycap anatomy
Face gradient #16304D → #0A1A2E (top to bottom)
Side/edge border 1px #2A4A6B
Bottom border 4px #2A4A6B (creates depth)
Shadow 0 4px 0 rgba(0,0,0,.16)
Corner radius 12px (button), 10px (nav), 9px (small)
Label Signal Green #5FDC8C, Space Grotesk 600
05
Usage
Do
- Maintain clear space equal to the height of the "C" in "Ctrl" on all sides of the mark or lockup.
- Use Signal Green (#5FDC8C) as an accent only — for key text, active state indicators, and button labels on navy.
- Use the lockup on Navy (#0E2138) or Paper (#F4F7F6) backgrounds for maximum contrast and clarity.
- Always pair Space Grotesk (headings/display) with Inter (body). Use them together, not interchangeably.
- For green text on a light background, use Deep Green (#2E6B5A) — Signal Green fails contrast on white.
- Apply the full keycap treatment (gradient face + bottom-border depth) to every primary button.
Don't
- Don't recolour the Ctrl key mark or the Portfolios folder mark. The green-on-navy relationship is the identity.
- Don't stretch, rotate, skew, or add drop shadows to any logo asset.
- Don't use Signal Green as a large fill or background colour — it overwhelms and loses its accent role.
- Don't set body copy in Space Grotesk. It is a display face; Inter carries running text at every size.
- Don't place the navy lockup on a busy photo without a dark scrim — insufficient contrast undermines legibility.
- Don't use amber (#E8B84B) for anything other than scheduled/timetabled folder states — it carries a specific meaning in the product UI.