Skip to content

DESIGN.md

Latest commit

 

History

History
172 lines (171 loc) · 8.28 KB

DESIGN.md

File metadata and controls

172 lines (171 loc) · 8.28 KB
Raw
name EMCSS Members App
colors
surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant tertiary-text
#1e331f
#131408
#393a2b
#0e0f04
#1b1c1c
#1f2113
#2a2a2a
#353535
#e4e2e1
#c7c9ab
#e4e4ce
#303123
#919378
#464832
#bdd100
#e7ff04
#001c95
#d8ef00
#5f6a00
#5a6400
#55a183
#003828
#046147
#8cd9b8
#ffffff
#15353a
#c8e8ef
#4b696f
#ffb4ab
#690005
#93000a
#ffdad6
#d8ef00
#bdd100
#1a1e00
#434b00
#a4f2d0
#89d6b5
#002116
#00513b
#c8e8ef
#acccd3
#001f24
#2d4b51
#131408
#e4e4ce
#343627
#adadad
typography
display-lg display-lg-mobile headline-md title-lg body-md label-md
fontFamily fontSize fontWeight lineHeight letterSpacing
Space Grotesk
3.5rem
700
1.1
-0.02em
fontFamily fontSize fontWeight lineHeight
Space Grotesk
2.5rem
700
1.1
fontFamily fontSize fontWeight lineHeight
Space Grotesk
1.75rem
600
1.2
fontFamily fontSize fontWeight lineHeight
Inter
1.375rem
500
1.4
fontFamily fontSize fontWeight lineHeight
Inter
0.875rem
400
1.6
fontFamily fontSize fontWeight lineHeight letterSpacing
Work Sans
0.75rem
500
1.0
0.05em
rounded
sm DEFAULT md lg xl full
0.125rem
0.25rem
0.375rem
0.5rem
0.75rem
9999px
spacing
unit section-gap-lg section-gap-xl list-gap container-padding
0.25rem
4rem
5rem
2rem
2.5rem

Design System: EMCSS Members App

1. Overview & Creative North Star

Our Creative North Star for the EMCSS Members App is "The Vibrant Hub." We are building a digital space that feels alive, energetic, and community-driven. Instead of a static directory, this system uses high-contrast greens, expressive motion, and layered depth to create a truly modern hangout. The experience should feel like flipping through a cutting-edge digital zine: punchy, welcoming, and brilliantly designed. By leaning into bold typography and sleek overlapping surfaces, we’re turning everyday community tools into a joyful, curated journey.

2. Colors & Surface Philosophy

Our color palette is rooted in a lush, high-contrast foundation. We use tonal depth to define our spaces, letting our vibrant greens do the talking!

Color Palette Highlights

  • Primary (The Spark): primary: #e7ff04 | on_primary: #001c95
  • Secondary (Cool Accents): secondary: #55a183 | on_secondary: #003828
  • Surface (Our Foundation): surface: #1e331f | on_surface: #e4e2e1
  • Tonal Variation: surface_container_low: #1b1c1c | surface_container_high: #2a2a2a

Ditch the Lines!

We prefer a clean, seamless look, which means we skip 1px solid borders for sectioning. Instead, we define boundaries beautifully through background color shifts. For example, dropping a surface-container-low section onto a surface background creates a clear, modern edge without the clutter.

Surface Hierarchy & Nesting

Think of the UI as a stack of sleek, physical layers:

  • Background: surface (#1e331f) - The deep green canvas.
  • Sectioning: surface_container_low (#1b1c1c) - The baseline structure.
  • Interactive Cards: surface_container_high (#2a2a2a) - Where the action happens.
  • Active Overlays: surface_container_highest (#353535) - Pop-ups and focus areas.

Glass & Gradients

To give the app that lively "Multimedia Computing" energy, we love using semi-transparent surfaces with a backdrop-blur of 12px-20px for floating navigation. For our main Call-to-Actions (CTAs), a subtle linear gradient (from primary to primary_container) adds a pulse of life that flat hex codes just can't match.

3. Typography: The Community Voice

Our typography pairs the bold, brutalist energy of Space Grotesk with the super-friendly readability of Inter.

Level Token Font Size Character
Display display-lg Space Grotesk 3.5rem High-impact, loud-and-proud headers.
Headline headline-md Space Grotesk 1.75rem Section titles; confident and clear.
Title title-lg Inter 1.375rem Content headers and vibrant card titles.
Body body-md Inter 0.875rem Standard reading text; modern and breezy.
Label label-md Work Sans 0.75rem Badges, metadata, and snappy tags.
Styling Tip: Give our labels a bit of breathing room with wide tracking (0.05em) for a polished, tech-forward aesthetic. Keep headline weights bold so they pop against our airy body copy!

4. Elevation & Depth

We make things stand out through Tonal Layering rather than heavy drop shadows.

Stack It Up

We create depth by "stacking" our surface containers. Placing a surface-container-lowest element on a surface-container-low section creates a natural, soft "lift."

Ambient Glows

Shadows are saved exclusively for "floating" elements (like Modals) to give them a glowing, ambient vibe rather than a harsh outline:

  • Blur: 40px - 60px
  • Opacity: 4% - 8%
  • Color: Tinted with on-surface (#e4e2e1) to mimic soft, natural light.

The "Ghost Border"

If a border is absolutely necessary for accessibility, we use our Ghost Border: the outline-variant token at 15% opacity. Heavy, 100% opaque borders just weigh our lively vibe down!

5. Components

Buttons

  • Primary: Solid primary (neon green) background. Keep those sharp 0.25rem (Default) corners for a snappy, tech-forward edge. Use on_primary for text.
  • Secondary: Ghost-style using the "Ghost Border" and primary text.
  • Hover States: Let them glow! Shift the background one tier higher on hover (e.g., primary to primary_fixed_dim).

Cards & Lists

  • The Vibe: Keep it flowing! No harsh divider lines.
  • Execution: Give list items breathing room using the 8 (2rem) spacing scale or subtle background color shifts.
  • Member Cards: Use surface_container_low for the card body. Add a fun label-sm tag in the top-right corner using a secondary_container fill to highlight member roles or status!

Input Fields

  • Text Inputs: Keep them sleek. No bottom borders or full outlines—just a subtle surface_container_high fill.
  • Focus State: When active, transition the background to surface_variant and add a snappy 2px primary accent line on the left-most edge to say, "We're ready for you!"

Tags & Metadata

Use the Work Sans label font for metadata (e.g., "MEMBER SINCE: 2024"). Treat these like fun little stamps on the UI, using tertiary (#adadad) text at 0.75rem.

6. Do’s and Don’ts

Do:

  • Do play with asymmetry! A header offset to the left while body copy sits centered creates great visual energy.
  • Do give content room to breathe using our 16 (4rem) and 20 (5rem) spacing scales.
  • Do use backdrop-blur to make scrolling navigation feel like magic.
  • Do treat metadata and small tags with love—they add so much character!

Don't:

  • Don't rely on heavy "Card Shadows" to separate content. Let our beautiful color blocks do the work.
  • Don't use stark 100% black (#000000). Always stick to our rich surface (#1e331f) for that lush, deep background.
  • Don't over-round the corners. Stick to our snappy 0.25rem (md) or none to keep the tech-forward feel intact.
  • Don't clutter the screen. If it feels busy, turn up the padding by 1.5x and let the design exhale!