How to design an elegant UI? Answer: Focus on the details, distinguish between primary and secondary elements, maintain a clean layout, ensure text readability, use rich colors, create natural layers, keep images within bounds, add the finishing touch, and ensure continuity.

This is Part 2, see Part 1

Rich Colors​

• From a designer's perspective, the HSL color wheel is more useful than RGB because its parameters are perceivable by the human eye:

  • Hue refers to the position/angle of a color on the color wheel.
  • Saturation indicates whether a color is gray or vibrant; 0% is gray, and 100% is the most vivid.
  • Lightness indicates whether a color is black or white; 0% is pure black, 100% is pure white, and 50% is pure color on the hue.

• You need far more colors than you think; five or six are far from enough.

  • Overall, divide into three categories, each with seven color choices:
    • Grays
    • Primary colors
    • Accent colors

• Select from predefined colors.

  • Defining a color palette is a true test of skill, as it requires a good eye and experience.
  • Start by finding the darkest and lightest colors, then look for the intermediate ones.

• When searching for dark colors, you can slightly adjust the hue within 30 degrees to compensate for the lack of color caused by changing the other two parameters.

• Similarly, gray does not need to be pure gray; you can add other colors. Some grays are cool-toned, while others are warm-toned.

• To address accessibility, you don't necessarily need to only adjust saturation and lightness to make elements clearer; you can also adjust hue as long as it remains relatively clear, allowing you to maintain aesthetics.

• Don't rely solely on color to distinguish elements; there are many other methods that can achieve even better results.

How to design an elegant UI? Answer: Focus on the details, distinguish between primary and secondary elements, maintain a clean layout, ensure text is easy to read, use rich colors, create natural layers, avoid excessive imagery, and add the finishing touch.

This is Part 3; see Part 1 and Part 2.

Natural Layers​

• Why do some elements appear to have depth? Because they have a natural shadow effect. But is it really worth spending hours tweaking this?

• When elements are raised on the z-axis closer to the user, they attract more attention, which is also achieved through shadow.

• Advanced shadow techniques may even involve two shadows: one created by ambient light and another by direct light.

• Flat design can also convey depth; one way is through color—brighter colors appear closer, while darker colors seem farther away. Another method is using vertical offset with a solid color shadow without blur, such as box-shadow: 0 4px 0 hsl(220,8%, 80%);

• Overlay elements to create depth.

  • For example, use negative margins like margin-bottom: -72px; to overlap two background elements, or even three elements with margin: -72px 0 -72px 0;
  • Similarly, images can overlap two background areas, but to make the image clearer, you can add a solid color border for distinction.

Avoid Excessive Imagery​

• Elegant design pays attention to the use of every image; you should use high-quality images, and adhere to guidelines for their use.

• When placing text over images, to enhance clarity, you can:

  • Overlay a gray layer for a gray background.
  • Reduce the image contrast for a white background.
  • Adjust the image to a single color for a deeper background.
  • Add shadow to the image.

• Images have their own suitable sizes; do not arbitrarily change their scale.

  • Do not enlarge icons; you can add a solid color circle around them.
  • Do not shrink screenshots, as the text will become unreadable; instead, you can:
    • Take screenshots on smaller screens.
    • Focus the screenshot on key areas.
    • If you must take a large image, use lines to replace small text to avoid readability issues.
  • Also, do not shrink icons; redraw them as needed.

• Be mindful of user-uploaded images.

  • If sizes are inconsistent during display, it can look chaotic; use backgroundSize: "cover", backgroundImage: url(...);
  • Images blending with the original background color can look strange; in this case, using inner or outer shadows is more appropriate.

The Finishing Touch​

• You don't always need to add new elements to enhance design; modifying default settings can make it look great, such as:
  • Changing bullet points in lists to icons.
  • Adding color and weight to hyperlinks, or using a stylish bold underline.
  • Altering the default settings of elements like checkboxes and radio buttons.
• Add a colored border to one side.
• Add color to the background, or low-contrast textures and illustrations.
• Design unique empty states.
• Reduce the use of borders; to differentiate color boundaries, use box-shadow, color, or spacing.
• Be unconventional; lists don't have to be single-column; they can be multi-column cards. Tables don't have to be single-row; they can be complex and colorful. Single selections don't have to be radio buttons; they can be cards.

