Brand resources.
For everyone at SCV: our logo, colors, fonts and icons, and how to use them.
About
SCV is a boutique technology partner. Focused on software excellence since 2011.
The emphasis on "soft" in our logo reflects that expertise, and its two type styles keep the identity clean, modern and versatile. Use these resources so everything we make, from a slide to a LinkedIn post, looks like it comes from the same place.
Key facts
- Founded
- 2011
- Based in
- Buenos Aires
- What we do
- Custom software development
- Website
- scvsoft.com
Logo
Our logo reflects who SCV is today: a boutique technology partner focused on software excellence. The emphasis on "soft" reinforces our expertise, while the combination of two typography styles creates a clean, modern and versatile identity.
Technical aspects
Tight kerningAccentBold weightRegular weightLogo types
Logotype
Primary logo
- Website headers, hero sections and main navigation
- Email signatures and digital communications
- Social media cover photos and banners
- Default choice when horizontal space is available
Isotype
Brandmark
- Compact spaces where the full logotype would be illegible
- Social media profile pictures and avatars
- Favicon for websites
- Watermarks on images and videos
- Badge or stamp applications
Pick a version
Prioritizing contrast. Always select the logo variation that provides the strongest contrast with its background. Use Color by default, and the Mono versions on photos and busy backgrounds, or when only one color is available.
On light backgrounds
On dark backgrounds
On SCV green
Mono only.
On light backgrounds
On dark backgrounds
On SCV green
Mono only.
Tiles for avatars and favicons
The background is part of the file.
Logo size and spacing
Do's and don'ts
Keep it simple. Respect our logo guidelines; there is a solution for different use cases.
Do
Don't
Colors
One brand, two levels of expression. The primary palette is the most recognizable expression of the SCV brand: built around our signature green and supported by violet, black and neutral tones. Click a swatch to copy its hex value.
Brand
Neutrals
Backgrounds and logo. The tones we build pages on, and the logo color for each.
Text
Which color to set text in. Primary for headings and body copy, secondary for captions and supporting lines. Pick the pair that matches your background.
Typography
A candid approach. Be Vietnam Pro is a modern neo-grotesk designed for digital environments. Its clean structure reads easily while keeping a warm, approachable feel: precise and professional, yet human and collaborative. It's free on Google Fonts.
Be Vietnam Pro
Human layer for intelligent technology.
Body text is set in Light so long paragraphs stay easy to read. Keep lines short and give text room to breathe.
Download the logo
Legibility first
- Line length
Pay close attention to line length and line spacing to maximize legibility.
- Sizing
For typographic hierarchy, reduce the font size by roughly 1/3 as you ladder down from headers to body. And 50% from body to subcopy.
- Line spacing
Line spacing should be between 120–140% for standard body copy and 100–120% for headers.
Tokens
The same steps everywhere. Spacing and corner radius come from the SCV Website Design System in Figma, the same variables scvsoft.com uses. Pick from these instead of setting values by eye.
Spacing
Names are steps, not pixels. Each step is 4px: Spacing/4 is 16px, Spacing/8 is 32px.
- Spacing/14px
- Spacing/28px
- Spacing/312px
- Spacing/416px
- Spacing/520px
- Spacing/624px
- Spacing/832px
- Spacing/1040px
- Spacing/1248px
- Spacing/1664px
- Spacing/2080px
- Spacing/2496px
- Spacing/32128px
Radius
Corners, from soft to round. Radius/full turns any box into a pill.
Icons
A wide range library. We use Phosphor icons for their clarity, versatility and consistent visual language. Simple, expressive and easy to recognize, they communicate actions and ideas with precision across design and development.
Click an icon to copy it as PNG for Google Slides, Docs or Gmail. Copy SVG to paste into Figma. Icons paste at the size you pick.
How to use them
- Find it
Search by name on phosphoricons.com. Try simple words like "chat" or "download".
- Get it
Click the icon, pick Light or Duotone, and download it as SVG or PNG, or copy it. In Figma, use the Phosphor Icons plugin.
- Use it
Color it like the text next to it, or SCV green for emphasis. Common sizes: 16, 20, 24 and 32px.
Technology icons
From logo to icon. We use tech logos (Shopify, AWS, and so on) as icons across different platforms, in our own monochrome, shadeless versions. The design team makes these; ask us below.
- Monochrome and shadeless. Simplify shadows and use exclusion to give the duotone effect.
- Modify the original logo without changing its original shape.
- Keep font-based logos legible.
141 icons
Photos
Real photos of our team and office. Use them in decks, documents and posts. Click a photo to copy it, or download the full size.
Using photos
- Crop, don't stretch
Resize from a corner so the photo keeps its shape. Keep faces and hands whole.
- Keep the real colors
No filters, tints or heavy edits.
- Text on calm areas
Place text where the photo is plain, or next to it, not over faces.
Decks
Start a new deck from our template, or show the company deck as it is.
Coming soon
Voice and tone
How SCV sounds and the words we use, in posts, decks, proposals, emails and our products. We're working on it.
Voice
Who we are when we write: precise and professional, yet human and collaborative.
Tone
How our voice adapts to the moment, from a LinkedIn post to a client proposal.
Vocabulary
Words we use and words we avoid, and how to write SCV, scvsoft and our product names.
Coming soon
Motion and digital
How SCV moves and the building blocks for anything digital: the website, products, presentations and social. We're working on it.
Motion principles
Easing, timing, and how things enter and leave, so everything we make moves the same way.
Motion applications
Logo animations and transitions for videos and presentations.
Components and libraries
Reusable pieces from the website and our design systems, ready for new projects.
Coming soon
Resources for developers
The brand in code: tokens, components and assets ready to drop into a project, so what you build looks like SCV from the first commit. We're working on it.
Design tokens
Colors, spacing, type and motion as CSS variables and a Tailwind theme, the same ones scvsoft.com uses.
Components
React components and motion effects shared with the website, with how to install and use them.
Logo and icons in code
The logo, mark and tech icons as SVG and React components, plus favicons and app icons.
Need something else?
Can't find what you need here? Ask the design team with a design request.
How to fill a request
Requests are GitHub issues in the design team's board, so sign in to GitHub with your SCV account first. Use a Creative Design Request for brand, marketing and website pieces, and a Product Design Request for bugs, improvements and new features in SCV apps.
Open the Creative Design Request form to ask for: Brand, Case study, Deck, Marketing or social, Website, Icons, Other.
Open the Product Design Request form to ask for: Request type: Bug, Improvement, New feature; App: Website, Intranet, Market Audit Tool, Pronto, Lore.