Brand System
v1.0
tasteink

Same great value, great new taste.

4Brand Colors
DMSans Typeface
Possibilities
0Compromises
Scroll to explore
01

Color System

Neons that cut through the dark. No fucking blue. Ever.

Brand Neons

Neon GreenClick to copy

Primary actions, success states, key highlights

#39FF14oklch(0.85 0.28 145)
Neon PinkClick to copy

Secondary accents, badges, emphasis

#FF1493oklch(0.75 0.25 350)
Neon PurpleClick to copy

Tertiary accents, tags, categories

#BF40BFoklch(0.7 0.25 300)
Neon OrangeClick to copy

Warnings, attention, call-outs

#FF6B35oklch(0.8 0.22 55)

Grayscale Palette

Pure WhiteHeadlines, primary text#FAFAFA
Light GrayBody text, descriptions#A0A0A0
Muted GraySecondary text, captions#707070
BorderDividers, outlines#2A2F2A
SurfaceCards, elevated surfaces#141814
BackgroundPage background#0A0F0A

Usage Rules

Do This

  • Use neon colors for interactive elements, badges, and key highlights
  • Maintain high contrast between text and backgrounds
  • Use white sparingly for hierarchy
  • Scatter brand colors throughout the UI—don't be shy

Never Do This

  • Never use blue. Seriously. Not even close.
  • Don't place similar background colors on top of each other
  • Avoid pure black (#000000) backgrounds
  • Don't use neon colors for large text blocks
02

Typography

DM Sans. Clean, geometric, unapologetic. One typeface. Infinite expression.

Primary Typeface

DM Sans

Google FontsOpen Source

The quick brown fox jumps over the lazy dog.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()

Font Weights

AaLight300
AaRegular400
AaMedium500
AaSemibold600
AaBold700
AaBlack900

Type Scale

Display

Fuck it, I guess.

72px / 4.5rem700LH 0.9
H1

Fuck it, I guess.

48px / 3rem700LH 1.0
H2

Fuck it, I guess.

36px / 2.25rem600LH 1.1
H3

Fuck it, I guess.

24px / 1.5rem600LH 1.2
H4

Fuck it, I guess.

20px / 1.25rem500LH 1.3
Body

Fuck it, I guess.

16px / 1rem400LH 1.6
Small

Fuck it, I guess.

14px / 0.875rem400LH 1.5
Caption

Fuck it, I guess.

12px / 0.75rem500LH 1.4

Text Hierarchy in Action

Headlines demand attention.

Body text carries the message. It's readable, comfortable, and gets the job done without stealing the spotlight. Keep it gray, not white.

Secondary text provides context and additional information. It fades into the background while remaining accessible.

LabelTagStatus
WhiteHeadlines, CTAs
GrayBody text
MutedSecondary
BrandAccents, labels
03

Components

No shade. Accessible borders. Ultra premium, zero bullshit.

Buttons

Primary Actions
Secondary Actions

Badges & Tags

ActiveFeaturedNewHotDefault
• Online• Premium• Limited• Archived

Cards

Active2 min ago

Project Alpha

Breaking conventions since day one. No rules, just results.

@creator
DraftYesterday

Campaign Beta

Still cooking. The best things take time to burn bright.

@team
ArchivedLast week

Legacy Drop

Done and dusted. History in the making.

@archive

Tabs & Navigation

Primary content area. The main stage.

Form Elements

Input States
Default
Focused / Active
Error
Disabled