Press kit
The Ramp Up logo, icon and colours, ready to use in an article, a talk or a partner page.
Ramp Up in a few words
Ready to quote, as they are or shortened.
Short description
Ramp Up offers online courses in digital accessibility, one short lesson at a time, starting with how to audit a website against RAWeb, the Luxembourg web accessibility framework.
Long description
Ramp Up offers online courses in digital accessibility for designers, developers, project and product owners, and future auditors. Its first course, “Become a RAWeb auditor”, goes from the first steps in accessibility to a first complete audit against RAWeb, the Luxembourg web accessibility framework.
Lessons are short, written in plain words and full of real examples. Learners practise on a website made for the exercise, check what they know with a quiz after each module, and read the official RAWeb text with an explanation. At the end of a course, they earn a certificate that anyone can verify online.
The first modules are free with an account. A one-time payment of €79, excluding VAT, gives lifetime access to every course, current and future, including offline reading in the Ramp Up app.
Ramp Up is created and taught by Geoffrey Crofte, who has worked in design, front-end development, design systems and accessibility since 2008, and is published by Crofte Studio S.à r.l.-S in Luxembourg.
What the logo means
The icon is a ramp, drawn three times. Each way of looking at it tells a part of the story.
A ramp
The simplest picture of access: a way in, open to everyone.
Growing skills
A line that rises step by step, like what you know as you go through the courses.
Layers
Accessibility is built in layers, each one resting on the one below.
An open book
Together, the ramps look like the pages of an open book: knowledge, shared.
Logo and icon
Logo
For light backgrounds
Logo
For dark backgrounds
Single-colour logo
For light backgrounds
Single-colour logo
For dark backgrounds
%20scale(20.5)'%3e%3cstop%20stop-color='%23F5A07A'/%3e%3cstop%20offset='1'%20stop-color='%235B4BDB'/%3e%3c/radialGradient%3e%3c/defs%3e%3cg%20id='mark'%3e%3cg%20clip-path='url(%23tile)'%3e%3crect%20width='32'%20height='32'%20fill='%235B4BDB'/%3e%3ccircle%20cx='3.5'%20cy='0.5'%20r='20.5'%20fill='url(%23glow)'%20opacity='0.4'/%3e%3cpath%20id='level-1'%20d='M18%2010L-5%2026L-0.5%2032L18%2023.5L18%2010Z'%20fill='%23FFFFFF'%20opacity='0.32'/%3e%3cpath%20id='level-2'%20d='M25%2013L-3%2029L8.2%2037L25%2027.6667L25%2013Z'%20fill='%23FFFFFF'%20opacity='0.62'/%3e%3cpath%20id='level-3'%20d='M32%2017L-3%2032L32%2032L32%2017Z'%20fill='%23FFFFFF'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
Icon
For light backgrounds
Single-colour icon
For light backgrounds
Single-colour icon
For dark backgrounds
App icon
For light backgrounds
Animated logo
For light backgrounds
It plays once when it loads, and stays still for people who ask their device to reduce motion.
Animated logo
For dark backgrounds
It plays once when it loads, and stays still for people who ask their device to reduce motion.
Colours
- Violet
#5B4BDBThe icon tile. - Coral
#F5A07AThe glow in the corner of the icon. - Ink
#16161DThe name, on light backgrounds. - Light ink
#F2F2F7The name, on dark backgrounds.
Using the logo
- Keep a clear space around the logo of at least a quarter of the icon’s height.
- Use the logo at 24 pixels high or more. Smaller than that, use the icon alone.
- Use the version made for the background: light, dark, or single colour when colour is not possible.
- Keep the logo as it is: no stretching, rotating, recolouring or added effects.
- In a sentence, write Ramp Up, in two words.
Colours of the platform
Every colour of the website and the app comes in a light and a dark theme. Text and controls keep the contrast ratios RAWeb asks for in both.
| Token | Light theme | Dark theme |
|---|---|---|
--color-bg | #F5F5F8 | #121218 |
--color-surface | #FFFFFF | #1C1C24 |
--color-surface-muted | #EEEEF3 | #262630 |
--color-text | #16161D | #F2F2F7 |
--color-text-muted | #5B5B6B | #B4B4C4 |
--color-border | #E2E2EA | #33333F |
--color-border-strong | #767686 | #85859A |
--color-primary | #5B4BDB | #A99BFF |
--color-primary-hover | #4A3BC4 | #C2B8FF |
--color-primary-soft | #EEEBFF | #2B2652 |
--color-on-primary | #FFFFFF | #16161D |
--color-selection | #5B4BDB | #5B4BDB |
--color-on-selection | #FFFFFF | #FFFFFF |
--color-success | #157F55 | #5FD39B |
--color-warning | #9A5B00 | #F2B45A |
--color-danger | #B42318 | #FF8F85 |
--color-accent-rose | #B0306E | #F28BBD |
--color-accent-coral | #A8461A | #F5A07A |
--color-highlight-violet | #E9E4FF | #3B3270 |
--color-highlight-rose | #FCE1EE | #5C2742 |
--color-highlight-coral | #FDE4D6 | #5A3220 |
--color-highlight-green | #D9F3E6 | #193D2D |
--color-cta-start | #4B3BC4 | #3A2C9C |
--color-cta-end | #7A3FB8 | #64308F |
--color-on-cta | #FFFFFF | #FFFFFF |
Typeface
The platform is set in Inclusive Sans, by Olivia King, a typeface designed for legibility: letters that look alike, such as I, l and 1, are easy to tell apart. It is free, under the SIL Open Font License.
- Light, 300Learn digital accessibility, step by step. Il 1 O 0
- Regular, 400Learn digital accessibility, step by step. Il 1 O 0
- Bold, 700Learn digital accessibility, step by step. Il 1 O 0
Icons
The icons come from Tabler Icons, by Paweł Kuna and contributors, under the MIT licence: outlined, with an even line. On the platform, an icon never carries a meaning on its own.
accessiblebook-2certificatechecklistcircle-checkclockcloud-downloadflaghomelanguagelist-checklockmessagesmoonrouteschoolsearchsuntrophyuserwifi-offworld
Anything else?
For an interview, a photo or another format, write to me.
My address:
The email is pre-filled: complete it and send it from your own email application.