Visual foundations
Use warm paper, dark ink and gold with clear functional roles. These colours define the brand palette. The product team may use adjusted shades where smaller text or controls need stronger contrast.
| Role | Value | Use |
|---|---|---|
| Ink | #292820 | Primary text, linework, dark surfaces |
| Paper | #faf9f5 | Warm background |
| Gold | #fdcc52 | Accent and backgrounds with dark text |
| Muted | #666459 | Secondary text on paper |
| Link | #795500 | Readable links and emphasis on paper |
| Line | #deddd3 | Decorative separation; not sufficient as the only input boundary |
Measured source pair ratios: ink/gold 9.82:1; ink/paper 14.05:1; muted/paper 5.64:1; link/paper 6.40:1. White/gold is 1.51:1 and excluded from normal text. These are individual contrast checks, not full WCAG certification.
Logo
Use the supplied artwork without redrawing or stretching it. Keep clear space of at least one quarter of the symbol’s width. Display the full symbol at 24 pixels or larger. At smaller sizes, use a dedicated browser icon and check it remains clear.
The public spelling is RoundTab; the wordmark dot is graphic styling. Use RoundTab Ltd where a legal reference is needed. Do not distort, rotate or redraw the mark, place it on busy imagery, or treat generated illustration lettering as a logo source.
Typography and layout
Use Inter for marketing, social graphics and general brand materials. Use Regular (400) for body text, Medium (500) for labels and Semibold (600) for headings. Use Bold (700) for occasional short campaign headlines. The logo keeps its existing lettering, separate from Inter. Its proportions and spacing are fixed; use its artwork rather than typing a replacement. Keep email text in Arial where custom fonts are unavailable.
| Style | Size / line height | Weight |
|---|---|---|
| Campaign headline | 48 / 52 px | Bold 700 |
| Page heading | 36 / 40 px | Semibold 600 |
| Section heading | 24 / 30 px | Semibold 600 |
| Body | 16 / 26 px | Regular 400 |
| Caption | 14 / 20 px | Regular 400 |
| Button or short label | 16 / 22 px | Medium 500 |
These are starting sizes for ordinary web layouts. Scale social artwork for its canvas and check readability at actual feed size. Keep body lines around 45–75 characters. Use sentence case and left-aligned paragraphs. Avoid long passages in capitals or artificial italics.
A clearer way to order.
Download Inter for your computer or Inter web font with its licence. The supplied logo lettering is outlined, so its appearance does not depend on an installed font.
Buttons and information panels have gently rounded corners. Buttons should be large enough to press comfortably, including on a phone.
Logo in practice
Use the horizontal lockup when introducing RoundTab. Use the symbol alone for avatars, browser icons and compact spaces where the name is already clear. Keep the symbol at least 24 pixels high; the lockup follows the same minimum symbol height.
Leave at least one quarter of the symbol’s width clear on every side.
Use light lettering on ink with a gold dot. On paper, use ink lettering with the darker amber dot. Keep the gold symbol unchanged.
Use the symbol alone for a profile picture. Keep it comfortably inside the circular crop.
Avoid: stretching the artwork or rebuilding the lettering.
Use: ink text on gold. Keep one clear message.
Avoid: white text on gold. It is difficult to read.
Functional states
Review default, hover, keyboard focus, disabled, loading, validation, error and empty states in the app. Keep persistent input labels and readable text errors. Preserve semantic alert meanings and do not rely on colour alone. Meaningful images need alt text; decorative marks should not be announced redundantly. Respect reduced-motion preferences for animation.
Browser and phone icons
Use the supplied browser icons at their intended sizes. Small browser icons keep transparent outer corners; phone home-screen icons use a solid gold background. Use the symbol alone rather than squeezing a wordmark into a tiny space.
Supporting interface colour
Use a darker amber for small text, selected navigation and controls on light backgrounds. A lighter gold can work on dark backgrounds. Keep these functional shades distinct from the bright gold used for large brand accents.
Use green, amber and red with clear wording for success, warning and destructive states. Never use brand gold to erase the difference between them.