Style Driven Design System

We build the brand. We create the assets. We make the presence consistent.

This is the internal design system for Style Driven. Every portal — sd-26, sd-portal, sd-sales, sd-team, sd-op, sd-email — pulls from the same source. One standard across every surface your customers touch.

What This Is

A component registry powered by the shadcn CLI. You don't install a package. You pull components into your project, own the code, and ship. Every component is styled with SD brand tokens — dark-first, lime CTAs, Inter Black Italic headlines.

What's In Here

• Setup — How to wire your portal to the SD registry and start pulling components.
• Brand Guide — Colors, typography, voice, logo rules. The full spec.
• Brand Hierarchy — Brand, Presence, Assets. The three-bucket framework.
• Why Brand — Why brand matters in business terms: revenue, time, reputation.
• Components — Every component in the SD registry and how to use them.

Quick Start

Copy# Add a component to your portal
npx shadcn add @sd/button
 
# Add multiple
npx shadcn add @sd/dialog @sd/input @sd/card

That's it. The CLI fetches the component from the SD registry, installs dependencies, and writes the file to your components/ui/ folder. You own the code.

The Standard

Every component follows the same rules:

• Dark-first. Light mode exists but dark is the default.
• Brand lime (#E3FE56) is the signal color. Use it to guide eyes — CTAs, highlights, active states.
• Red (#F02D3A) is emergency-only. If everything is red, nothing is.
• Inter Black Italic for headlines. All caps, tight tracking, no exceptions.
• Minimal by default. Every element earns its place.