Context
Complex digital products require more than individual screens. They need systems that maintain consistency across hundreds of interactions, support multiple teams, and scale beyond initial assumptions.
This Design System was created to explore how foundational decisions—color, typography, spacing, components—can be structured to support long-term product evolution while reducing friction in day-to-day design work.
The goal was not to design for a specific product, but to establish principles and patterns that could adapt to different contexts while maintaining coherence.
Goals
Establish a consistent visual language
Create clear rules that reduce ambiguity and enable faster decision-making across teams.
Enable reusable, modular components
Build components that work independently but combine seamlessly for complex interfaces.
Support fast iteration and collaboration
Reduce time spent on repetitive decisions so teams can focus on solving user problems.
Ensure accessibility and clear hierarchy
Bake accessibility into every component and maintain visual hierarchy by default.
Create a system adaptable to different product contexts
Design foundations flexible enough to support diverse use cases without constant customization.
Design Principles
These principles guided every decision across the system, from color tokens to component behavior.
Clarity over decoration
Every visual element should serve a purpose. Remove anything that doesn't improve understanding or usability.
Consistency before customization
Establish strong defaults. Customization should be intentional and rare, not the norm.
Flexibility through modularity
Components should work independently but combine predictably. Avoid rigid, one-size-fits-all solutions.
Accessibility by default
Accessibility isn't optional. Contrast, focus states, and semantic structure are built into every component.
Scalability beyond a single product
Design for the system, not just the current use case. Anticipate growth without over-engineering.
Foundations
Strong foundations reduce friction. These core decisions inform every component and pattern in the system.
Color System
Colors are organized into semantic tokens—not arbitrary values. This ensures consistency and makes theming straightforward.
colors
#444444
main text
#727272
subsections
#BCBCBC
secondary text
#E0E0E0
disabled
#F5F5F5
gray background
#FFFFFF
white
#444444, 80%
rgba(68,68,68, 0.8)
modal background
#00ACCA
highlighting information
#0097B1
highlighting information hover
#B2C535
availability/success
#A0AF00
availability/success hover
#EBBD06
caution
#EB9D06
caution hover
#AA2314
alerts/errors
#89130A
alerts/errors hover
#0F3D4A
paypal related
#325F95
facebook related
#000000
paypal related hover
This is the list of colors used across the website applied on typography, backgrounds, and buttons. When using these, pay special attention to their application on different elements such as Typography and Buttons, since only certain colors will apply.
Typography
Type hierarchy is established through size, weight, and spacing—not decoration. Every level has a clear purpose.
typography
sizes
mada, 48px
font-size: 48px;
for titles on static website pages.
mada, 30px
font-size: 30px;
for page titles
mada, 24px
font-size: 24px;
for section titles/highlighting text.
mada, 18px
font-size: 18px;
for subtitles or highlighting text in a specific context.
mada, 16px
font-size: 16px;
DEFAULT
default text size. used for text, labels, buttons, etc.
mada, 12px
font-size: 12px;
for extra details or underemphasized information.
colors
#444444
DEFAULT
main text color
#727272
section descriptions (e.g. under label or title)
#BCBCBC
secondary text color
#E0E0E0
disabled text over white / secondary text color over a dark background.
#FFFFFF
main text on dark background
#00ACCA
for highlighting information
#B2C535
for availability/success
#EBBD06
for caution
#AA2314
for alerts/errors
modifiers
mada, regular
DEFAULT
font-weight: regular;
for main text
mada, regular
font-weight: bold;
for highlighting text
capitalization
Great Page Title
Page titles should be capitalized, while other subtitles within the page will not need this treatment.
Create an information hierarchy making use of this collection of font sizes, colors, and modifiers.
Avoid using uppercase titles or subtitles, and avoid underlining text (underlining is reserved for anchors).
Grid, Spacing & Layout
An 8px base unit creates consistent rhythm. The grid adapts to different screen sizes while maintaining proportional relationships.
Spacing Scale
Grid System
12-column grid
Flexible, responsive layout foundation
24px gutter
Consistent spacing between columns
Breakpoints
640px, 768px, 1024px, 1280px
Core Components
Buttons
colors
Primary Button
a page's main action
color: #FFFFFF
bg-color: #00ACCA
bg-hover: #0097B1
Default Button DEFAULT
default button for secondary actions
color: #FFFFFF
bg-color: #BCBCBC
bg-hover: #727272
Alert Button
"dangerous" actions
color: #FFFFFF
bg-color: #AA2314
bg-hover: #89130A
Agreeing Button
secondary CTA's
color: #FFFFFF
bg-color: #B4C600
bg-hover: #A0AF00
Facebook Button
facebook related actions
color: #FFFFFF
bg-color: #325F96
bg-hover: #0F304A
Paypal Button
paypal related actions
color: #FFFFFF
bg-color: #0F304A
bg-hover: #000000
Disabled Button
inactive state
color: #BCBCBC
bg-color: #E0E0E0
Form Elements
controls
dropdown
Empty state
border-color: #BCBCBC;
text-color: #BCBCBC;
With input
border-color: #BCBCBC;
text-color: #444444;
With input
border-color: #BCBCBC;
text-color: #444444;
Selected/focused
border-color: #727272;
text-color: #444444;
Disabled (no input)
border-color: #E0E0E0;
text-color: #E0E0E0;
background: #F5F5F5;
Disabled (with input)
border-color: #E0E0E0;
text-color: #BCBCBC;
background: #F5F5F5;
This input is not valid.
Error
border-color: #AA2314;
warning-color: #AA2314;
This input has a warning.
Warning
border-color: #EB9D06;
warning-color: #EB9D06;
metrics
10px
10px
Warning
8px
Dropdowns follow the same color and state patterns as other form inputs, ensuring consistency across the interface.
Metrics display key measurements and spacing values used throughout the component system.
form layout
labels
position
labels should be on top of inputs with the exception of labels that are part of an input component.
required
* indicates required field
the required symbol (*) should only be included on forms that contain at least one optional field, along with a legend that explains what * represents.
If all inputs of a form are required, there's no need to add the symbol.
spacing
To ease an input's interpretation, we place the labels above the input.
The nearest the label is to an input, the faster a user will associate it with an input. Also, this allows for the user to capture both elements with a single eye movement.
Labels should be lowercase, uppercasing only their first letter.
styles
Filled
primary style
Outline
secondary style
Ghost
tertiary style
Link
text link
sizes
Large
18px, for primary CTAs
Medium DEFAULT
16px, standard size
Small
14px, for compact spaces
Extra Small
12px, for dense layouts
states
Default
normal state
Hover
mouse over
Active
pressed state
Disabled
inactive state
with icons
Icon Left
icon before text
Icon Right
icon after text
Icon Only
square icon button
Rounded Icon
circular icon button
Usage Examples
The system adapts to different interface scenarios while maintaining consistency. These examples demonstrate flexibility without fragmentation.
Dashboard Interface
Metric Title
+12%2,847
Metric Title
-3%1,234
Content Layout
Content Title
Brief description of the content item with supporting details and context.
Content Title
Brief description of the content item with supporting details and context.
Learnings
Systems thinking requires patience
Designing systems means thinking beyond immediate needs. It's tempting to solve for the current use case, but strong systems anticipate future complexity without over-engineering.
Clear rules reduce friction
When foundations are well-defined, decisions become faster. Teams spend less time debating spacing or color choices and more time solving user problems.
Constraints enable creativity
A limited palette and strict spacing rules don't limit creativity—they focus it. Constraints force better solutions.
Documentation is design work
A system is only as good as its documentation. Clear usage guidelines and examples are as important as the components themselves.
Next Steps
Design systems are never finished. These enhancements would strengthen the system's flexibility and reach.
Token Automation
Automate design token generation and synchronization between design tools and code to reduce manual updates and ensure consistency.
Dark Mode Support
Expand the color system to include comprehensive dark mode tokens and ensure all components work seamlessly in both themes.
Expanded Documentation
Create interactive documentation with live code examples, usage guidelines, and accessibility notes for every component.
Cross-Platform Scalability
Adapt the system for mobile platforms and ensure components translate effectively across web, iOS, and Android.
This Design System demonstrates that strong foundations enable better design decisions. By establishing clear principles and reusable patterns, teams can move faster while maintaining consistency and quality.