Continuous Evolution​

Design is everywhere in life; view the world through a designer's eyes, continually recording and analyzing.

The business world likes to subtly influence you, often with the intent of guiding you to purchase, align with its brand, or simply to capture your attention. This adds a layer of pervasive artificial noise to an already complex world. Ray Dalio's principle 2.4 states to remember that many people are only pretending to work for you while actually pursuing their own interests; his advice is to be aware of the associated interests and not to be too naive.

How can you determine if certain people or things are genuinely helpful to you? Cultivate your own "Nothing Matters Detector" and frequently ask yourself: You may be right, but is it really useful? These are the good things you talk about, but what do they have to do with me? This can lead to a series of ways to navigate the business world:

1. Do not buy things you do not need, do not invest in companies you do not understand.
2. Distinguish between collective achievements and personal achievements; personal achievements can align with collective achievements, but this alignment must be defined by yourself, not imposed by others.
3. Do not deliberately flatter capitalists; they will not give you money because you are friends; they will only give you money because you provide value. In the age of AI, everyone will ultimately turn to AI for tasks. Why go through you to find AI? Because you are their friend, you are an interesting and reliable person!
4. These are all good things, but they have nothing to do with me. For example:
   1. The way to read most books should be to first look at the title and table of contents, skim most of the content, and read a small portion in depth.
   2. Do not spend too much time on so-called masters.
   3. Consensus does not equal insight.
5. Action is more important than knowledge; the boundaries of the known and unknown are more important than what is internal.
6. To judge whether a person's advice is genuinely helpful to you, pay attention to whether the content aligns with your specific situation.

Of course, a large number of new signals will inevitably be mixed with a lot of new noise. To avoid stagnation, it is essential to listen more to what you should hear, and ultimately, it is up to you to decide what to accept.

What is the difference between this and a "bullshit detector"? The "bullshit detector" targets specific interpersonal communication, while the "Nothing Matters Detector" focuses on the relationship between individuals and the business world.

How to design an elegant UI? Answer: Focus on the details, distinguish between primary and secondary elements, maintain a clean layout, ensure text readability, use rich colors, create natural hierarchies, keep images appropriate, add finishing touches, and ensure sustainability.

Focus on the Details​

1. Start with functionality, not layout.
2. Begin with the details and work from grayscale; this forces you to clarify the hierarchy, layout, comparisons, and sizes before considering color.
3. Avoid over-designing, as a product that users can actually use is far more important than design.
4. Iterate in small steps; people often underestimate the difficulty of implementation.
5. A product's personality is determined by elements such as font, color, border radius, and voice. For example, round shapes feel lively, while straight and thin shapes feel serious; blue is safe, gold feels expensive and complex, and pink is playful. Be careful not to borrow too much from your competitors :)
6. Limit choices by pre-setting common parameters; this makes it look better and easier to implement.

Distinguish Between Primary and Secondary Elements​

1. Human attention is limited; having too many focal points is equivalent to having none.
2. Size does not equal importance; consider using two to three font weights and two to three colors.
3. You can use gray text on a white background to downplay text, but avoid using gray text on a colored background; instead, use colored text on a colored background.
4. Mix weak and strong elements rather than relying solely on one or the other.
5. Try to avoid labels (label: blah); sometimes you don't need a label and can go straight to the value; at other times, you can form a short sentence with the label and value; strengthen or weaken according to the importance of the label and value.
6. The size of document tags does not equal the size of the UI; for instance, while you often use h1 for page titles, the actual importance of a page title may not warrant such prominence, so use regular size and font instead.
7. Weight and color can both serve to strengthen or weaken elements; consider them together.
8. If there are three parallel buttons for actions, distinguish between primary, secondary, and tertiary.

Maintain a Clean Layout​

1. Start with a loose layout, as reducing spacing is easier than increasing it.
2. Select spacing from the design system.
3. You don't need to occupy the entire screen; you can center elements or add columns.
4. Some elements should not use proportional sizing but fixed widths, such as a left navigation bar or the width of an icon occupying a column; forms should not be resized unless absolutely necessary.
5. Avoid scaling all parameters of a component uniformly; instead, design specifically for different sizes.
6. Related items should be grouped together, while unrelated items should be spaced apart.

