Brand guidelines
A single reference for how SmallConvert should look, read, and behave across marketing pages, product interfaces, and future features.
Identity
- Use the lowercase smallconvert wordmark with the document mark.
- Keep clear space equal to the mark’s width around the complete lockup.
- Never recolor the orange conversion stroke or stretch, rotate, outline, or rebuild the mark.
Favicons
Document + orange conversion stroke
Use the SVG master at /icon.svg. Preserve the white tile, dark document outline, and orange stroke.
Typography
Clear tools, human language.
Use 800 for major headlines, 700 for controls and section titles, 600 for emphasis, and 400 for body copy. Display text uses tight tracking and balanced wrapping.
PNG → WEBP · 1.8 MB · JOB_8F2A
Reserve mono for metadata, formats, code, keys, compact labels, and technical values.
Color
Signal Orange #EE8B4F
Primary actions, links, focus, and compact accents
Signal Dark #D9743A
Hover and pressed states
Ink #171717
Primary light-mode text
Paper #FFFFFF
Primary light-mode surface
Soft Paper #FAFAFA
Secondary light-mode surface
Line #E5E5E5
Borders and separators
Dark Paper #111111
Primary dark-mode surface
Dark Raised #181818
Secondary dark-mode surface
Light mode is predominantly white. Dark mode uses neutral near-black surfaces. Orange is the only brand accent and should emphasize actions—not become a large background field.
Interface
- Use the shared shadcn Button, Input, Dialog, Navigation Menu, and Switch primitives everywhere.
- Primary actions are solid orange. Secondary actions are outlined. Use ghost buttons for low-emphasis controls.
- Controls use 10px radii, clear focus rings, concise labels, and predictable disabled states.
- Dialogs contain one task, a short title, optional supporting sentence, and right-aligned Cancel/Save actions.
Layout
Marketing
Centered navigation, spacious hero, focused converter, proof, then the three-column footer.
Dashboard
Fixed 236px left rail, compact identity and mode switcher at the bottom, max-width content area.
Content
Use a 6xl maximum width, 20–32px page gutters, visible hierarchy, and generous section separators.