About Terra
A design system by Syahrul
Terra is a small design system for web apps that are mostly used on mobile and also work on desktop. It's warm, soft, and made for products that need a more human touch than a typical clean, white interface, like a reading app.
It's a personal project, built from what I learned working on a real client product (the details are under NDA). It isn't client work, and it's not meant to be an enterprise system.
Who it's for
Designers first: Terra removes small decisions so you can move faster and stay consistent.
Developers second: it's a shared reference for what the design intends, so both sides speak the same language.
Principles
Warm, not sterile. Cream instead of pure white, soft contrast, gentle corners.
Fewer decisions. Text, border, and surface colors are already defined, so you don't pick them from scratch.
One brand color. Brand color carries emphasis and feedback. Red is only for destructive actions.
A guide, not a rulebook. Use it as is, or adapt it, as long as the warm feel stays.
Plain foundations, expressive content. Buttons and inputs stay simple. Charts and cards can have more personality.
What's inside
Foundations: color, typography, spacing, radius, shadows, icons
Components: 12 foundational components, responsive from mobile to desktop
Patterns: coming soon
Good to know
Terra is built around one niche look, so it won't scale easily to very different products.
It doesn't handle deeply nested layouts, like cards inside cards inside cards.
Content guidelines aren't included.
It's inspired by Untitled UI, with ideas from Visa, eBay, and Atlassian. I adapted the structure and made the color, type, and feel my own.
It's not open to contributions.
Getting started
Start with Foundations, then move on to Components.
Version 0.1, October 2026. Still being built.