Ensure Text Readability​

1. Choose font sizes from the design system; avoid using em as it is a relative value based on the current font.
2. Select a good font; starting with system fonts or popular fonts is always a safe choice; some fonts are designed for headings, with shorter horizontal spacing and shorter lowercase letters; others are designed for small sizes, with larger horizontal spacing and taller lowercase letters; learn from excellent designs and develop your intuition.
3. Ensure that text paragraphs are not too wide.
4. Align different text at the same level using baseline alignment (align-items: baseline) instead of centering.
5. Line height affects whether users can easily shift their gaze to the next line; use 2x line height for wide paragraphs and 1.5x for narrow paragraphs; use larger line heights for small text and smaller line heights for large text.
6. Not every hyperlink needs color or underlining.
7. Short paragraphs can be center-aligned, while long paragraphs should be left-aligned; numbers should be right-aligned.
8. If the distribution of single-line text in a paragraph is awkward due to word length, consider using hyphens: auto;.
9. Adjust letter-spacing as noted in item 2 above; if increasing it for small-sized fonts, be careful to reduce letter-spacing.

The core question of this book is, why do large companies win every battle but lose the entire war?

The core answer of this book is, because large companies excel at sustaining technologies but struggle with disruptive technologies.

Here’s the explanation:

What is a dilemma? A dilemma is a situation where one must make a difficult decision among two or more choices, and the options are emotionally unappealing to the decision-maker.

What is technology? The process of inputting low-value products and services to produce high-value products and services.

What is sustaining technology? A type of technology used to enhance mature products and services that mainstream consumers value.

What is disruptive technology? A type of product that differs from the value proposition of sustaining innovations. Although its performance may currently be lower than that of mainstream market mature products, it possesses other characteristics valued by niche consumers, often being cheaper, simpler, smaller, and more convenient to use; its future growth S-curve can quickly surpass that of mainstream products in the market.

What is the innovator's dilemma? Listening to customers and only pursuing sustaining technologies can lead to missing the next wave of revolution; meanwhile, the opportunity cost of self-disruption by pursuing disruptive technologies is high, with relatively greater risks, no short-term results, and dissatisfaction among mainstream customers. So how should decision-makers choose?

Can one easily pursue a second S-curve while satisfying the first S-curve? No, because the evolution of product competition is different at each stage, which includes four stages: performance, reliability, convenience, and price. The capabilities of organizations at each stage may not be interchangeable.

Does "not being good at disruptive technologies" mean that large companies cannot produce disruptive technologies at all? No, they can produce them, but even if they do, these disruptive technologies may not be applicable to their existing markets, while the new markets suitable for this technology may be unclear or too small, making it difficult to generate short-term benefits to predict the future S-curve. Discovering emerging markets is inevitably a process fraught with failures.

Guidelines for Managing Disruptive Technological Change​

1. Customers and investors determine the allocation of resources in enterprises.
2. Small markets cannot meet the growth demands of large enterprises.
3. The S-curve of disruptive technologies is difficult to predict, and it is impossible to analyze non-existent markets.
4. An organization’s capabilities do not equal the capabilities of the resources that make up the organization.
5. Technology supply does not equal market demand.

So how should large companies compete with small companies?​

1. Ensure that disruptive innovation - independent organizations - fit the market.
2. There are sufficient resources within the organization to flow to these independent organizations.
3. Prepare for failure.
4. Actively seek emerging markets for disruptive innovation.

How to evaluate the performance of a technology leader? Each company or individual has its own answer with engineering rubrics. And those rubrics usually focus on a specific role - IC (Software Engineer, Product Manager, Designer) or Engineering Manager. Is there a grand unified framework to evaluate the potential business impact that a technology leader could make? Here are the requirements:

1. full coverage
2. actionable
3. referenceable to building a formidable team

Answers from myself and my Friends​

• Decisiveness: strategy, tactics, and making fact-based decisions faster. Play progressively from small wins to more significant wins for the individuals and organizations. Gathering information, diagnosing to gain insights, making guiding policies, and taking coherent actions. Differentiating facts from opinions and making sure that options are believability-weighted. Exploring innovations in the entire process, and innovation means making changes to do things 10x better. Making initial decisions fast within the time window, reflecting on results, and then iterating through the hierarchy of lifetime/years/quarters/weeks.

• Execution Engine: Building the system to deliver more and then in higher quality, instead of being proud of a few deliverables. Attention to detail. Nudging the cross-functional teams to your unique vision. Balancing speed, quality, and scope according to the customer’s requirements.

• Domain Expertise: pursuing un-teachable special know-how. been there/done that. The market rewards uniqueness.

• Product-sense: developing the intuition on what a great product is. Perceiving the market and industry with data. Building and operating the product with proper processes. Synthesize with other elements in the big picture. Invent and simplify. Plan and manage change. Customer-obsession.

• People and Culture: Work with others: shaping the world together with people. Lead by example. Teamwork. Making people happy and then productive. Sort people and projects often / be professionally judgemental. Incentivize people with intrinsic and then extrinsic motivations. Orgnization = People + Culture. Being both capable and warm. Telling a story that inspires your own passion first. Empowering people to achieve more. Self-driven. Listen to people and inspire people to share. hiring and coaching team. humility, low ego. best idea wins. growth mindset.

• Synergy & Resourcefulness: aligning or connecting resources. 1 + 1 > 2. optimizing the web of customers, distribution channels, products, people, technology, and capitals. playing the reputation game in a long term. turning more people into stake owners and aligning to shared goals.

DC/EP stands for Digital Currency Electronic Payment, a central bank digital currency.

• It is: a dual-layer research and pilot project plan.
• It is not: a payment product.

Current State of Electronic Payments​

More than half of China's population is using electronic payments, with mobile payments accounting for a significant portion of personal consumption payment methods.

What Problems Does DC/EP Aim to Solve?​

1. Consumers need better and cheaper payment methods, with retail as the core use case.
2. Mobile integration has replaced many items such as ID cards, keys, and wallets.
3. Merchant application scenarios exist both online and offline.
4. Encourage competition and innovation among various upper-level institutions.
5. Protect privacy.

Dual-Layer System​

• The first layer is the central bank.
• The second layer consists of commercial banks, telecom operators, and internet payment platforms.

The second layer has the motivation and cost to perform well, while the first layer ensures that the second layer bears sufficient risk and responsibility.

How to Promote It?​

For smaller countries, it is relatively simple to replace paper money with plastic notes within a year; however, in China, each update of the Renminbi has taken about 10 years and still leaves many legacy issues. Fortunately, multiple parallel solutions are possible, making the continuous scalability of the solutions important.

One of the main tasks of the central bank is to maintain currency stability.

• The focus of research and development is not on the digital currency product itself, but on settlement and clearing.
• Improve the connectivity of different payment products.
• Prepare emergency and alternative solutions.

Main Technological Solutions​

1. Account-based electronic wallets, with merchants using QR codes.
2. NFC.

Other options include bank cards and IC cards.

Privacy Protection​

User privacy must be protected, but it cannot be 100% anonymous; acceptance of oversight by authoritative institutions is necessary.

Issues with Blockchain​

Alternative solutions involving blockchain and distributed ledger technology are still under development, but:

1. Throughput is insufficient to support retail use cases.
2. The immutability requirement conflicts with the need for chargebacks in case of incorrect payments.

Cross-Border Payments​

Libra's focus on cross-border remittances as a key application is problematic because retail terminals cannot be used directly, leading to issues of double conversion on both sides of the border.

Different national conditions result in significant resistance; for example, internationally, there is concern about anti-money laundering, anti-terrorism, and anti-drug financing, while China also pays attention to anti-gambling. Many countries have a need to prevent dollarization.

What are the main considerations for analyzing a company's competitive environment?​

New players, old players, what I buy, who buys from me, and other dimensions that can replace me.

What is the essence of competitiveness?​

Irreplaceability, which is the uniqueness in high demand.

Traditional engineering rubrics focus on specific areas, such as IC (software engineers, product managers, designers) or managers. Can we propose a unified framework to measure the business impact of technical workers? There are several requirements:

1. Comprehensive
2. Actionable
3. Guiding for team building

Answers from Me and My Friends​

• Decisiveness: Strategic, tactical, and decision-making abilities. Making the right decisions with the greatest chance of success for oneself or others, whether personal or organizational. Gathering information, diagnosing to gain insights, proposing effective strategies and execution plans. Innovation. Making quick decisions within opportunity windows/limited time/without all information/unable to accurately predict the future, and improving through iteration.

• Execution Engine: Building an execution engine rather than just focusing on execution itself, to effectively influence one's own and others' output, and to precisely balance speed/quality/scope based on demand, craftsmanship.

• Domain Expertise: Special know-how, experience, uniqueness.

• People and Culture: Working with others: shaping the world together with people. Leading by example. Team collaboration, people management, performance and incentives, culture, values, competence + warmth, mindset, passion, self-motivation, listening and sharing, hiring and coaching teams, humility, low ego. Best idea wins. Growth mindset.

• Product Sense: Good intuition, understanding of the market and data, product management (including operations), project management, collaboration/synthesis, invention and simplification, planning and adaptation, obsession with customers.

• Synergy & Resourcefulness: Resource integration ability, optimizing the network of customers, channels, products, people, technology, and capital on a macro level, forming alliances within the company, and effectively coordinating alignment across different organizations.

Requirements​

• design an auth solution that starts simple but could scale with the business
• consider both security and user experiences
• talk about the future trends in this area

Big Picture: AuthN, AuthZ, and Identity Management​

First-things-first, let's get back to basics

• Authentication: figure out who you are
• Authorization: figure out what you can do

In the beginning... Let there be a simple service...

• Layered Architecture

• Client stores a cookie or token as the proof of login status. (valet key pattern)

• Server persists a corresponding session

• Token is usually in the format of JWT, signed by keys fetched from somewhere secure (environment variables, AWS KMS, HarshiCorp Vault, etc.)

• Popular web frameworks often prepare out-of-box auth solutions

Then, as the business grows, we scale the system with AKF scale cube:

• X-axis: Horizontal clone
• Y-axis: Functional decomposition
• Z-axis: Sharding

Plus Conway's law: organization designs the systems mirroring its communication structure. We usually evolve the architecture to micro-services (see why microservices? for more)

• Btw, "microservices vs. monolith" and "multi-repo vs. mono-repo" are different things.
• For the enterprise, there are employee auth and customer auth. We focus more on the customer auth.

In the microservice world, let's take a functional slice of the authn and authz services, and there is an Identity and Access Management (IAM) team working on it.

• Identity-aware proxy is a reverse proxy that allows either public endpoints or checks credentials for protected endpoints. If the credential is not presented but required, redirect the user to an identity provider. e.g. k8s ingress controller, nginx, envoy, Pomerium, ory.sh/oathkeeper, etc.
• Identity provider and manager is one or a few services that manage the user identity through certain workflows like sign in, forgot password, etc. e.g. ory.sh/kratos, keycloak
• OAuth2 and OpenID Connect provider enables 3rd-party developers to integrate with your service.
• Authorization service controls who can do what.

Authentication​

Identity Provider

• The simplest solution is to submit the user's proof of identity and issue service credentials.
  • bcrypt, scrypt for password hash
• However, modern apps often deal with complex workflows like conditional sign up, multi-step login, forgot password, etc. Those workflows are essentially state transition graphs in the state machine.

Workflow: User Settings and Profile Updates

Ory.sh/Kratos as an Example Architecture

2. Third-party OAuth2​

OAuth2 let the user or client go through four major workflows (not sure which one to use? see this) like

1. Authorization Code Grant for web
2. Implicit Grant for mobile
3. Resource Owner Password Credentials Grant for legacy app
4. Client Credentials Grant for backend application flow

And then finally get the access token and refresh token

1. access token is short-lived, and hence the attacking window is short if it is compromised
2. refresh token works only when combined with client id and secret

The assumption is that there are so many entities involved in this workflow - client, resource owner, authorization server, resource server, network, etc. More entities introduce more exposure to attack. A comprehensive protocol should consider all kinds of edge cases. For example, what if the network is not HTTPs / cannot be fully trusted?

OpenID connect is the identity protocol based on OAuth2, and it defines customizable RESTful API for products to implement Single Sign-On (SSO).

There are a lot of tricky details in those workflows and token handling processes. Don't reinvent the wheel.

3. Multi-factor authentication​

Problem: Credential stuffing attack

Users tend to reuse the same username and password across multiple sites. When one of those sites suffers from a data breach, hackers brute-force attack other sites with those leaked credentials.

• Multi-factor authentication: SMS, Email, Phone Voice OTP, Authenticator TOTP
• Rate limiter, fail to ban, and anomaly detection

Challenge: Bad deliverability of Email or SMS

• Do not share marketing email channels with transactional ones.
• Voice OTP usually has better deliverability.

5. Passwordless​

1. biometric: Fingerprints, facial ID, voice ID

• still having trade-offs

2. QR code

• SQRL standard
• Another way to implement:

3. Push Notification

How could clients subscribe to the server's state? Short polling, long polling, web socket, or server-sent events.

4. Vendors on the market​

Don't reinvent the wheel.

• Managed solutions. Two years ago, I compared Auth0, Okta, Amazon Cognito, onelogin, Firebase Authentication. And quite recently, Okta acquired Auth0. In summary, I would recommend Okta and Auth0 if I am running a new startup and do not want to build my own auth systems.
• On-premise / self-host solutions. ory.sh.

6. Optimization​

Challenge 1: Web login is super slow or cannot submit login form at all.

• JS bundle is too large for mobile web
  • Build a lite PWA version of your SPA (single-page web app). whatever makes the bundle small - e.g. preact or inferno
  • Or do not use SPA at all. Simple MPA (multi-page web app) works well with a raw HTML form submission
• Browser compatibility
  • Use BrowserStack or other tools to test on different browsers
• Data centers are too far away
  • Put static resources to the edge / CDN and relay API requests through Google backbone network
  • Build a local DC 😄

See Web App Delivery Optimization for more info

Challenge 2: Account taking-over

• Fraud Detection with Semi-supervised Learning
• Unsupervised learning by datavisor

Challenge 3: Account creation takes too long

When the backend system gets too large, a user creation may fan out to many services and create a lot of entries in different data sources. It feels bad to wait for 15 seconds at the end of sign up, right?

1. collect and sign up incrementally
2. async

Authorization​

isAuthorized(subject, action, resource)

1. Role-based Access Control (RBAC)​

2. Policy-base Access Control (PBAC)​

{
  "subjects": ["alice"],
  "resources": ["blog_posts:my-first-blog-post"],
  "actions": ["delete"],
  "effect": "allow"
}

Challenge: single point of failure and cascading failures

• preprocess and cache permissions
• leverage request contexts
  • assumptions: requests inside of a datacenter are trusted vs. not trusted
• fail open vs. fail closed

Privacy​

1. PII, PHI, PCI​

Western culture has a tradition to respect privacy, especially after the Nazis murdered millions of people. Here are some typical sensitive data types: Personally Identifiable Information (PII), Protected Health Information (PHI, regulated by HIPAA), and Credit Card or Payment Card Industry (PCI) Information.

2. Differential Privacy​

Redacting sensitive information alone may not be good enough to prevent data associated with other datasets.

Differential privacy helps analysts extract data from the databases containing personal information but still protects individuals' privacy.

3. Decentralized Identity​

To decouple id from a centralized identity provider and its associated sensitive data, we can use decentralized id (DID) instead.

• it is essentially in the format of URN: did:example:123456789abcdefghijk
• it could be derived from asymmetric keys and its target business domain.
  • it does not involve your personal info, unlike the traditional way
  • See DID method for how it is working with blockchains.
• it preserves privacy by
  • use different DIDs for different purposes
  • selective disclosure / verifiable claims

Imagine that Alice has a state-issued DID and wants to buy some alcohol without disclosing her real name and precise age.

A DID solution:

• Alice has an identity profile having did:ebfeb1f712ebc6f1c276e12ec21, name, avatar url, birthday and other sensitive data.
• Create a claim that did:ebfeb1f712ebc6f1c276e12ec21 is over the age 21
• A trusted third-party signs the claim and make it a verifiable claim
• Use the verifiable claim as the proof of age

Summary​

This article is an overview of authn and authz in microservices, and you don't have to memorize everything to be an expert. Here are some takeaways:

1. follow standard protocols and don't reinvent the wheel
2. do not under-estimate the power of the security researchers/hackers
3. it is hard to be perfect, and it does not have to be perfect. Prioritize your development comprehensively